import { FC, ReactNode, useState } from 'react';
import { useQuery } from 'react-query';

import { useServerPagination } from '@material-hu/hooks/useServerPagination';
import Card from '@material-hu/mui/Card';
import Stack from '@material-hu/mui/Stack';
import Table from '@material-hu/mui/Table';
import TableBody from '@material-hu/mui/TableBody';
import TableCell from '@material-hu/mui/TableCell';
import TableContainer from '@material-hu/mui/TableContainer';
import TableHead from '@material-hu/mui/TableHead';
import TableRow from '@material-hu/mui/TableRow';
import Typography from '@material-hu/mui/Typography';

import { getGroups } from 'src/services/groupsService';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { Pagination } from 'src/utils/tableUtils';
import CenteredCircularProgress from 'src/components/CircularProgress';

import { groupsKeys } from '../queries';

import { GroupTableRow } from './GroupTableRow';

type GroupsTabProps = {
  withMultiCompanyGroups?: boolean;
  header?: ReactNode;
  emptyStateKey?: string;
  emptyStateSubKey?: string;
};

const GroupsTab: FC<GroupsTabProps> = ({
  withMultiCompanyGroups = false,
  header,
  emptyStateKey = 'group:empty_groups',
  emptyStateSubKey = 'group:empty_groups_sub',
}) => {
  const { t } = useLokaliseTranslation(['group', 'general']);
  const [selectedGroupMenuIndex, setSelectedGroupMenuIndex] = useState<
    number | null
  >(null);

  const {
    paginationController,
    pagination,
    Searchbar,
    TableSortingHeader,
    query,
    order,
    orderBy,
  } = useServerPagination({
    labelRowsPerPage: t('general:rows_per_page'),
    defaultOrderBy: 'TITLE',
  });

  const paginationAndOrder: Pagination = {
    ...pagination,
    order,
    orderBy,
    q: query || undefined,
  };

  const { data, isLoading, refetch } = useQuery(
    withMultiCompanyGroups
      ? [...groupsKeys.groups(paginationAndOrder), 'multicompany']
      : groupsKeys.groups(paginationAndOrder),
    () => getGroups({ ...paginationAndOrder, withMultiCompanyGroups }),
    {
      select: r => r.data,
    },
  );

  const groups = data?.items || [];
  const count = data?.count || 0;

  return (
    <Card>
      {header}
      <Searchbar
        placeholder={t('group:query_placeholder')}
        sx={{ p: 1 }}
      />
      {isLoading ? (
        <CenteredCircularProgress
          centered
          sx={{ my: 4 }}
        />
      ) : (
        groups?.length !== 0 && (
          <TableContainer sx={{ overflowX: 'auto' }}>
            <Table>
              <TableHead>
                <TableRow>
                  <TableSortingHeader id="TITLE">
                    {t('group:name')}
                  </TableSortingHeader>
                  <TableSortingHeader id="MEMBERS_COUNT">
                    {t('group:members')}
                  </TableSortingHeader>
                  <TableSortingHeader id="CREATED_AT">
                    {t('group:creation_date')}
                  </TableSortingHeader>
                  <TableCell align="left">{t('group:privacity')}</TableCell>
                  <TableCell />
                </TableRow>
              </TableHead>
              <TableBody>
                {groups.map((group, index) => (
                  <GroupTableRow
                    key={group.id}
                    group={group}
                    onDeleteSuccess={refetch}
                    menuIsCurrentlySelected={selectedGroupMenuIndex === index}
                    onMenuSelection={() =>
                      selectedGroupMenuIndex === index
                        ? setSelectedGroupMenuIndex(null)
                        : setSelectedGroupMenuIndex(index)
                    }
                  />
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        )
      )}
      {groups?.length === 0 && !isLoading && (
        <Stack
          justifyContent="center"
          alignItems="center"
          py={6}
          mb={3}
        >
          <Typography variant="h6">
            {t(query ? 'group:no_groups' : emptyStateKey)}
          </Typography>
          <Typography
            variant="body1"
            color="textSecondary"
            mt={1}
          >
            {t(query ? 'group:no_groups_sub' : emptyStateSubKey)}
          </Typography>
        </Stack>
      )}
      {groups?.length !== 0 && paginationController(count)}
    </Card>
  );
};

export default GroupsTab;