import { useState } from 'react';
import { Helmet } from 'react-helmet-async';
import { FormProvider, useForm } from 'react-hook-form';
import { useMutation, useQuery, useQueryClient } from 'react-query';
import { useNavigate, useParams } from 'react-router-dom';

import { useDrawer } from '@material-hu/hooks/useDrawer';
import { useModal } from '@material-hu/hooks/useModal';
import Container from '@material-hu/mui/Container';
import Stack from '@material-hu/mui/Stack';

import HuDialog from '@material-hu/components/design-system/Dialog';
import HuFormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import useHuSnackbar from '@material-hu/components/design-system/Snackbar';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import * as filesService from 'src/services/filesService';
import { FileType, type FolderBodyRequest, type IFile } from 'src/types/files';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { LogEvents, logEvent } from 'src/utils/logging';
import {
  segmentationToIds,
  userSegmentationToUsers,
} from 'src/utils/segmentationUtils';
import { validateRequired } from 'src/utils/validation';

import { filesKeys } from '../queries';
import { filesRoutes } from '../routes';

import FilesHeader from './components/FilesHeader/FilesHeader';
import FilesTable from './components/FilesTable';
import MoveDrawerContent from './components/MoveDrawerContent/MoveDrawerContent';

const List = () => {
  const { id } = useParams();
  const currentFolderId = id && Number(id);
  const { t } = useLokaliseTranslation('files');
  const queryClient = useQueryClient();
  const title = t('FILES');
  const HugoThemeProvider = useHuGoTheme();
  const { enqueueSnackbar } = useHuSnackbar();
  const navigate = useNavigate();

  const [fileSelected, setFileSelected] = useState<IFile>();

  const invalidateFilesQuery = () =>
    queryClient.invalidateQueries(filesKeys.all());

  const { data: currentFolderDetails } = useQuery(
    filesKeys.folderFiles(Number(currentFolderId)),
    () => filesService.getFileInfo(currentFolderId!),
    {
      enabled: !!currentFolderId,
      select: response => response.data,
    },
  );

  const form = useForm({
    defaultValues: { folderName: '' },
    mode: 'onChange',
  });

  const { mutate, isLoading: isMutationLoading } = useMutation(
    (body: FolderBodyRequest) => filesService.createFolder(body),
    {
      onSuccess: response => {
        form.reset();
        invalidateFilesQuery();
        enqueueSnackbar({
          title: t('folder_created'),
          variant: 'success',
        });
        closeCreateFolderModal();
        navigate(filesRoutes.file(response.data.id));
      },
    },
  );

  const submit = form.handleSubmit(async () => {
    const values = form.getValues();

    const segmentation = {
      segmentationItemIds: segmentationToIds(
        currentFolderDetails?.segmentation!,
      ),
      segmentationUserIds: userSegmentationToUsers(
        currentFolderDetails?.userSegmentation!,
      ).map(u => u.id),
    };
    const body = {
      name: values.folderName,
      ...segmentation,
      folderId: Number(currentFolderId),
    };
    mutate(body);
  });

  const close = () => {
    form.reset();
    closeCreateFolderModal();
  };

  const {
    modal: createFolderModal,
    showModal: showCreateFolderModal,
    closeModal: closeCreateFolderModal,
  } = useModal(
    () => (
      <HuDialog
        title={t('add_files', { context: FileType.FOLDER })}
        primaryButtonProps={{
          loading: isMutationLoading,
          onClick: submit,
          children: t('general:create'),
        }}
        secondaryButtonProps={{
          onClick: close,
          children: t('general:cancel'),
        }}
        onClose={close}
        body={
          <HuFormInputClassic
            name="folderName"
            inputProps={{ label: t('folder_name') }}
            rules={validateRequired()}
          />
        }
      />
    ),
    { fullWidth: true, maxWidth: 'sm' },
  );

  const { mutate: deleteFileMutation, isLoading: isLoadingDelete } =
    useMutation((file: IFile) => filesService.deleteFile(file.id), {
      onSuccess: (_, file) => {
        enqueueSnackbar({
          title: t('deleted', { context: file.type }),
          variant: 'success',
        });

        if (file.type === FileType.FILE) {
          logEvent(LogEvents.FILE_DELETE, {
            fileId: file.id,
            folderId: currentFolderDetails?.id,
          });
        }

        if (file.parentId) {
          navigate(filesRoutes.file(file?.parentId));
          queryClient.invalidateQueries(filesKeys.file(file.parentId));
        } else {
          navigate(filesRoutes.base());
          invalidateFilesQuery();
        }
      },
    });

  const {
    closeModal: closeDeleteModal,
    modal: deleteModal,
    showModal: showDeleteModal,
  } = useModal<{
    file: IFile;
  }>(
    ({ file }) => (
      <HuDialog
        title={t('delete_sure', { context: file.type })}
        primaryButtonProps={{
          loading: isLoadingDelete,
          children: t('delete'),
          onClick: () =>
            deleteFileMutation(file, {
              onSuccess: closeDeleteModal,
            }),
        }}
        secondaryButtonProps={{
          children: t('cancel'),
          onClick: closeDeleteModal,
        }}
        onClose={closeDeleteModal}
      />
    ),
    { fullWidth: true, maxWidth: 'sm' },
  );

  const { drawer: moveDrawer, showDrawer: showMoveDrawer } = useDrawer(
    MoveDrawerContent,
    {
      title: t('move_file', { name: fileSelected?.name }),
      sx: {
        '& .MuiTypography-root': {
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
        },
      },
    },
    {
      currentFolder: currentFolderDetails!,
    },
  );

  return (
    <HugoThemeProvider>
      <FormProvider {...form}>
        <Helmet>
          <title>{formatTitle(title)}</title>
        </Helmet>
        <Stack
          sx={{
            backgroundColor: theme =>
              theme.palette.new.background.layout.default,
            height: '100%',
            overflowY: 'auto',
          }}
        >
          <Container
            maxWidth="lg"
            sx={{ py: 4 }}
          >
            <FilesHeader
              currentFolder={currentFolderDetails}
              showCreateFolderModal={showCreateFolderModal}
              showDeleteModal={showDeleteModal}
              setFileSelected={setFileSelected}
              showMoveDrawer={showMoveDrawer}
            />
            <FilesTable
              currentFolder={currentFolderDetails}
              showDeleteModal={showDeleteModal}
              showMoveDrawer={showMoveDrawer}
              setFileSelected={setFileSelected}
            />
          </Container>
          {createFolderModal}
          {deleteModal}
          {moveDrawer}
        </Stack>
      </FormProvider>
    </HugoThemeProvider>
  );
};

export default List;