import React, { FormEvent, useState } from 'react';
import { useMutation } from '@apollo/client';
import {
  Box,
  Container,
  FormStatusMessage,
  Grid,
  GridItem,
  Input,
  MainButton,
  Text,
} from '@nova-hf/ui';
import Wrapper from 'components/app-layout/Wrapper';
import { useWhitelistMutation } from 'typings/graphql';
import { useTranslation } from 'utils/i18n';
import SEO from 'utils/SEO';
import { withStaff } from 'utils/with-staff';

type Form = {
  subscriptionId: string;
  payerSsn: string;
  staffNumber: string;
};

const Hvitlista = withStaff(() => {
  const [errorMessage, setErrorMessage] = useState('');
  const [input, setInput] = useState<Form>({
    subscriptionId: '',
    payerSsn: '',
    staffNumber: '',
  });

  const { t } = useTranslation('staff');
  const [whitelist] = useWhitelistMutation();
  const [whiteListResult, setWhiteListResult] = useState<(string | null | undefined)[]>([]);

  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    try {
      setErrorMessage('');
      const { data } = await whitelist({
        variables: {
          input,
        },
      });

      const newWhiteListResult = data?.whitelist?.whiteListResult || [];

      setWhiteListResult(newWhiteListResult);
      setErrorMessage('');
    } catch (error) {
      if (error instanceof Error) {
        setErrorMessage(error.message);
        setWhiteListResult([]);
      }
    }
  };

  return (
    <Wrapper header="none">
      <Container marginTop={10}>
        <SEO title={t('staff:hvitlista.title')} />
        <Text variant="h1">{t('staff:hvitlista.title')}</Text>
        <Box display="flex" marginBottom={12} flexDirection="column">
          <Box margin={2}>
            <Text variant="pMediumRegular">{t('staff:hvitlista.description')}</Text>
            <Text variant="pMediumBold" marginTop={3} marginBottom={3}>
              {t('staff:hvitlista.instructionBold')}
            </Text>
            <form onSubmit={onSubmit} id="form">
              <Grid gridTemplate={{ sm: 12 }} rowGap={{ sm: 2, lg: 3 }}>
                <GridItem gridColumn={{ sm: 'span3' }}>
                  <Input
                    id="name"
                    name="service"
                    label={t('staff:hvitlista.msisdnLabel')}
                    value={input.subscriptionId}
                    onChange={(e) => setInput({ ...input, subscriptionId: e.target.value })}
                  />
                </GridItem>
                <GridItem gridColumn={{ sm: 'span5' }}>
                  <Input
                    id="payerSsn"
                    name="ssnInput"
                    label={t('staff:hvitlista.payerSsnLabel')}
                    value={input.payerSsn}
                    onChange={(e) => setInput({ ...input, payerSsn: e.target.value })}
                  ></Input>
                </GridItem>
                <GridItem gridColumn={{ sm: 'span3' }}>
                  <Input
                    id="staffNumber"
                    name="staffInput"
                    label={t('staff:hvitlista.staffNumberLabel')}
                    value={input.staffNumber}
                    onChange={(e) => setInput({ ...input, staffNumber: e.target.value })}
                  ></Input>
                  <Box display="flex" marginTop={2}>
                    <MainButton
                      isSubmitButton
                      colorScheme="ocean"
                      text={'Hvítlista'}
                      dottedShadow="none"
                    />
                  </Box>
                </GridItem>
              </Grid>
              <Box marginTop={3} marginBottom={3}>
                {!!errorMessage && (
                  <FormStatusMessage status="error" message={errorMessage}></FormStatusMessage>
                )}

                {whiteListResult.length > 0 && (
                  <div>
                    <Text variant="subHeading" marginBottom={4}>
                      {t('staff:hvitlista.result')}
                    </Text>
                    <ul>
                      {whiteListResult.map((result, index) => (
                        <li key={index}>{result}</li>
                      ))}
                    </ul>
                  </div>
                )}
              </Box>
            </form>
          </Box>
        </Box>
      </Container>
    </Wrapper>
  );
});

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

export default Hvitlista;