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

type Form = {
  phoneNumber: string;
  offerCode: string;
};

const Nemadill = withStaff(() => {
  const [errorMessage, setErrorMessage] = useState('');
  const [successMessage, setSuccessMessage] = useState('');
  const [input, setInput] = useState<Form>({
    phoneNumber: '',
    offerCode: 'scooter',
  });
  const [loading, setLoading] = useState(false);

  const { t } = useTranslation('staff');
  const [addOffer] = useAddOfferMutation();

  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    try {
      setErrorMessage('');
      const { data } = await addOffer({
        variables: {
          input,
        },
      });

      if (data.addOffer.success) {
        setSuccessMessage('Tilboð er komið á númerið og hægt að fylla á frelsið á fylltann');
      } else {
        setErrorMessage('Upp hefur komið villa við að setja á tilboð');
      }
      setLoading(false);
    } catch (error) {
      setLoading(false);

      if (error instanceof Error) {
        setErrorMessage(error.message);
        setSuccessMessage('');
      }
    }
  };

  return (
    <Wrapper header="none">
      <Container marginTop={10}>
        <SEO title="FarSími" />
        <Text variant="h1">FarSími</Text>
        <Box display="flex" marginBottom={12} flexDirection="column">
          <Box margin={2}>
            <Text variant="pMediumBold" marginTop={3} marginBottom={3}>
              Hér getur þú bætt símanúmeri við í tilboðspottinn fyrir FarSíma. Mjög mikilvægt er að
              tryggja að viðskiptavinur sem er að koma í FarSíma sé með símanúmerið sem er skráð hér
              tengt við Hopp reikninginn sinn áður en símanúmerið er skráð í pottinn.{' '}
            </Text>
            <Box marginBottom={3}>
              <a
                href="https://support.nova.is/hc/is/articles/32625941870097-FarS%C3%ADmi-NemaD%C3%ADll"
                target="_blank"
                rel="noreferrer"
              >
                Sjá nánar í hjálpinni
              </a>
            </Box>
            <form onSubmit={onSubmit} id="form">
              <Grid gridTemplate={{ sm: 12 }} rowGap={{ sm: 2, lg: 3 }}>
                <GridItem gridColumn={{ sm: 'span12' }}>
                  <Input
                    id="name"
                    name="service"
                    label="Símanúmer"
                    value={input.phoneNumber}
                    onChange={(e) => setInput({ ...input, phoneNumber: e.target.value })}
                  />
                </GridItem>
                <GridItem gridColumn={{ sm: 'span12' }}>
                  <FormDropdown
                    name="offerCode"
                    label="Tegund tilboðs"
                    onSelect={(selection: string) => {
                      setInput({ ...input, offerCode: selection });
                    }}
                  >
                    <option value="scooter">Rafskúta 100 mínútur</option>
                    <option value="car">Deilibíll 100 mínútur</option>
                  </FormDropdown>
                </GridItem>
                <GridItem gridColumn={{ sm: 'span12' }}>
                  <Box display="flex" marginTop={2}>
                    <MainButton
                      isSubmitButton
                      colorScheme="ocean"
                      text={'Virkja FarSíma'}
                      dottedShadow="none"
                      isDisabled={!!successMessage}
                      isLoading={loading}
                    />
                  </Box>
                </GridItem>
              </Grid>
              <Box marginTop={3} marginBottom={3}>
                {!!errorMessage && (
                  <FormStatusMessage status="error" message={errorMessage}></FormStatusMessage>
                )}

                {!!successMessage && (
                  <div>
                    <Text variant="subHeading" marginBottom={4}>
                      {successMessage}
                    </Text>
                  </div>
                )}
              </Box>
            </form>
          </Box>
        </Box>
      </Container>
    </Wrapper>
  );
});

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

export default Nemadill;