import * as React from 'react';
import { observer, inject } from 'mobx-react';
import { Mutation } from '@apollo/client/react/components';

import { Confirmation, Button, Col, ContainerDeprecated } from '@nova-hf/ui';
import { withTranslation, WithTranslation } from 'utils/i18n';
import { withSnackbar, WithSnackbarProps } from 'notistack';
import { formatDate, capitalize } from 'utils/helpers';
import router from 'next/router';

import DateSVG from 'assets/svg/date.svg';
import { BOOK_SLOT } from 'graphql/mutations/slots';
import Change from 'store/change';

interface IBookSlotProps extends WithTranslation, WithSnackbarProps {
  change?: Change;
  color: string;
  subscriptionId: string;
}

class BookVisitSlot extends React.Component<IBookSlotProps> {
  onSubmit = async (bookVistSlot: any) => {
    const { change, subscriptionId, t, enqueueSnackbar } = this.props;
    if (!change) return;

    const { workDate, slot } = change;

    const input = {
      slotId: slot?.slotId,
      workDate,
    };

    try {
      const { data } = await bookVistSlot({ variables: { input, subscriptionId } });
      const {
        bookVisitSlot: { error },
      } = data;

      if (!error) {
        router
          .push(`/${router.query.ssn}/thjonusta/${subscriptionId}`)
          .then(() => window.scrollTo(0, 0));

        enqueueSnackbar(t('steps.bookSlot.success'), { variant: 'success' });
      } else {
        enqueueSnackbar(`${t('steps.bookSlot.error')}: ${error.message}`, { variant: 'warning' });
      }
    } catch (e) {
      enqueueSnackbar(`${t('steps.bookSlot.error')}: ${e}`, { variant: 'error' });
    }
  };

  get title() {
    const { change } = this.props;
    if (!change || !change.workDate) return;

    return capitalize(
      `${formatDate(new Date(change.workDate), 'eeee')} ${formatDate(
        new Date(change.workDate),
        'd. MMM',
      )}`,
    );
  }

  get description() {
    const { change, t } = this.props;

    if (!change || !change.slot) return '';

    const { startTime, endTime } = change.slot;

    return startTime && endTime
      ? t('steps.bookSlot.description', {
          from: formatDate(new Date(startTime), 'HH:mm'),
          to: formatDate(new Date(endTime), 'HH:mm'),
        })
      : '';
  }

  render() {
    const { t, color } = this.props;

    return (
      <Mutation mutation={BOOK_SLOT}>
        {(bookVistSlot: any, { loading }: any) => {
          return (
            <Col col={6} push={3} base={12}>
              <Confirmation title={this.title} description={this.description} icon={<DateSVG />} />

              <ContainerDeprecated underBar>
                <Button
                  background={color}
                  loading={loading}
                  big
                  fill
                  onClick={() => {
                    this.onSubmit(bookVistSlot);
                  }}
                >
                  {t('steps.bookSlot.button')}
                </Button>
              </ContainerDeprecated>
            </Col>
          );
        }}
      </Mutation>
    );
  }
}
export default withTranslation('change')(withSnackbar(inject('change')(observer(BookVisitSlot))));