import React, { useState } from 'react';
import { Box, MainButton, Modal, Text } from '@nova-hf/ui';
import { inject } from 'mobx-react';
import { useSnackbar } from 'notistack';
import Authentication from 'store/authentication';
import UI from 'store/ui';
import {
  MobileSubscriberStatus,
  useChangeMobileSubscriberStatusMutation,
  useMobileSubscriberStatusQuery,
} from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

import Settings from '../../containers/settings/Settings';

interface LokanirProps {
  subscriptionId: string;
  ui?: UI;
  authentication?: Authentication;
}

const Lokanir = ({ subscriptionId, authentication, ui }: LokanirProps) => {
  if (!authentication) return null;

  const { t } = useTranslation('stillingar');
  const { enqueueSnackbar } = useSnackbar();
  const [showConfirmation, setShowConfirmation] = useState(false);

  const { data, error, refetch, loading } = useMobileSubscriberStatusQuery({
    variables: { input: { subscriptionId: subscriptionId } },
  });

  const [openClose] = useChangeMobileSubscriberStatusMutation({
    onCompleted() {
      refetch();
    },
  });

  if (error || !data) {
    return (
      <Settings subscriptionId={subscriptionId}>
        <div>{t('openCloseSettings.fetchError')}</div>
        <div>{error?.message}</div>
      </Settings>
    );
  }

  const onButtonSubmit = () => {
    setShowConfirmation(true);
  };

  const onConfirmation = async (status: MobileSubscriberStatus) => {
    if (showConfirmation) {
      setShowConfirmation(false);
    }
    try {
      await openClose({
        variables: { input: { id: subscriptionId, status: status } },
      });
      enqueueSnackbar(t('general.message.success'), {
        variant: 'success',
      });
    } catch (e: any) {
      enqueueSnackbar(t('general.message.error', { error: e.message }), {
        variant: 'error',
      });
    }
  };

  const currentStatus = data?.mobileSubscriberStatus?.status;
  const mobileSubscriberStatus = data?.mobileSubscriberStatus;
  const textForClosed = () => {
    if (mobileSubscriberStatus?.isRestrictedOnCreditControl) {
      return t('openCloseSettings.isRestrictedOnCreditControl');
    }
    if (mobileSubscriberStatus?.isRestrictedOnLifeCycleChange) {
      return t('openCloseSettings.isRestrictedOnLifeCycleChange');
    }
    if (mobileSubscriberStatus?.isRestrictedOnUnpaidInvoice) {
      return t('openCloseSettings.isRestrictedOnUnpaidInvoice');
    }
    if (mobileSubscriberStatus?.isRestrictedOnCustomerRequest) {
      return t('openCloseSettings.isRestrictedOnCustomerRequest');
    }
    if (mobileSubscriberStatus?.isRestrictedOnOperatorRequest) {
      return t('openCloseSettings.isRestrictedOnOperatorRequest');
    }
    if (mobileSubscriberStatus?.isRestrictedOnLostPhoneReported) {
      return t('openCloseSettings.isRestrictedOnLostPhoneReported');
    }
    return t('openCloseSettings.default');
  };

  return (
    <Settings subscriptionId={subscriptionId}>
      <Box>
        <Text marginBottom={5} variant="h6" color="black100">
          {t('openCloseSettings.closings')}
        </Text>
        {(currentStatus === MobileSubscriberStatus?.B1W ||
          currentStatus === MobileSubscriberStatus?.B2W) && (
          <Box display="flex" flexDirection="column" gap={5}>
            <Text variant="pLargeRegular" color="black100">
              {textForClosed()}
            </Text>
            <Box width="5/12">
              <MainButton
                colorScheme={ui?.pageColor ?? 'pink'}
                text={t('openCloseSettings.openButton')}
                isDisabled={loading}
                onClick={() => onConfirmation(MobileSubscriberStatus.Active)}
                icon="lockOpen"
              />
            </Box>
          </Box>
        )}
        {currentStatus === MobileSubscriberStatus?.Active && (
          <Box display="flex" flexDirection="column" gap={5}>
            <Text variant="pLargeRegular" color="black100">
              {t('openCloseSettings.closeDescription')}
            </Text>
            <Box width="5/12">
              <MainButton
                colorScheme={ui?.pageColor ?? 'pink'}
                text={t('openCloseSettings.closeButton')}
                isDisabled={loading}
                onClick={() => onButtonSubmit()}
                icon="lock"
              />
            </Box>
          </Box>
        )}
        <Modal
          ariaLabel="confirmationModal"
          onVisibilityChange={(isVisible) => setShowConfirmation(isVisible)}
          isVisible={showConfirmation}
        >
          <Box
            marginX="auto"
            display="flex"
            justifyContent="center"
            alignItems="center"
            flexDirection="column"
            gap={5}
          >
            <Text variant="h6">{t('openCloseSettings.closeConfirmationMessage')}</Text>
            <MainButton
              colorScheme="warning"
              text={t('openCloseSettings.closeConfirmation')}
              isDisabled={loading}
              onClick={() => onConfirmation(MobileSubscriberStatus.B2W)}
              icon="lock"
            />
          </Box>
        </Modal>
      </Box>
    </Settings>
  );
};

Lokanir.getInitialProps = ({ query }: any) => {
  return {
    subscriptionId: query.subscriptionId,
    namespacesRequired: ['stillingar'],
  };
};

export default inject('authentication', 'ui')(Lokanir);