import React, { useEffect } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { ErrorMessage } from '@hookform/error-message';
import {
  Box,
  BulletList,
  FormStatusMessage,
  Grid,
  GridItem,
  Input,
  MainButton,
  NumberInput,
  SingleSelect,
  Text,
} from '@nova-hf/ui';
import { IContext } from 'beta/typings/context';
import Step from 'containers/checkout';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { useSnackbar } from 'notistack';
import Authentication from 'store/authentication';
import {
  MobileAdjustmentInput,
  useSummaryLazyQuery,
  useUnpaidMobileInvoiceAdjustmentMutation,
} from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

type ILeidrettingProps = {
  subscriptionId: string;
  ssn: string;
  authentication: Authentication;
};

type AdjustmentForm = {
  amount?: number;
  reason: string;
  questionOne: string;
  questionTwo: string;
  questionThree: string;
};

const COLOR = 'ocean';

const Leidretting = ({ authentication, subscriptionId, ssn }: ILeidrettingProps) => {
  const router = useRouter();
  const { t } = useTranslation('service');
  const { enqueueSnackbar } = useSnackbar();
  const reasons = [
    'Lítil eða engin notkun',
    'Röng þjónusta',
    'Röng rukkun',
    'Uppsögn eða hætt ',
    'Vegna notkunar í útlöndum',
    'Vegna hringingar til útlanda',
    'Vegna flutnings til Nova',
    'Vegna flutnings frá Nova',
    'Annað',
  ];
  const [getSummaryItems, { error, data }] = useSummaryLazyQuery();
  const [adjustmentRequest, { loading: adjustmentRequestLoading, error: adjustmentRequestError }] =
    useUnpaidMobileInvoiceAdjustmentMutation({
      onCompleted(data) {
        if (data?.unpaidMobileInvoiceAdjustment?.message) {
          enqueueSnackbar(t('adjustments.success'), {
            variant: 'success',
          });
          router.push(`/${ssn}/thjonusta/${subscriptionId}`);
        }
      },
      onError(error) {
        if (error) {
          enqueueSnackbar(t('adjustments.fail'), {
            variant: 'error',
          });
        }
      },
    });

  const {
    control,
    handleSubmit,
    setValue,
    formState: { isValid },
    trigger,
    watch,
  } = useForm<AdjustmentForm>({
    defaultValues: {
      amount: undefined,
      reason: '',
      questionOne: '',
      questionTwo: '',
      questionThree: '',
    },
    delayError: 500,
    mode: 'onChange',
  });

  const { reason, amount, questionOne, questionTwo, questionThree } = watch();

  useEffect(() => {
    if (authentication) {
      getSummaryItems({
        variables: {
          accountInput: authentication?.accountInput,
          date: new Date(),
          subscriptionId,
        },
      });
    }
  }, []);

  if (error || !data || !data.me) {
    return null;
  }

  const {
    me: { profiles },
  } = data;
  const currentProfile = profiles?.find((p) => p.subscriptionId === subscriptionId);
  if (!currentProfile) {
    return null;
  }
  const { summary } = currentProfile;
  const totalSum = summary?.totalSum;

  const onSubmit = () => {
    if (reason && amount) {
      adjustmentRequest({
        variables: {
          input: {
            phoneNumber: subscriptionId,
            reason: reason,
            amount: amount,
            description: `Hvers vegna er leiðrétt? ${questionOne}; Hvað klikkaði eða fór úrskeiðis? ${questionTwo}; Hvernig pössum við að þetta gerist ekki aftur? ${questionThree}`,
          },
        },
      });
    }
  };

  return (
    <Step
      color={COLOR}
      titleSteps={['Leiðrétting']}
      returnLink={subscriptionId && `/${ssn}/thjonusta/${subscriptionId}`}
      checkoutLink="leidretting"
      totalSteps={1}
      subscriptionId={subscriptionId}
      doNotUseStepChange={true}
    >
      <Box renderAs="form" onSubmit={handleSubmit(onSubmit)}>
        <Grid gridTemplate={{ sm: 4 }}>
          <GridItem gridColumn={{ sm: 'span4' }}>
            <Box marginBottom={3} display="flex" flexDirection="column">
              <Text color={COLOR} variant="eyebrowLarge" marginTop={3}>
                {t('adjustments.eyebrow')}
              </Text>
              <Text color="black100" variant="h6" marginTop={2}>
                {t('adjustments.title')}
              </Text>
              <Text marginTop={3} color="black100" variant="pMediumRegular">
                {t('adjustments.sectionOne')}
              </Text>
              <Text marginTop={3} color="black100" variant="pMediumRegular">
                {t('adjustments.sectionTwo')}
              </Text>
              <Text marginTop={5} color="black100" variant="pMediumBold">
                {t('adjustments.bulletTitle')}
              </Text>
              <Box style={{ hyphens: 'auto' }} padding={2}>
                <BulletList
                  bulletColor="black100"
                  isBold={false}
                  bullets={[
                    {
                      id: '1',
                      text: t('adjustments.bulletOne'),
                      textVariant: 'pMediumRegular',
                    },
                    {
                      id: '2',
                      text: t('adjustments.bulletTwo'),
                      textVariant: 'pMediumRegular',
                    },
                    {
                      id: '3',
                      text: t('adjustments.bulletThree'),
                      textVariant: 'pMediumRegular',
                    },
                    {
                      id: '4',
                      text: t('adjustments.bulletFour'),
                      textVariant: 'pMediumRegular',
                    },
                    {
                      id: '5',
                      text: t('adjustments.bulletFive'),
                      textVariant: 'pMediumRegular',
                    },
                  ]}
                  gap={1}
                  size="medium"
                  verticalSpace={1}
                />
              </Box>
            </Box>
          </GridItem>
          <GridItem gridColumn={{ sm: 'span4' }}>
            <Controller
              name="reason"
              control={control}
              rules={{
                required: t('adjustments.reasonError').toString(),
              }}
              render={({ field, formState: { errors } }) => {
                const { name, onChange } = field;
                return (
                  <Box>
                    <SingleSelect
                      color={COLOR}
                      defaultMenuIsOpen={false}
                      placeholder={t('adjustments.chooseReason')}
                      id="reason"
                      label={t('adjustments.chooseReason')}
                      maxMenuHeight={250}
                      onChange={(e) => {
                        onChange(e?.value);
                      }}
                      isClearable={false}
                      options={reasons.map((reason) => ({
                        label: reason,
                        value: reason,
                      }))}
                      required
                      isDisabled={adjustmentRequestLoading}
                    />
                    <ErrorMessage
                      errors={errors}
                      name={name}
                      render={({ message }) => (
                        <FormStatusMessage message={message} status="error" />
                      )}
                    />
                  </Box>
                );
              }}
            />
          </GridItem>
          <GridItem gridColumn={{ sm: 'span4' }}>
            <Controller
              name="questionOne"
              control={control}
              rules={{
                required: true,
              }}
              render={({ field, formState: { errors } }) => {
                const { name } = field;
                return (
                  <Box>
                    <Input
                      id="questionOne"
                      label={t('adjustments.questionOne')}
                      isBold={false}
                      required
                      {...field}
                    />
                    <ErrorMessage
                      errors={errors}
                      name={name}
                      render={() => (
                        <FormStatusMessage
                          message={t('adjustments.questionError')}
                          status="error"
                        />
                      )}
                    />
                  </Box>
                );
              }}
            />
          </GridItem>
          <GridItem gridColumn={{ sm: 'span4' }}>
            <Controller
              name="questionTwo"
              control={control}
              rules={{
                required: true,
              }}
              render={({ field, formState: { errors } }) => {
                const { name } = field;
                return (
                  <Box>
                    <Input
                      id="questionTwo"
                      label={t('adjustments.questionTwo')}
                      isBold={false}
                      required
                      {...field}
                    />
                    <ErrorMessage
                      errors={errors}
                      name={name}
                      render={() => (
                        <FormStatusMessage
                          message={t('adjustments.questionError')}
                          status="error"
                        />
                      )}
                    />
                  </Box>
                );
              }}
            />
          </GridItem>
          <GridItem gridColumn={{ sm: 'span4' }}>
            <Controller
              name="questionThree"
              control={control}
              rules={{
                required: true,
              }}
              render={({ field, formState: { errors } }) => {
                const { name } = field;
                return (
                  <Box>
                    <Input
                      id="questionThree"
                      label={t('adjustments.questionThree')}
                      isBold={false}
                      required
                      {...field}
                    />
                    <ErrorMessage
                      errors={errors}
                      name={name}
                      render={() => (
                        <FormStatusMessage
                          message={t('adjustments.questionError')}
                          status="error"
                        />
                      )}
                    />
                  </Box>
                );
              }}
            />
          </GridItem>
          <GridItem gridColumn={{ sm: 'span4' }}>
            <Controller
              name="amount"
              rules={{
                required: t('adjustments.amountMissing').toString(),
                validate: {
                  min: (value) =>
                    Number(value) > 0 ? true : t('adjustments.amountError').toString(),
                  max: (value) =>
                    Number(value) <= (totalSum || 0)
                      ? true
                      : t('adjustments.amountError').toString(),
                },
              }}
              control={control}
              render={({ field, formState: { errors } }) => {
                const { name } = field;
                return (
                  <Box>
                    <NumberInput
                      id="amount"
                      numberType="number"
                      label={t('adjustments.amount')}
                      required
                      name={name}
                      value={field?.value?.toString() ?? ''}
                      onChange={(value) => {
                        if (!value) {
                          setValue('amount', undefined);
                        } else {
                          setValue('amount', Number(value));
                        }
                        trigger('amount');
                      }}
                      onBlur={field.onBlur}
                    />
                    <ErrorMessage
                      errors={errors}
                      name={name}
                      render={({ message }) => (
                        <FormStatusMessage message={message} status="error" />
                      )}
                    />
                  </Box>
                );
              }}
            />
          </GridItem>
          {adjustmentRequestError && (
            <GridItem gridColumn={{ sm: 'span4' }}>
              <FormStatusMessage message={t('adjustments.error')} status="error" />
            </GridItem>
          )}
          <GridItem gridColumn={{ sm: 'span4' }}>
            <Box
              display="flex"
              marginTop={6}
              marginBottom={10}
              justifyContent="flex-end"
              flexDirection={{ sm: 'column', md: 'row' }}
            >
              <Box display="flex" width={{ sm: '100%', md: '4/12' }}>
                <MainButton
                  text={t('adjustments.buttonText')}
                  colorScheme={COLOR}
                  isSubmitButton
                  isLoading={adjustmentRequestLoading}
                  isDisabled={!isValid}
                />
              </Box>
            </Box>
          </GridItem>
        </Grid>
      </Box>
    </Step>
  );
};

Leidretting.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    ssn: query.ssn,
    subscriptionId: query.subscriptionId,
    namespacesRequired: ['service'],
  };
};

export default inject('authentication')(observer(Leidretting));