import { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';

import { IconInfoCircle, IconSearch } from '@material-hu/icons/tabler';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
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 HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';

import { DraftPermission } from 'src/types/posts';
import { namedFormatUTCDate } from 'src/utils/timeUtils';
import { getFullname } from 'src/utils/userUtils';

import { draftsForReviewRoutes } from '../routes';

import DraftPermissionsHeader from './DraftPermissionsHeader';
import EmptyState from './EmptyState';

export type DraftPermissionsTableProps = {
  draftPermissions: DraftPermission[];
  onDelete: ({ id, fullName }: { id: number; fullName: string }) => void;
  showEmptyText?: boolean;
  isLoading: boolean;
  noResults: boolean;
};

const DraftPermissionsTable: FC<DraftPermissionsTableProps> = props => {
  const { draftPermissions, onDelete, isLoading, noResults } = props;

  const { t } = useTranslation(['drafts', 'general']);
  const navigate = useNavigate();

  const showEmptyText = !isLoading && !draftPermissions?.length;

  return (
    <HuTableContainer
      sx={{ width: '100%', overflow: showEmptyText ? 'hidden' : 'auto' }}
    >
      <HuTable>
        <DraftPermissionsHeader />
        <HuTableBody>
          {draftPermissions?.map(permission => (
            <HuTableRow key={permission.id}>
              <HuTableCell sx={{ whiteSpace: 'nowrap' }}>
                <Typography
                  variant="globalS"
                  fontWeight="fontWeightSemiBold"
                >
                  {getFullname(permission.userFrom)}
                </Typography>
              </HuTableCell>
              <HuTableCell sx={{ whiteSpace: 'nowrap' }}>
                <Typography
                  noWrap
                  variant="globalXS"
                >
                  {namedFormatUTCDate(permission.createdAt)}
                </Typography>
              </HuTableCell>
              <HuTableCell>
                <Typography
                  noWrap
                  variant="globalXS"
                >
                  {getFullname(permission.userTo)}
                </Typography>
              </HuTableCell>
              <HuTableCell>
                <Button
                  sx={{ py: 0, px: 1, minWidth: 'auto' }}
                  onClick={() =>
                    onDelete({
                      id: permission.id,
                      fullName: getFullname(permission.userFrom),
                    })
                  }
                >
                  {t('general:delete')}
                </Button>
              </HuTableCell>
            </HuTableRow>
          ))}
        </HuTableBody>
      </HuTable>
      {showEmptyText && (
        <EmptyState
          Icon={noResults ? IconSearch : IconInfoCircle}
          titleProps={{
            title: '',
            description: t(
              noResults
                ? 'no_results_description'
                : 'no_permission_description',
            ),
          }}
          buttonProps={
            noResults
              ? undefined
              : {
                  text: t('grant_permission'),
                  onClick: () => {
                    navigate(draftsForReviewRoutes.createDraftPermission());
                  },
                }
          }
        />
      )}
    </HuTableContainer>
  );
};

export default DraftPermissionsTable;