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

import TaskFocusHeader from '@material-hu/components/design-system/Header/TaskFocus';
import { useDialogLayer } from '@material-hu/components/layers/Dialogs';

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

import { agentsRoutes } from '../../../../routes';
import { UPLOAD_FIELDS } from '../../constants';
import { type UploadFormValues } from '../../types';
import UploadFileExitDialog from '../UploadFileExitDialog';

const EXIT_DIALOG_ID = 'upload-exit-dialog';

const UploadFileHeader = () => {
  const { t } = useLokaliseTranslation('general');
  const navigate = useNavigate();
  const { openDialog, closeDialog } = useDialogLayer();

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

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

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

  const handleClose = () => {
    if (hasFile) {
      openDialog(
        {
          content: (
            <UploadFileExitDialog
              onLeave={() => {
                closeDialog(EXIT_DIALOG_ID);
                navigateToKnowledgeBase();
              }}
              onContinue={() => closeDialog(EXIT_DIALOG_ID)}
            />
          ),
        },
        EXIT_DIALOG_ID,
      );
    } else {
      navigateToKnowledgeBase();
    }
  };

  return (
    <TaskFocusHeader
      title={t('upload_file')}
      onClose={handleClose}
    />
  );
};

export default UploadFileHeader;