import { useMemo } from 'react';
import { FormProvider, useForm, useWatch } from 'react-hook-form';
import { useMutation, useQuery } from 'react-query';
import { useNavigate } from 'react-router';

import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';
import { useHuPagination } from '@material-hu/hooks/useHuPagination';
import { useModal } from '@material-hu/hooks/useModal';
import { IconFilter, IconPlus } from '@material-hu/icons/tabler';
import Badge from '@material-hu/mui/Badge';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuDialog from '@material-hu/components/design-system/Dialog';
import useHuSnackbar from '@material-hu/components/design-system/Snackbar';
import HuTable from '@material-hu/components/design-system/Table';
import HuTableBody from '@material-hu/components/design-system/Table/components/TableBody';
import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableContainer from '@material-hu/components/design-system/Table/components/TableContainer';
import HuTableHead from '@material-hu/components/design-system/Table/components/TableHead';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import * as vacationsService from 'src/services/vacationsService';
import { type User } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { LogEvents, logEvent } from 'src/utils/logging';

import FileTableSkeleton from '../Files/List/components/TableSkeleton/FileTableSkeleton';

import { customEllipsisTableCellStyle } from './constant';
import EmptyState from './EmptyState/EmptyState';
import FilterPoliciesDrawer from './FilterPoliciesDrawer';
import { usePolicyDetailsDrawer } from './Policies/hooks/usePolicyDetailsDrawer';
import { MenuListPolicie } from './Policies/MenuListPolicie';
import { refetchPolicies, vacationsKeys } from './queries';
import { vacationsRoutes } from './routes';

export const DEFAULT_PAGINATION = {
  page: 1,
  limit: 10,
};

type PoliciesFilters = {
  policyTypeId: string;
  user: User | null;
};

export enum FilterType {
  POLICY_TYPE = 'policyTypeId',
  USER = 'user',
}

const Policies = () => {
  const { t } = useLokaliseTranslation('time_off');
  const HuGoThemeProvider = useHuGoTheme();
  const { enqueueSnackbar } = useHuSnackbar();
  const navigate = useNavigate();
  const { openPolicyDetailsDrawer } = usePolicyDetailsDrawer();

  const form = useForm<PoliciesFilters>({
    defaultValues: {
      policyTypeId: '',
      user: null,
    },
  });

  const {
    setPartialParams,
    params,
    Pagination,
    form: formPagination,
  } = useHuPagination({});

  const selectedPolicyType = useWatch({
    name: FilterType.POLICY_TYPE,
    control: form.control,
  });

  const selectedUser = useWatch({
    name: FilterType.USER,
    control: form.control,
  });

  const {
    data: policies = { items: [], totalPages: 0, totalCount: 0 },
    isLoading: isLoadingPolicies,
    isFetching: isFetchingPolicies,
  } = useQuery(
    vacationsKeys.policies(
      params.pagination,
      params.policyTypeId,
      params.userId,
    ),
    () =>
      vacationsService.getPolicies({
        ...params.pagination,
        policyTypeId: params.policyTypeId || null,
        userId: params.userId || null,
      }),
    {
      select: r => r.data,
    },
  );

  const deleteMutation = useMutation(
    (id: number) => vacationsService.deletePolicy(id),
    {
      onSuccess: (_, policyId) => {
        logEvent(LogEvents.TIME_OFF_POLICY_DELETED, {
          policyId,
        });

        enqueueSnackbar({
          title: t('POLICY_DELETED'),
          variant: 'success',
        });
        refetchPolicies(params.pagination, params.policyTypeId, params.userId);
      },
    },
  );

  const {
    modal: deleteModal,
    showModal: showDeleteModal,
    closeModal: closeDeleteModal,
  } = useModal(({ id }: { id: number }) => (
    <HuDialog
      onClose={closeDeleteModal}
      title={t('DELETE_POLICY')}
      textBody={t('DELETE_POLICY_BODY')}
      primaryButtonProps={{
        children: t('GENERAL:DELETE'),
        onClick: () => {
          deleteMutation.mutate(id, { onSettled: closeDeleteModal });
        },
        loading: deleteMutation.isLoading,
        variant: 'primary',
      }}
      secondaryButtonProps={{
        children: t('GENERAL:CANCEL'),
        onClick: closeDeleteModal,
        disabled: deleteMutation.isLoading,
        variant: 'secondary',
      }}
    />
  ));

  const columns = [
    {
      label: t('NAME'),
      key: 'name',
    },
    {
      label: t('TYPE'),
      key: 'policyType',
    },
    {
      label: t('COLLABORATORS'),
    },
    { key: 'actions', label: '' },
  ];

  const cleanFilters = () => {
    form.reset();
    setPartialParams({
      policyTypeId: '',
      userId: '',
      pagination: {
        page: DEFAULT_PAGINATION.page,
        limit: params.pagination.limit,
      },
    });

    closeDrawer();
    enqueueSnackbar({
      title: t('FILTERS_CLEARED'),
      variant: 'info',
    });
  };

  const applyFilters = () => {
    setPartialParams({
      pagination: DEFAULT_PAGINATION,
      policyTypeId: selectedPolicyType || '',
      userId: selectedUser?.id || '',
    });
    closeDrawer();
    enqueueSnackbar({
      title: t('FILTERS_APPLIED_SUCCESS'),
      variant: 'info',
    });
  };

  const disabledFilterButton = !selectedPolicyType && !selectedUser;

  const disabledCleanFiltersButton = !params.policyTypeId && !params.userId;

  const {
    drawer: filterDrawer,
    showDrawer: showFilterDrawer,
    closeDrawer,
  } = useDrawerV2(args => ({
    title: t('GENERAL:FILTERS'),
    children: <FilterPoliciesDrawer isDrawerOpened={args.open} />,
    secondaryButtonProps: {
      children: t('GENERAL:CLEAN_FILTERS'),
      onClick: cleanFilters,
      disabled: disabledCleanFiltersButton,
    },
    primaryButtonProps: {
      children: t('GENERAL:APPLY'),
      onClick: applyFilters,
      disabled: disabledFilterButton,
    },
  }));

  const totalCount = useMemo(() => {
    return (params.policyTypeId ? 1 : 0) + (params.userId ? 1 : 0);
  }, [params.policyTypeId, params.userId]);

  const isFiltering = selectedPolicyType || selectedUser;

  return (
    <HuGoThemeProvider>
      <FormProvider {...form}>
        {deleteModal}
        {filterDrawer}
        <FormProvider {...formPagination}>
          <Stack
            sx={{
              gap: 1,
            }}
          >
            <Stack
              sx={{ flexDirection: 'row', justifyContent: 'space-between' }}
            >
              <Typography
                variant="globalL"
                fontWeight="fontWeightSemiBold"
              >
                {t('POLICIES')}
              </Typography>
              <Stack sx={{ flexDirection: 'row', gap: 1 }}>
                <Button
                  sx={{
                    pr: totalCount > 0 ? 2 : 1,
                  }}
                  variant="secondary"
                  startIcon={<IconFilter />}
                  onClick={showFilterDrawer}
                  endIcon={
                    totalCount > 0 && (
                      <Badge
                        color="primary"
                        badgeContent={totalCount}
                        sx={{ pl: 2 }}
                      />
                    )
                  }
                >
                  {t('FILTER_BY')}
                </Button>
                <Button
                  startIcon={<IconPlus />}
                  variant="primary"
                  onClick={() => navigate(vacationsRoutes.newPolicy())}
                >
                  {t('NEW_POLICY')}
                </Button>
              </Stack>
            </Stack>
            <HuTableContainer sx={{ mt: 1 }}>
              <HuTable>
                <HuTableHead>
                  <HuTableRow headerRow>
                    {columns.map(column => (
                      <HuTableCell
                        headerCell
                        key={`${column.key}-${params.policyTypeId}-${params.userId}`}
                      >
                        {t(column.label)}
                      </HuTableCell>
                    ))}
                  </HuTableRow>
                </HuTableHead>
                <HuTableBody>
                  {(isLoadingPolicies || isFetchingPolicies) && (
                    <FileTableSkeleton
                      rows={10}
                      columns={columns.length}
                    />
                  )}
                  {!isLoadingPolicies && !isFetchingPolicies && (
                    <>
                      {policies.items.length === 0 && (
                        <HuTableRow>
                          <HuTableCell colSpan={columns.length}>
                            <EmptyState
                              titleProps={{
                                title: isFiltering
                                  ? t('NO_POLICIES_FILTERED')
                                  : t('NO_POLICIES_FOUND'),
                                description: isFiltering
                                  ? t('NO_POLICIES_FILTERED_DESCRIPTION')
                                  : t('NO_POLICIES_FOUND_DESCRIPTION'),
                              }}
                            />
                          </HuTableCell>
                        </HuTableRow>
                      )}
                      {policies.items.length > 0 &&
                        policies.items.map(policy => (
                          <HuTableRow key={policy.id}>
                            <HuTableCell>
                              <Typography
                                sx={{
                                  ...customEllipsisTableCellStyle,
                                  minWidth: 400,
                                }}
                              >
                                {policy.name}
                              </Typography>
                            </HuTableCell>
                            <HuTableCell>
                              <Typography
                                sx={{
                                  ...customEllipsisTableCellStyle,
                                  maxWidth: 400,
                                }}
                              >
                                {policy.policyType.name}
                              </Typography>
                            </HuTableCell>
                            <HuTableCell
                              sx={{
                                '& .MuiAvatarGroup-root': {
                                  justifyContent: 'center',
                                },
                              }}
                            >
                              <Typography>
                                {t('EMPLOYEES', {
                                  count: policy.peopleAmount,
                                })}
                              </Typography>
                            </HuTableCell>
                            <HuTableCell sx={{ textAlign: 'right' }}>
                              <MenuListPolicie
                                policy={policy}
                                showModal={showDeleteModal}
                                onOpenPolicyDetails={openPolicyDetailsDrawer}
                              />
                            </HuTableCell>
                          </HuTableRow>
                        ))}
                    </>
                  )}
                </HuTableBody>
              </HuTable>
            </HuTableContainer>
            {!isLoadingPolicies && (
              <Pagination
                inputProps={{
                  totalPages: policies.totalPages,
                }}
              />
            )}
          </Stack>
        </FormProvider>
      </FormProvider>
    </HuGoThemeProvider>
  );
};

export default Policies;