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

const Vidskiptavinir = withStaff(() => {
  const [isChecked, setIsChecked] = useState(false);
  const [page, setPage] = useState(1);

  const perPage = 100;

  const { data } = usePeopleQuery({
    variables: {
      input: {
        perPage,
        page,
      },
    },
  });

  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'}>
            Einstaklingar
          </HeroTitle>
        </HeroHeadline>
      </Hero>
      <ContainerDeprecated>
        <Box paddingY={4}>
          {data?.people?.people.map(
            ({ name, nationalId, address, postCode, dateOfBirth, familyRegistrationCode }) => (
              <ListCard
                icon="novaLogo"
                color="pink"
                checkBox={{ onChange: () => setIsChecked(!isChecked), isChecked, type: 'filled' }}
                key={nationalId}
                button={{
                  icon: 'longArrowRight',
                  onClick: () => {
                    alert(`Fjölskyldunúmerið mitt er ${familyRegistrationCode}`);
                  },
                }}
              >
                <Box>
                  <Text variant="pMediumBold">{name}</Text>
                </Box>
                <Box>
                  <Text variant="pMediumBold">Kennitala</Text>
                  <Text variant="pSmallRegular">{nationalId}</Text>
                </Box>
                <Box>
                  <Text variant="pMediumBold">Heimilisfang</Text>
                  <Text variant="pSmallBold" color="pink">
                    {address}, {postCode}
                  </Text>
                </Box>
                <Box>
                  <Text variant="pMediumBold">Fæðingadagur</Text>
                  <Text variant="pSmallBold" color="pink">
                    {formatDate(dateOfBirth, 'dd.MM.yyy')}
                  </Text>
                </Box>
              </ListCard>
            ),
          )}
        </Box>
        <Box padding={5}>
          {data?.people?.pageInfo && (
            <Pagination
              color="pink"
              currentPage={page}
              onNext={(n) => setPage(n + 1)}
              onPage={(n) => setPage(n)}
              onPrev={(n) => setPage(n - 1)}
              pages={pages(data.people.pageInfo.totalCount as number, perPage)}
            />
          )}
        </Box>
      </ContainerDeprecated>
    </Wrapper>
  );
});

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

export default Vidskiptavinir;