import { useFormContext, useWatch } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';

import Stack from '@material-hu/mui/Stack';

import Button from '@material-hu/components/design-system/Buttons/Button';
import { useDialogLayer } from '@material-hu/components/layers/Dialogs';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { agentsRoutes } from '../../../../routes';
import { KnowledgeBaseAudienceType } from '../../../types';
import { UPLOAD_FIELDS } from '../../constants';
import { useUploadKnowledgeBaseFile } from '../../hooks/useUploadKnowledgeBaseFile';
import { type UploadFormValues, UploadStep } from '../../types';
import UploadFileConfirmDialog from '../UploadFileConfirmDialog';

const CONFIRM_DIALOG_ID = 'upload-confirm-dialog';

type UploadFileFooterProps = {
  activeStep: UploadStep;
  setActiveStep: (step: UploadStep) => void;
};

const UploadFileFooter = ({
  activeStep,
  setActiveStep,
}: UploadFileFooterProps) => {
  const { t } = useLokaliseTranslation('agents');
  const navigate = useNavigate();
  const { openDialog, closeDialog } = useDialogLayer();
  const { uploadFile, isLoading } = useUploadKnowledgeBaseFile();

  const form = useFormContext<UploadFormValues>();
  const [files, audienceType, segmentation, folderPath] = useWatch({
    control: form.control,
    name: [
      UPLOAD_FIELDS.files,
      UPLOAD_FIELDS.audienceType,
      UPLOAD_FIELDS.segmentation,
      UPLOAD_FIELDS.folderPath,
    ],
  });

  const hasFile = files.length > 0 && files[0]?.status === 'success';

  const hasValidAudience =
    audienceType === KnowledgeBaseAudienceType.ALL ||
    (audienceType === KnowledgeBaseAudienceType.SEGMENTED &&
      Object.values(segmentation).some(ids => ids.size > 0));

  const isContinueDisabled =
    activeStep === UploadStep.FILE ? !hasFile : !hasValidAudience;

  const navigateToKnowledgeBase = () =>
    navigate(
      folderPath
        ? agentsRoutes.knowledgeBase.folder(encodeURIComponent(folderPath))
        : agentsRoutes.knowledgeBase.base(),
    );

  const handleUpload = () => {
    uploadFile({ onSuccess: navigateToKnowledgeBase });
  };

  const handleContinue = () => {
    if (activeStep === UploadStep.FILE) {
      setActiveStep(UploadStep.AUDIENCE);
    } else {
      openDialog(
        {
          content: (
            <UploadFileConfirmDialog
              audienceType={audienceType}
              segmentation={segmentation}
              onCancel={() => closeDialog(CONFIRM_DIALOG_ID)}
              onConfirm={() => {
                closeDialog(CONFIRM_DIALOG_ID);
                handleUpload();
              }}
            />
          ),
          disableCloseOnBackdropClick: true,
        },
        CONFIRM_DIALOG_ID,
      );
    }
  };

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        justifyContent: 'center',
        py: 3,
        backgroundColor: theme => theme.palette.new.background.layout.tertiary,
        overflow: 'hidden',
        position: 'sticky',
        bottom: 0,
        zIndex: 2,
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          maxWidth: 'md',
          width: '100%',
        }}
      >
        <Button
          variant="text"
          size="large"
          onClick={() => setActiveStep(UploadStep.FILE)}
          sx={{
            width: 256,
            visibility: activeStep === UploadStep.FILE ? 'hidden' : 'visible',
          }}
        >
          {t('general:back_alt')}
        </Button>

        <Button
          variant="primary"
          size="large"
          disabled={isContinueDisabled}
          onClick={handleContinue}
          sx={{ width: 256 }}
          loading={isLoading}
        >
          {t('general:continue')}
        </Button>
      </Stack>
    </Stack>
  );
};

export default UploadFileFooter;