import React, { useState } from 'react';
import { withStaff } from 'utils/with-staff';
import Wrapper from 'components/app-layout/Wrapper';
import { formatDate, pages } from 'utils/helpers';
import {
  ContainerDeprecated,
  Text,
  ListCard,
  Box,
  Hero,
  HeroHeadline,
  HeroTitle,
  Pagination,
  Grid,
  GridItem,
  RadioGroup,
  Radio,
  LoadingDots,
  Subtitle,
} from '@nova-hf/ui';
import { CustomerSortKey, CustomerStatus, useCustomersQuery } from 'typings/graphql';
import LinkWrapper from 'components/link-wrapper/LinkWrapper';

const Vidskiptavinir = withStaff(() => {
  const [isChecked, setIsChecked] = useState(false);
  const [page, setPage] = useState(0);
  const [sort, setSort] = useState<CustomerSortKey>(CustomerSortKey.Name);
  const [statusFilter, setStatusfilter] = useState<CustomerStatus | undefined>(undefined);

  const perPage = 100;

  const { data, loading } = useCustomersQuery({
    variables: {
      input: {
        perPage,
        page,
        sort,
        status: statusFilter,
      },
    },
  });

  return (
    <Wrapper header="light">
      <Hero
        accentColor="pink"
        subHero
        background="dark"
        color="light"
        withDock
        lessPadding
        alignLeft
      >
        <HeroHeadline accentColor={'pink'}>
          <Subtitle
            col={12}
            color="white"
            leftAlign
            linkComponent={<LinkWrapper href="/staff/yfirlit"></LinkWrapper>}
          >
            Demo
          </Subtitle>
          <HeroTitle subHero color={'white'}>
            Viðskiptavinir
          </HeroTitle>
        </HeroHeadline>
      </Hero>
      <ContainerDeprecated>
        <Box paddingY={4}>
          <Grid gridTemplate={3} rowGap={8} columnGap={8}>
            <GridItem gridColumn={{ sm: 'span1' }}>
              <Text variant="pLargeBold">Raða eftir</Text>
              <RadioGroup ariaLabel="sort">
                <Box>
                  <Radio
                    value="Nafni"
                    isChecked={sort === CustomerSortKey.Name}
                    onChange={() => setSort(CustomerSortKey.Name)}
                    color="pink"
                  />
                </Box>
                <Box>
                  <Radio
                    value="Kom í viðskipti"
                    isChecked={sort === CustomerSortKey.Created}
                    onChange={() => setSort(CustomerSortKey.Created)}
                    color="pink"
                  />
                </Box>
              </RadioGroup>
            </GridItem>
            <GridItem gridColumn={{ sm: 'span1' }}>
              <Text variant="pLargeBold">Staða viðskipta</Text>
              <RadioGroup ariaLabel="status-filter">
                <Box>
                  <Radio
                    value="Allar stöður"
                    isChecked={!statusFilter}
                    onChange={() => setStatusfilter(undefined)}
                    color="pink"
                  />
                </Box>
                <Box>
                  <Radio
                    value="Virk"
                    isChecked={statusFilter === CustomerStatus.Active}
                    onChange={() => setStatusfilter(CustomerStatus.Active)}
                    color="pink"
                  />
                </Box>
                <Box>
                  <Radio
                    value="Óvirk"
                    isChecked={statusFilter === CustomerStatus.Inactive}
                    onChange={() => setStatusfilter(CustomerStatus.Inactive)}
                    color="pink"
                  />
                </Box>
              </RadioGroup>
            </GridItem>
          </Grid>
        </Box>
        {loading && (
          <Text variant="h5">
            Sæki
            <LoadingDots animateAllDots={false} />
          </Text>
        )}
        {data?.customers.pageInfo && <Box>Heildarfjöldi: {data.customers.pageInfo.totalCount}</Box>}
        <Box paddingY={4}>
          {data?.customers.customers.map(({ id, name, nationalId, email, created, status }) => {
            const createdDate = created ? new Date(created) : new Date();

            return (
              <ListCard
                icon="novaLogo"
                color="pink"
                checkBox={{ onChange: () => setIsChecked(!isChecked), isChecked, type: 'filled' }}
                tag={
                  status === CustomerStatus.Active
                    ? { text: 'Í viðskiptum', color: 'green' }
                    : { text: 'Óvirkur', color: 'warning' }
                }
                key={id}
                button={{
                  icon: 'longArrowRight',
                  href: `/beta/${id}/yfirlit`,
                  renderAs: 'a',
                }}
              >
                <Box>
                  <Text variant="pMediumBold">{name}</Text>
                </Box>
                <Box>
                  <Text variant="pMediumBold">Kennitala</Text>
                  <Text variant="pSmallRegular">{nationalId}</Text>
                </Box>
                <Box>
                  <Text variant="pMediumBold">Tölvupóstfang</Text>
                  <Text variant="pSmallBold" color="pink">
                    {email}
                  </Text>
                </Box>
                <Box>
                  <Text variant="pMediumBold">Kom í viðskipti</Text>
                  <Text variant="pSmallBold" color="pink">
                    {formatDate(createdDate, 'dd.MM.yyy')}
                  </Text>
                </Box>
              </ListCard>
            );
          })}
        </Box>
        <Box padding={5}>
          {data?.customers.pageInfo && (
            <Pagination
              color="pink"
              currentPage={page}
              onNext={(n) => setPage(n + 1)}
              onPage={(n) => setPage(n)}
              onPrev={(n) => setPage(n - 1)}
              pages={pages(data.customers.pageInfo.totalCount as number, perPage)}
            />
          )}
        </Box>
      </ContainerDeprecated>
    </Wrapper>
  );
});

Vidskiptavinir.getInitialProps = () => {
  return {
    namespacesRequired: ['staff'],
  };
};

export default Vidskiptavinir;