import * as React from 'react';
import { formatPrice } from 'utils/helpers';
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 DateSVG from 'assets/svg/date.svg';
import { EffectTime } from 'containers/checkout/steps';
import { CHANGE_RATEPLAN } from 'graphql/mutations/rateplan';
import { useMutation } from '@apollo/client';
import { useRouter } from 'next/router';

interface IConfirmChangeProps {
  change?: any;
  color: string;
  subscriptionId: string;
}

const ConfirmRateplanChange = ({ change, color, subscriptionId }: IConfirmChangeProps) => {
  const { activateNextMonth, selectedRateplan, resetChangeFlow, packToChange, checkEffectTime, allowChangeLater } = change;

  const { enqueueSnackbar } = useSnackbar();
  const [changeRateplan, { loading }] = useMutation(CHANGE_RATEPLAN);
  const { t } = useTranslation('change');
  const router = useRouter();

  if (checkEffectTime && allowChangeLater) {
    return <EffectTime color={color} />;
  }

  const onSubmit = async () => {
    const input = {
      rateplanId: selectedRateplan.id,
      activateNextMonth,
    };

    try {
      await changeRateplan({ variables: { input, subscriptionId  } });

      resetChangeFlow();

      enqueueSnackbar(t('steps.confirmation.success'), {
        variant: 'success',
      });

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

  return (
    <Col col={6} push={3} base={12}>
      <Confirmation
        title={t('steps.confirmation.heading')}
        description={t('steps.confirmation.info',
        { effect: activateNextMonth ? t('steps.confirmation.nextEffect') : t('steps.confirmation.nowEffect') })}
        current={{
          label: t('steps.confirmation.current'),
          value: packToChange && `${packToChange.info.shortTitle}: ${formatPrice(packToChange.info.price)}`,
        }}
        selected={{
          label: t('steps.confirmation.new'),
          value: selectedRateplan && `${selectedRateplan.shortTitle}: ${formatPrice(selectedRateplan.price)}`,
        }}
        icon={<DateSVG />}
      />

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

export default inject('change')(observer(ConfirmRateplanChange));