import { FormProvider, useForm } from 'react-hook-form';

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

import {
  type AudienceFormValues,
  CriteriaType,
} from '@material-hu/components/composed-components/audience/Audience/types';
import Alert from '@material-hu/components/design-system/Alert';

import useUnsavedWarning from 'src/hooks/useUnsavedWarning';
import { useNavigateToCurrentArticle } from 'src/pages/dashboard/HuLibraries/hooks/useNavigateToCurrentArticle';
import { type Article } from 'src/pages/dashboard/HuLibraries/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { criteriasToSegmentationExpression } from 'src/components/Audience/utils/criteriasToSegmentationExpression';

import { ContentWrapper } from '../../components/ContentWrapper';
import useSaveArticleAudience from '../hooks/useSaveArticleAudience';

import ArticleAudience from './ArticleAudience';
import ArticleAudienceFooter from './ArticleAudienceFooter';

type ArticleAudienceFormProps = {
  article: Article;
};

const DEFAULT_CRITERIAS = [{ type: CriteriaType.ALL }];

export const ArticleAudienceForm = ({ article }: ArticleAudienceFormProps) => {
  const navigateToCurrentArticle = useNavigateToCurrentArticle();
  const { t } = useLokaliseTranslation('libraries');

  const form = useForm<AudienceFormValues>({
    defaultValues: { criterias: DEFAULT_CRITERIAS },
  });

  const {
    formState: { isDirty },
  } = form;

  const { mutate: saveAudience, isLoading: isSaving } = useSaveArticleAudience(
    article.id,
  );

  const handleSave = () => {
    const criterias = form.getValues('criterias');
    const expression = criteriasToSegmentationExpression(criterias);
    saveAudience(expression, {
      onSuccess: () => {
        form.reset(form.getValues());
        navigateToCurrentArticle();
      },
    });
  };

  const handleBack = () => navigateToCurrentArticle();

  const { modal: unsavedWarningModal } = useUnsavedWarning(
    undefined,
    !isDirty || isSaving,
  );

  return (
    <FormProvider {...form}>
      {unsavedWarningModal}
      <Stack sx={{ flex: 1, height: '100%' }}>
        <ContentWrapper
          sx={{ ...(isSaving && { pointerEvents: 'none', opacity: 0.6 }) }}
        >
          <ArticleAudience article={article} />
          {article.parentId && (
            <Alert
              title={t('article.segmentation.info.title')}
              description={t('article.segmentation.info.description')}
              severity="highlight"
            />
          )}
        </ContentWrapper>
        <ArticleAudienceFooter
          onSave={handleSave}
          onBack={handleBack}
          loading={isSaving}
        />
      </Stack>
    </FormProvider>
  );
};