import * as React from 'react';
import { observer, inject } from 'mobx-react';
import { Confirmation, Button, PaymentFooter, Col } from '@nova-hf/ui';
import { useTranslation } from 'utils/i18n';
import { useSnackbar } from 'notistack';
import { useMutation } from '@apollo/client';

import DateSVG from 'assets/svg/date.svg';
import { formatDate } from 'utils/helpers';
import { RELOCATION } from 'graphql/mutations/relocation';
import { useRouter } from 'next/router';

interface IConfirmChangeProps {
  fiber?: Fiber;
  color?: string;
  subscriptionId: string;
}

const ConfirmRelocation = ({ fiber, color, subscriptionId }: IConfirmChangeProps) => {
  if (!fiber?.property || !fiber?.confirmedAvailability) {
    return <div>NOT FOUND</div>;
  }

  const [relocation, { loading }] = useMutation(RELOCATION);
  const { enqueueSnackbar } = useSnackbar();
  const router = useRouter();
  const { t } = useTranslation('flutningur');
  const {
    confirmedAvailability: { street, houseNumber, zip, line, city },
    relocationDate,
    property: { title, fnum, floor, apartmentNumber },
  } = fiber;

  const onSubmit = async () => {
    const input = {
      street,
      houseNumber,
      zip,
      relocationDate,
      fnum,
      floor,
      apartmentNumber,
      subscriptionId,
    };

    try {
      const { data } = await relocation({ variables: { input } });

      const {
        relocation: { error },
      } = data;

      if (error) {
        enqueueSnackbar(t('confirmRelocation.error', { error: error.message }), {
          variant: 'error',
        });
      } else {
        enqueueSnackbar(t('confirmRelocation.success'), {
          variant: 'success',
        });

        router
          .push(`/${router.query.ssn}/thjonusta/${subscriptionId}/stillingar/flutningur`)
          .then(() => window.scrollTo(0, 0));
      }
    } catch (e) {
      enqueueSnackbar(t('confirmRelocation.error'), {
        variant: 'error',
      });
    }
  };

  return (
    <Col col={10} push={1} base={12}>
      <Confirmation
        title={t('confirmRelocation.relocation')}
        current={{ label: t('relocationDate.title'), value: formatDate(relocationDate, 'PPPP') }}
        selected={{
          label: t('confirmRelocation.newAddress'),
          value: `${line} (${title}), ${zip} ${city}`,
        }}
        icon={<DateSVG />}
      />

      <PaymentFooter>
        <Button background={color} loading={loading} onClick={onSubmit}>
          {t('confirmRelocation.button')}
        </Button>
      </PaymentFooter>
    </Col>
  );
};

export default inject('fiber')(observer(ConfirmRelocation));