/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import {LoadingWheel as Loader} from 'components';
import PreFormattedCode from 'components/pre-formatted-code';
import okImage from 'assets/images/icon/ok.svg';
import errorImage from 'assets/images/icon/error.svg';
import React from 'react';

import {DialogResponse, StatusCode, FormLoaderContainer} from './style';

interface IFormResponseComponent {
  response: {
    error: string | boolean | Error;
    status: number | string;
    data?: any; //eslint-disable-line
  };
}

const FormResponse = (props: IFormResponseComponent): React.JSX.Element => {
  const {response} = props;

  return !response ? (
    <FormLoaderContainer>
      <Loader color="dark" size="medium" />
    </FormLoaderContainer>
  ) : (
    <DialogResponse error={response.error || ''}>
      <h3 className="testId-responseModal">{response.error ? 'Error' : 'Success'}</h3>
      <div className="response-icon">
        <img src={response.error ? errorImage : okImage} alt="status icon" />
      </div>
      <StatusCode error={response.error}>Status: {response.status}</StatusCode>
      {response.data && typeof response.data === 'object' && <PreFormattedCode data={response.data} />}
      {response.error && typeof response.error === 'string' && <PreFormattedCode data={{error: response.error}} />}
    </DialogResponse>
  );
};

export default FormResponse;
