import { useContext } from 'react';

import Button, { ButtonSize, ButtonVariant } from '@/components/button/Button';
import CloseButton from '@/components/button/CloseButton';

import Finalize from './Finalize';
import TermsOfService from './TermsOfService';
import Trim from './Trim';
import UploadOrRecord from './UploadOrRecord';
import UploadStateContext, { UploaderUIStage } from './UploadStateContext';
import { Footer } from './components';

type UploaderWrapperProps = {
  autoSaveOnFinalize?: boolean;
  hideActions?: boolean;
};

const UploaderWrapper = ({
  autoSaveOnFinalize = false,
  hideActions = false,
}: UploaderWrapperProps) => {
  const { uiStage, isConfirmingClose, cancelClose, attemptClose } =
    useContext(UploadStateContext);

  return (
    <div className='relative py-4'>
      {uiStage !== UploaderUIStage.Finalize ? (
        <div className='absolute top-1 right-1 z-10 m-4'>
          <CloseButton
            onClick={attemptClose}
            variant={ButtonVariant.Standard}
            size={ButtonSize.Mini}
          />
        </div>
      ) : null}
      {isConfirmingClose && (
        <div className='absolute inset-0 z-20 flex flex-col items-center justify-center gap-4 bg-background-secondary'>
          <h4>Discard Changes?</h4>
          <p>Any unsaved changes will be lost.</p>
          <Footer className='gap-2'>
            <Button variant={ButtonVariant.Secondary} onClick={cancelClose}>
              Cancel
            </Button>
            <Button variant={ButtonVariant.Primary} onClick={attemptClose}>
              Discard
            </Button>
          </Footer>
        </div>
      )}
      {uiStage === UploaderUIStage.TermsOfService && <TermsOfService />}
      {uiStage === UploaderUIStage.UploadOrRecord && <UploadOrRecord />}
      {uiStage === UploaderUIStage.Trim && (
        <Trim autoSaveOnFinalize={autoSaveOnFinalize} />
      )}
      {uiStage === UploaderUIStage.Finalize && (
        <Finalize hideActions={hideActions} />
      )}
    </div>
  );
};

export default UploaderWrapper;