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

import Table from '@material-hu/components/design-system/Table';
import TableBody from '@material-hu/components/design-system/Table/components/TableBody';
import TableCell from '@material-hu/components/design-system/Table/components/TableCell';
import TableContainer from '@material-hu/components/design-system/Table/components/TableContainer';
import TableHead from '@material-hu/components/design-system/Table/components/TableHead';
import TableLoader from '@material-hu/components/design-system/Table/components/TableLoader';
import TableRow from '@material-hu/components/design-system/Table/components/TableRow';

import { type RoleListItem } from 'src/pages/dashboard/RolesAndPermissions/types';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { LogEvents, logEvent } from 'src/utils/logging';

import {
  COLUMN_MIN_WIDTHS,
  STICKY_ACTIONS_CELL_SX,
  STICKY_NAME_CELL_SX,
} from '../constants';

import useRoleDetailDrawer from '../hooks/useRoleDetailDrawer';

import EmptyState from './EmptyState';
import RoleDeleteDialog from './RoleDeleteDialog';
import RolesAndPermissionsRow from './RolesAndPermissionsRow';
import RolesTableItemSkeleton from './RolesTableItemSkeleton';

export type RolesAndPermissionsTableProps = {
  onScrollToTop: () => void;
  query: string;
  state: string;
  roles: RoleListItem[];
  isLoading: boolean;
  showFilterEmptyState: boolean;
  isFetchingNextPage: boolean;
  totalCount: number;
  fetchNextPage: () => void;
};

const middleHeaders = [
  { label: 'members' as const },
  { label: 'state' as const },
  { label: 'updated_at' as const },
];

const RolesAndPermissionsTable = ({
  onScrollToTop,
  query,
  state,
  roles,
  totalCount,
  isLoading,
  showFilterEmptyState,
  isFetchingNextPage,
  fetchNextPage,
}: RolesAndPermissionsTableProps) => {
  const { t } = useLokaliseTranslation([
    'rolesAndPermissions',
    'material_hu_only',
  ]);
  const { drawer: roleDetailDrawer, showDrawer: showRoleDetailDrawer } =
    useRoleDetailDrawer();

  const getEmptyStateContent = () => {
    const queryFiltered = !!query;
    const stateFiltered = state !== 'ALL';
    if (queryFiltered && stateFiltered) {
      return {
        title: t('table.empty_both_filtered_roles_title'),
        description: t('table.empty_both_filtered_roles_description'),
      };
    }
    if (stateFiltered) {
      return {
        title: t('table.empty_role_state_filtered_roles_title'),
        description: t('table.empty_role_state_filtered_roles_description'),
      };
    }
    return {
      title: t('table.empty_query_filtered_roles_title'),
      description: t('table.empty_query_filtered_roles_description'),
    };
  };

  const { title, description } = getEmptyStateContent();

  const {
    modal: deleteRoleModal,
    showModal: showDeleteRoleModal,
    closeModal: closeDeleteRoleModal,
  } = useModal<{ role: RoleListItem }>(({ role }) => (
    <RoleDeleteDialog
      role={role}
      onClose={closeDeleteRoleModal}
      query={query}
      state={state}
    />
  ));

  const renderTableContent = () => {
    if (isLoading) {
      return <RolesTableItemSkeleton />;
    }

    if (showFilterEmptyState) {
      return (
        <TableRow>
          <TableCell colSpan={middleHeaders.length + 2}>
            <EmptyState
              title={title}
              description={description}
            />
          </TableCell>
        </TableRow>
      );
    }

    if (roles.length > 0) {
      return roles.map(role => (
        <RolesAndPermissionsRow
          key={role.id}
          role={role}
          onDelete={() => {
            showDeleteRoleModal({ role });
            logEvent(LogEvents.ROLE_DELETION_STARTED, {
              roleId: role.id,
              state: role.state,
            });
          }}
          onViewDetail={() => showRoleDetailDrawer({ role })}
        />
      ));
    }

    return;
  };

  return (
    <Stack sx={{ gap: 1 }}>
      <TableContainer sx={{ zIndex: 0 }}>
        <Table>
          <TableHead
            sx={{
              position: 'sticky',
              top: 0,
              zIndex: 2,
            }}
          >
            <TableRow
              sx={{
                backgroundColor: theme =>
                  theme.palette.new.background.elements.grey,
                '&:hover': {
                  backgroundColor: theme =>
                    theme.palette.new.background.elements.grey,
                },
              }}
            >
              <TableCell
                sx={{
                  ...STICKY_NAME_CELL_SX,
                  top: 0,
                  zIndex: 3,
                  backgroundColor: theme =>
                    theme.palette.new.background.elements.grey,
                }}
              >
                <Typography
                  variant="globalS"
                  fontWeight="fontWeightSemiBold"
                  sx={{
                    color: theme => theme.palette.new.text.neutral.lighter,
                  }}
                >
                  {t('table.header.role_name')}
                </Typography>
              </TableCell>
              {middleHeaders.map(header => (
                <TableCell
                  key={header.label}
                  headerCell
                  sx={{ minWidth: COLUMN_MIN_WIDTHS[header.label] }}
                >
                  {t(`table.header.${header.label}`)}
                </TableCell>
              ))}
              <TableCell
                aria-label={t('general:action_label')}
                headerCell
                sx={{
                  ...STICKY_ACTIONS_CELL_SX,
                  top: 0,
                  zIndex: 3,
                  backgroundColor: theme =>
                    theme.palette.new.background.elements.grey,
                }}
              />
            </TableRow>
          </TableHead>
          <TableBody>
            {renderTableContent()}
            {isFetchingNextPage && <RolesTableItemSkeleton />}
          </TableBody>
        </Table>
      </TableContainer>
      {roles.length > 0 && (
        <TableLoader
          loadedCount={roles.length}
          totalCount={totalCount}
          onLoadMore={fetchNextPage}
          onScrollToTop={onScrollToTop}
        />
      )}
      {deleteRoleModal}
      {roleDetailDrawer}
    </Stack>
  );
};

export default RolesAndPermissionsTable;