import React, { useState } from 'react';
import { useMutation, useQuery } from '@apollo/client';
import { Button as MaterialButton } from '@material-ui/core';
import { Button, Col, Confirmation, PaymentFooter } from '@nova-hf/ui';
import * as Sentry from '@sentry/browser';
import DateSVG from 'assets/svg/date.svg';
import { ADD_CONNECTION } from 'graphql/mutations/connections';
import { SUBSCRIPTION } from 'graphql/queries/subscription';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { withSnackbar, WithSnackbarProps } from 'notistack';
import { ToggleSetting } from 'pages/thjonusta/stillingar/containers/components/ToggleSetting';
import { WithTranslation, withTranslation } from 'utils/i18n';

interface IConfirmConnectionProps extends WithTranslation, WithSnackbarProps {
  change?: any;
  authentication?: any;
  color: string;
  subscriptionId: string;
  selectedItem: any;
  types: Array<string>;
}

const ConfirmConnection = ({
  change: { resetChangeFlow, connection },
  authentication,
  color,
  subscriptionId,
  selectedItem,
  types,
  t,
  enqueueSnackbar,
  closeSnackbar,
}: IConfirmConnectionProps) => {
  const [message, setMessage] = useState('');
  const [payExcess, setPayExcess] = useState(true);

  const [addConnection, { loading }] = useMutation(ADD_CONNECTION);
  const router = useRouter();

  const { data: dataSubscription } = useQuery(SUBSCRIPTION, {
    variables: { subscriptionId, accountInput: authentication.accountInput },
  });
  const subscriptionTitle = dataSubscription?.me?.profiles?.[0]?.title;
  const subscriptionTypeID = dataSubscription?.me?.profiles?.[0]?.rateplan?.typeId;

  const action = (key: any, closeSnackbar: any) => {
    return (
      <MaterialButton
        onClick={() => {
          closeSnackbar(key);
        }}
      >
        {t('common:notification.dismiss')}
      </MaterialButton>
    );
  };

  const mapType = (type: string) => {
    switch (type) {
      case 'forwarding':
        return 'callForwarding';
      case 'backup':
        return 'backupConnection';
      case 'fiber':
        return 'internet';
      default:
        return type;
    }
  };

  const onSubmit = async () => {
    const input = {
      msisdn: connection,
      payExcess,
      type: mapType(types[0]),
    };

    try {
      const res = await addConnection({ variables: { input, subscriptionId } });

      if (res.data.addConnection.error) {
        setMessage(t('steps.connection.error.description'));
      } else {
        resetChangeFlow();

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

        enqueueSnackbar(t('common:notification.success'), {
          variant: 'success',
          action: (key: any) => action(key, closeSnackbar),
        });
      }
    } catch (e) {
      setMessage(t('steps.connection.error.description'));
      Sentry.captureException(e);
    }
  };

  const onToggle = () => {
    setPayExcess(!payExcess);
  };

  const getDescription = (type: string) => {
    if (subscriptionTypeID === 'vip_service_bundle' && type === 'mobile') {
      return t('steps.connection.confirmConnection.mobile_vip_service_bundle.description', {
        subscriptionTitle,
      });
    }
    return t(`steps.connection.confirmConnection.${types[0]}.description`, { subscriptionTitle });
  };

  return (
    <Col col={6} push={3} base={12}>
      <Confirmation
        title={t(`steps.connection.confirmConnection.${types[0]}.heading`)}
        description={getDescription(types[0])}
        selected={selectedItem}
        icon={<DateSVG />}
        errorMessage={message}
      />

      {types[0] === 'mobile' && subscriptionTypeID !== 'vip_service_bundle' && (
        <ToggleSetting
          id="payExcess"
          title={t('steps.connection.confirmConnection.mobile.extra')}
          description={t('steps.connection.confirmConnection.mobile.extraDescription', {
            subscriptionTitle,
          })}
          value={payExcess}
          onToggle={() => onToggle()}
          color={color}
        />
      )}
      <PaymentFooter>
        <Button
          background={color}
          loading={loading}
          onClick={() => {
            onSubmit();
          }}
        >
          {t('steps.connection.confirmConnection.button')}
        </Button>
      </PaymentFooter>
    </Col>
  );
};

export default inject(
  'change',
  'authentication',
)(observer(withTranslation(['change', 'common'])(withSnackbar(ConfirmConnection))));