import { useState } from 'react';
import { useQuery } from 'react-query';

import { useModal } from '@material-hu/hooks/useModal';
import { useServerPagination } from '@material-hu/hooks/useServerPagination';
import HelpOutlineIcon from '@material-hu/icons/material/HelpOutline';
import Stack from '@material-hu/mui/Stack';
import Tab from '@material-hu/mui/Tab';
import Tabs from '@material-hu/mui/Tabs';
import Tooltip from '@material-hu/mui/Tooltip';

import Button from '@material-hu/components/design-system/Buttons/Button';

import PlusIcon from 'src/icons/Plus';
import * as acknowledgementsService from 'src/services/acknowledgementsService';
import { ExchangeWindowStatus } from 'src/types/acknowledgements';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getServerPaginationParams } from 'src/utils/tableUtils';

import CenteredCircularProgress from 'src/components/CircularProgress';

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

import PeriodModal from './PeriodModal';
import PeriodsTable from './PeriodsTable';

const Periods = () => {
  const { t } = useLokaliseTranslation('acknowledgements');
  const { t: tLokalise } = useLokaliseTranslation();

  const [currentTab, setCurrentTab] = useState(0);

  const activeServerPagination = useServerPagination({
    labelRowsPerPage: tLokalise('general:rows_per_page'),
    defaultOrderBy: 'START_DATE',
  });

  const expiredServerPagination = useServerPagination({
    labelRowsPerPage: tLokalise('general:rows_per_page'),
    defaultOrderBy: 'START_DATE',
  });

  const {
    data: activeData,
    isLoading: activeIsLoading,
    refetch: activeRefetch,
  } = useQuery(
    acknowledgementsKeys.exchangeWindows(
      getServerPaginationParams(activeServerPagination),
      ExchangeWindowStatus.ACTIVE,
    ),
    () =>
      acknowledgementsService.getAcknowledgementsExchangesWindows({
        ...getServerPaginationParams(activeServerPagination),
        status: [
          ExchangeWindowStatus.UPCOMING,
          ExchangeWindowStatus.ACTIVE,
        ].toString(),
      }),
    {
      select: r => r.data,
      keepPreviousData: true,
    },
  );

  const {
    data: expiredData,
    isLoading: expiredIsLoading,
    refetch: expiredRefetch,
  } = useQuery(
    acknowledgementsKeys.exchangeWindows(
      getServerPaginationParams(expiredServerPagination),
      ExchangeWindowStatus.EXPIRED,
    ),
    () =>
      acknowledgementsService.getAcknowledgementsExchangesWindows({
        ...getServerPaginationParams(expiredServerPagination),
        status: ExchangeWindowStatus.EXPIRED,
      }),
    {
      select: r => r.data,
      keepPreviousData: true,
    },
  );

  const refetch = () => {
    activeRefetch();
    expiredRefetch();
    activeServerPagination.setPage(0);
    expiredServerPagination.setPage(0);
  };

  const { modal, showModal } = useModal(
    PeriodModal,
    { maxWidth: 'sm', fullWidth: true },
    { refetch },
  );

  if (activeIsLoading || expiredIsLoading) {
    return <CenteredCircularProgress centered />;
  }

  return (
    <>
      <Stack
        sx={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          mb: 2,
        }}
      >
        <Tabs
          value={currentTab}
          onChange={(_, v) => {
            activeServerPagination.setPage(0);
            expiredServerPagination.setPage(0);
            setCurrentTab(v);
          }}
        >
          <Tab
            label={t('periods.periods', { count: 2 })}
            icon={
              <Tooltip title={t('periods.periods_tooltip')}>
                <HelpOutlineIcon fontSize="small" />
              </Tooltip>
            }
            iconPosition="end"
            sx={{ minHeight: 0 }}
          />
          {expiredData?.count && <Tab label={t('periods.expired')} />}
        </Tabs>
        <Button
          variant="contained"
          startIcon={<PlusIcon fontSize="small" />}
          onClick={() => showModal()}
        >
          {t('periods.new_period')}
        </Button>
        {modal}
      </Stack>
      <PeriodsTable
        data={currentTab ? expiredData : activeData}
        serverPagination={
          currentTab ? expiredServerPagination : activeServerPagination
        }
        refetch={refetch}
      />
    </>
  );
};

export default Periods;