import React from 'react';
import { Box, MainButton, Text, ThemeColorType } from '@nova-hf/ui';
import { useRouter } from 'next/router';
import { useSnackbar } from 'notistack';
import { IRateplan } from 'typings';
import {
  useHasCancellationQuery,
  useReactivatePrepaidMutation,
  useWithdrawCancelMutation,
} from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

export const SubscriptionStatus = ({
  subscriptionStatusDetails,
  dotColor,
  rateplan,
  isStaff,
}: {
  subscriptionStatusDetails: string;
  dotColor: ThemeColorType;
  rateplan?: IRateplan;
  isStaff?: boolean;
}) => {
  const { t } = useTranslation('fiber');
  const router = useRouter();
  const ssn = router?.query?.ssn ?? '';
  const subscriptionId = router?.query?.subscriptionId ?? '';
  const { enqueueSnackbar } = useSnackbar();
  const isB1w = subscriptionStatusDetails?.includes('b1w');
  const isB2w = subscriptionStatusDetails?.includes('b2w');
  const isFrelsi = rateplan?.title?.toLowerCase().includes('frelsi');
  const hasB1WButton = isFrelsi && isB1w && isStaff;
  const hasB2WButton = isStaff && isB2w;
  const [openTemp, { loading: openTempLoading }] = useReactivatePrepaidMutation();
  const [withdraw, { loading: withdrawLoading }] = useWithdrawCancelMutation();
  const { data, refetch } = useHasCancellationQuery({
    variables: {
      input: {
        subscriptionId: subscriptionId.toString(),
      },
    },
  });
  const hasCancellation = data?.hasCancellation;

  const withdrawButton = async () => {
    try {
      await withdraw({
        variables: { input: { subscriptionId: subscriptionId.toString() } },
      });
      enqueueSnackbar('Tókst að hætta við uppsögn', {
        variant: 'success',
      });
    } catch (error) {
      enqueueSnackbar('Ekki tókst að hætta við uppsögn', {
        variant: 'error',
      });
    }
  };
  const buttonSubmit = async () => {
    try {
      await openTemp({
        variables: { input: { subscriptionId: subscriptionId.toString() } },
      });
      enqueueSnackbar(t('restrictions.banner.success'), {
        variant: 'success',
      });
      refetch();
    } catch (error) {
      enqueueSnackbar(t('restrictions.banner.failure'), {
        variant: 'error',
      });
    }
  };

  return (
    <Box>
      <Box
        paddingX={[3, 4]}
        paddingY={[2, 3]}
        borderStyle="solid"
        borderColor="grey200"
        borderWidth="1px"
        display="flex"
        alignItems="center"
        gap={[3, 4]}
      >
        <Box background={dotColor} borderRadius="xLarge" height={2} width={2} />
        <Box display="flex" flexDirection="row" alignItems="center" justifyContent="space-between">
          <Box>
            <Text variant="eyebrowMedium" marginBottom={3}>
              {t('subscriptionDetailsStatus.eyeBrow')}{' '}
            </Text>
            <Text variant="subtitleBold">{subscriptionStatusDetails}</Text>
          </Box>
          {(hasB1WButton || hasB2WButton) && isFrelsi && (
            <Box paddingLeft={3} width="4/12">
              <MainButton
                text={t('restrictions.banner.openButton')}
                isDisabled={openTempLoading}
                onClick={() => buttonSubmit()}
                colorScheme="pink"
                dottedShadow="none"
                isLoading={openTempLoading}
                icon="lockOpen"
              />
            </Box>
          )}
          {hasB2WButton && !isFrelsi && (
            <Box paddingLeft={3} width="4/12">
              <MainButton
                text={'Skoða lokun'}
                onClick={() =>
                  router.push(`/${ssn}/thjonusta/${subscriptionId}/stillingar/lokanir`)
                }
                colorScheme="pink"
                dottedShadow="none"
                icon="lock"
              />
            </Box>
          )}
        </Box>
      </Box>
      {hasCancellation && (
        <Box
          borderStyle="solid"
          borderWidth="1px"
          borderColor="grey200"
          display="flex"
          marginTop={3}
        >
          <Box padding={3} flexDirection="row" display="flex" justifyContent="space-between">
            <Text variant="pMediumBold">
              Virk uppsögn er á þjónustu, hægt er að hætta við uppsögn með að smella á takkan hér
              til hliðar.
            </Text>
            <Box width="4/12">
              <MainButton
                text={'Hætta við uppsögn'}
                onClick={() => withdrawButton()}
                colorScheme="pink"
                dottedShadow="none"
                icon="close"
                isDisabled={withdrawLoading}
              />
            </Box>
          </Box>
        </Box>
      )}
    </Box>
  );
};