import { FC, useMemo } from 'react';

import { useTranslation } from 'react-i18next';

import { useMutation } from 'react-query';
import { useNavigate } from 'react-router';

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

import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';

import { useModal } from '@material-hu/hooks/useModal';

import {
  IconArchive,
  IconDownload,
  IconEdit,
  IconTrash,
} from '@material-hu/icons/tabler';

import { Box } from '@material-hu/mui/index';

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

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

import MenuList from '@material-hu/components/composed-components/MenuList';
import NewModal from '@material-hu/components/deprecated/NewModal';
import useHuSnackbar from '@material-hu/components/design-system/Snackbar';
import useAuth from 'src/contexts/JWTContext';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { deleteGroup } from 'src/services/groupsService';
import { Group } from 'src/types/groups';
import { insertIf } from 'src/utils/arrayUtils';
import { logEvent, LogEvents } from 'src/utils/logging';
import { formatUTCDate } from 'src/utils/timeUtils';
import CustomIcon from 'src/components/CustomIcon';

import { useGroupMembersReportDrawerContent } from '../components/Reports/hooks/useGroupMembersReportDrawerContent';

import { groupRoutes } from '../routes';
import { memberIsFromGroupCreatorInstance } from '../utils';

import { privacyIcon } from '.';

type Props = {
  group: Group;
  onDeleteSuccess: () => void;
  menuIsCurrentlySelected: boolean;
  onMenuSelection: () => void;
};

export const GroupTableRow: FC<Props> = ({
  group,
  onDeleteSuccess,
  menuIsCurrentlySelected,
  onMenuSelection,
}) => {
  const { t } = useTranslation(['group']);
  const HuGoThemeProvider = useHuGoTheme();
  const { enqueueSnackbar } = useHuSnackbar();
  const { user, instance } = useAuth();
  const navigate = useNavigate();

  // For regular groups, this will be true (same instance)
  // For multi-company groups, this determines permissions
  const isFromCreatorInstance = memberIsFromGroupCreatorInstance(
    instance?.id,
    group.instanceId,
  );

  const {
    drawer: groupMembersReportDrawer,
    showDrawer: showGroupMembersReportDrawer,
  } = useDrawerV2(useGroupMembersReportDrawerContent);

  const {
    modal: deleteModal,
    showModal: showDeleteModal,
    closeModal: closeDeleteModal,
  } = useModal<{ id: number }>(({ id }) => (
    <NewModal
      title={t('group:delete_group_title')}
      textBody={t('group:delete_group_info')}
      primaryButtonProps={{
        loading: deleteMutation.isLoading,
        children: t('group:confirm_delete'),
        onClick: () => deleteMutation.mutate(id),
      }}
      secondaryButtonProps={{
        children: t('group:cancel'),
        onClick: closeDeleteModal,
      }}
      onClose={closeDeleteModal}
    />
  ));

  const options = useMemo(() => {
    return [
      ...insertIf(!group.isArchived, {
        onClick: () => navigate(groupRoutes.editGroup(String(group.id))),
        Icon: () => <IconEdit />,
        title: t('group:group_configuration'),
      }),
      ...insertIf(isFromCreatorInstance, {
        onClick: () => showGroupMembersReportDrawer({ groupId: group.id }),
        Icon: () => <IconDownload />,
        title: t('group:download_members_report'),
      }),
      ...insertIf(isFromCreatorInstance && !group.isArchived, {
        onClick: () => showDeleteModal({ id: group.id }),
        Icon: () => <IconTrash />,
        title: t('group:delete_group'),
      }),
    ];
  }, [
    t,
    showDeleteModal,
    group.isArchived,
    group.id,
    navigate,
    showGroupMembersReportDrawer,
    isFromCreatorInstance,
  ]);

  const deleteMutation = useMutation((id: number) => deleteGroup(id), {
    onSuccess: (_, id) => {
      closeDeleteModal();
      logEvent(LogEvents.GROUPS_GROUP_REMOVED, {
        userId: user?.id,
        groupId: id,
      });
      enqueueSnackbar({
        title: t('group:delete_group_success'),
        variant: 'success',
      });
      onDeleteSuccess();
    },
  });

  return (
    <TableRow key={group.id}>
      {deleteModal}
      <HuGoThemeProvider>{groupMembersReportDrawer}</HuGoThemeProvider>
      <TableCell
        component="th"
        scope="row"
      >
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 2,
          }}
        >
          <CustomIcon
            icon={group.icon}
            size={30}
          />
          {group.title}
          {group.isArchived && (
            <HuGoThemeProvider>
              <Stack
                sx={{
                  color: th => th.palette.textColors?.warningText,
                }}
              >
                <IconArchive size={16} />
              </Stack>
            </HuGoThemeProvider>
          )}
        </Box>
      </TableCell>
      <TableCell align="left">{group.membersCount}</TableCell>
      <TableCell align="left">{formatUTCDate(group.createdAt)}</TableCell>
      <TableCell
        component="th"
        scope="row"
      >
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 2,
          }}
        >
          {privacyIcon[group.privacyPolicy]}
          {t(`${group.privacyPolicy.toLowerCase()}`)}
        </Box>
      </TableCell>
      <TableCell align="left">
        <HuGoThemeProvider>
          <MenuList
            options={menuIsCurrentlySelected ? options : []}
            onClick={onMenuSelection}
            position="left"
          />
        </HuGoThemeProvider>
      </TableCell>
    </TableRow>
  );
};