import React, { useEffect, useState } from 'react';
import { theme } from 'data/dataMx';
import { AtomHeadline } from 'native/atoms/Typography/Headline';
import { AtomBody } from 'native/atoms/Typography/Body';
import { AtomCardContainer } from 'native/atoms/CardContainer';
import { MoleculePreviewFile } from 'native/molecules/PreviewFile';
import {
  CardWrapper,
  CardBody,
  TitleSection,
  CaptionContainer,
  UploadButtonContainer,
} from './styles';
import { AtomIcon } from 'native/atoms/Icon';
import { AtomButtonDefault } from 'native/atoms/Buttons/Default';
import { OrganismAlertMessage } from 'native/organisms/AlertMessage';
import { ITypographyProps } from 'native/atoms/Typography/TypographyProps';

export interface IUploadFileProps {
  /** Main title */
  headerText: string;
  /** Caption text as subtitle */
  captionText: string;
  /** captionProps props Typography */
  captionProps: Omit<ITypographyProps, 'text'>
  /** Text showed under the upload icon */
  placeholderText: string;
  /** Placeholder props Typography */
  placeholderProps: Omit<ITypographyProps, 'text'>
  /** Specify the accepted formats or tips to upload the file */
  acceptedFormatText: string;
  /** Define if the file was failed on uploading (Show Alert) */
  hasError: boolean;
  /** Define if the file was success on uploading (Show Alert) */
  hasSuccess: boolean;
  /** Text showed on the error alert message */
  errorMessage: string;
  /** Text showed on the success alert message */
  successMessage: string;
  /** Padding for AtomCard container */
  cardPadding?: string;
  /** Action called after select the file */
  onChange: (file: Object) => void;
  /** Action called after remove the file with the delete button */
  onRemove: () => void;
  /** Action called on clicking the Upload button */
  onSubmitFile: (file: Object) => void;
  /** Action called when error occurs */
  onError: () => void;
  /** Update parent value for hasSuccess prop */
  updateSuccess: () => void;
  /** Update parent value for hasError prop */
  updateError: () => void;
}

export const OrganismScanTicket = ({
  headerText,
  captionText,
  placeholderText,
  acceptedFormatText,
  hasError,
  hasSuccess,
  errorMessage,
  successMessage,
  cardPadding = '10px',
  onChange,
  onRemove,
  onSubmitFile,
  onError,
  updateSuccess,
  updateError,
  captionProps: {
    align = 'center',
    size = 'large',
    color = 'neutral600',
    weight = 'regular',
  },
  placeholderProps,
}: IUploadFileProps) => {
  const [file, setFile] = useState<Object | null>(null);
  const [error, setError] = useState<boolean>(hasError);
  const [success, setSuccess] = useState<boolean>(hasSuccess);
  const [deleteFile, setDeleteFile] = useState<boolean>(false);

  const onFileChanged = (file: any) => {
    if (file) {
      setFile(file);
      onChange(file);
    }
  }

  const onFileRemoved = () => {
    setFile(null);
    onRemove();
  }

  const onSubmit = () => {
    if (file) {
      onSubmitFile(file);
    }
  }

  useEffect(() => {
    setError(hasError);
    setDeleteFile(hasError);
  }, [hasError]);

  useEffect(() => {
    setSuccess(hasSuccess);
    setDeleteFile(hasSuccess);
  }, [hasSuccess]);

  return (
    <>

      <CardWrapper cardPadding={cardPadding}>
        <AtomCardContainer width='100%' height='100%'>
          <CardBody>
            <TitleSection>
              <AtomIcon name='earn_scan' size={48} />
              <AtomHeadline
                text={headerText}
                size='medium'
                weight='regular'
                align='center'
                color={'primary400'}
                styles={{ marginTop: '25px', marginBottom: '0' }}
              />

              <CaptionContainer>
                <AtomBody
                  align={align}
                  text={captionText}
                  size={size}
                  color={color}
                  weight={weight} />
              </CaptionContainer>
            </TitleSection>


            <MoleculePreviewFile
              uploadIcon={true}
              placeholder={placeholderText}
              placeholderProps={placeholderProps}
              acceptedFormatText={acceptedFormatText}
              onChange={(file: Object) => onFileChanged(file)}
              onRemove={() => onFileRemoved()}
              onError={onError}
              deleteFile={deleteFile}
            />


            {file && (
              <UploadButtonContainer>
                <AtomButtonDefault
                  text='UPLOAD'
                  disabled={!file}
                  color='primary'
                  size='medium'
                  onPress={onSubmit}
                  testID='submit-file'
                />
              </UploadButtonContainer>
            )}
          </CardBody>

        </AtomCardContainer>
      </CardWrapper>

      {(error && !success) && (
        <OrganismAlertMessage
          onClickFirstBtn={() => {
            onError();
            setError(false);
            updateError();
          }}
          type='error'
          title='Upload Error'
          message={errorMessage}
          textFirstBtn='Try Again'
          height='350px'
        />
      )}
      {(success && !error) && (
        <OrganismAlertMessage
          onClickFirstBtn={() => {
            setSuccess(false);
            updateSuccess();
          }}
          type='success'
          title='Upload Success'
          message={successMessage}
          textFirstBtn='Ok'
          height='350px'
        />
      )}
    </>
  )
}