import { FC, useState } from 'react';
import { useQuery } from 'react-query';
import { useParams } from 'react-router-dom';

import { useServerPagination } from '@material-hu/hooks/useServerPagination';
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 HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuDropdown from '@material-hu/components/design-system/Dropdown';
import HuMenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';

import useSegmentationGroups from 'src/hooks/queryHooks/useSegmentationGroups';
import useFormatDate from 'src/hooks/useFormatDate';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import useNewTheme from 'src/hooks/useNewTheme';
import {
  getLibrarySegmentedStats,
  getLibraryArticle,
} from 'src/services/libraryService';
import { useLokaliseTranslation } from 'src/utils/i18n';

import TableBodyEmpty from '../components/TableBodyEmpty';
import TableBodySkeleton from '../components/TableBodySkeleton';
import { librariesKeys } from '../queries';

import ReportCard from './ReportCard';
import { isSegmentedStatsEmpty } from './utils';

export const SegmentedStats: FC = () => {
  const [selectedGroup, setSelectedGroup] = useState(null);
  const [groupsOpen, setGroupsOpen] = useState(false);
  const { formatDate } = useFormatDate();
  const { id } = useParams();
  const libraryId = id && parseInt(id);

  const { t } = useLokaliseTranslation('libraries');
  const NewThemeProvider = useNewTheme();
  const HuGoThemeProvider = useHuGoTheme();

  const { paginationController, pagination, setPage } = useServerPagination({
    labelRowsPerPage: t('general:rows_per_page'),
    limitOptions: [10, 20],
  });

  const params = {
    segmentationGroupId: selectedGroup?.id,
    ...pagination,
  };

  const groupsQuery = useSegmentationGroups({
    onSuccess: data => data.length > 0 && setSelectedGroup(data[0]),
  });

  const { data: library } = useQuery(
    librariesKeys.library(libraryId),
    () => getLibraryArticle(libraryId),
    { select: r => r.data },
  );

  const { data, isLoading, isLoadingError, isSuccess, isPreviousData } =
    useQuery(
      librariesKeys.librarySegmentedStats(libraryId, params),
      () => getLibrarySegmentedStats(libraryId, params),
      {
        select: response => response.data,
        keepPreviousData: true,
        enabled: !!selectedGroup,
      },
    );

  const handleOpenGroups = () => setGroupsOpen(true);
  const handleCloseGroups = () => setGroupsOpen(false);

  const handleSelectGroup = group => () => {
    setPage(0);
    setSelectedGroup(group);
    handleCloseGroups();
  };

  const getItemName = (itemId: number) => {
    const findItem = selectedGroup?.items.find(item => item.id === itemId);
    if (!findItem) return '';
    return findItem.name;
  };

  const groupsDisabled = groupsQuery.isLoading || groupsQuery.isError;

  const showEmpty = isSuccess && !data;
  const showError = groupsQuery.isLoadingError || isLoadingError;
  const showLoading = groupsQuery.isLoading || isLoading;
  const showTableEmpty = isSuccess && isSegmentedStatsEmpty(data);
  const showTable = !showLoading && !showTableEmpty;

  return (
    <ReportCard
      title={t('general:report.segmented_interactions')}
      subtitle={t('article.report.segmented_interactions')}
      description={t('general:report.historical.since', {
        date: library?.createdAt
          ? formatDate(library?.createdAt, 'PPP, p.')
          : '',
      })}
      showEmpty={showEmpty}
      showError={showError}
      sx={{
        '& .MuiTablePagination-root': {
          width: '100%',
        },
      }}
    >
      <HuCardContainer
        sx={{
          width: '100%',
          '& > .MuiCardContent-root': {
            p: 0,
          },
        }}
      >
        <NewThemeProvider>
          <TableContainer sx={{ overflowX: 'auto' }}>
            <Table>
              <TableHead>
                <TableRow
                  sx={{
                    '& > th': {
                      verticalAlign: 'middle',
                    },
                  }}
                >
                  <TableCell>
                    <HuGoThemeProvider>
                      <HuDropdown
                        label={
                          selectedGroup
                            ? selectedGroup.name
                            : t('general:upload_loading')
                        }
                        open={groupsOpen}
                        onOpen={handleOpenGroups}
                        onClose={handleCloseGroups}
                        buttonSize="small"
                        buttonProps={{
                          disabled: groupsDisabled,
                        }}
                        sx={{
                          ml: '-10px',
                        }}
                      >
                        {groupsQuery.data?.map(group => (
                          <HuMenuItem
                            key={group.id}
                            selected={selectedGroup?.id === group.id}
                            onClick={handleSelectGroup(group)}
                          >
                            <Typography
                              variant="inherit"
                              noWrap
                            >
                              {group.name}
                            </Typography>
                          </HuMenuItem>
                        ))}
                      </HuDropdown>
                    </HuGoThemeProvider>
                  </TableCell>
                  <TableCell id="TOTAL">
                    {t('general:report.views.total')}
                  </TableCell>
                  <TableCell id="UNIQUES">
                    {t('general:report.views.unique')}
                  </TableCell>
                </TableRow>
              </TableHead>
              {showLoading && <TableBodySkeleton columns={3} />}
              {showTableEmpty && <TableBodyEmpty columns={3} />}
              {showTable && (
                <TableBody
                  sx={{
                    opacity: isPreviousData ? 0.5 : 1,
                  }}
                >
                  {data?.items?.map(stat => (
                    <TableRow key={stat.itemId}>
                      <TableCell variant="titleField">
                        {getItemName(stat.itemId)}
                      </TableCell>
                      <TableCell>{stat.totals}</TableCell>
                      <TableCell>{stat.uniques}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              )}
            </Table>
          </TableContainer>
          {paginationController(data?.count || 0)}
        </NewThemeProvider>
      </HuCardContainer>
    </ReportCard>
  );
};

export default SegmentedStats;