import * as React from 'react';
import { Box, IconButton, Menu } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import RightArrowSvg from 'assets/svg/arrow.svg';
import classNames from 'classnames/bind';
import { isEmpty } from 'lodash';
import { useRouter } from 'next/router';
import { useSnackbar } from 'notistack';
import { IKeyValue } from 'typings';

import { SUBSCRIPTION } from '../../graphql/queries/subscription';
import {
  AccountInput,
  useRemoveBalanceMutation,
  useRemoveDataMutation,
} from '../../typings/graphql';
import { useTranslation } from '../../utils/i18n';

import s from './UsageBoxItem.module.scss';

const cn = classNames.bind(s);

interface IUsageBoxItemProps {
  color: string;
  title?: string;
  content?: string;
  price?: string;
  showPrice?: boolean;
  info?: string;
  onClick?: any;
  alerts?: IKeyValue[];
  validTime?: string;
  selected?: boolean;
  canRemoveDataOrBalance?: boolean;
  servicePackId?: string;
  refetch?: () => void;
  accountInput?: AccountInput;
  backupSubscriptionId?: string;
}

export const UsageBoxItem = ({
  color,
  title,
  content,
  price,
  showPrice,
  info,
  onClick,
  alerts,
  validTime,
  selected,
  canRemoveDataOrBalance,
  servicePackId,
  refetch,
  accountInput,
  backupSubscriptionId,
}: IUsageBoxItemProps) => {
  const hasInfo = !isEmpty(info);
  const displayPrice = showPrice && price;
  const { enqueueSnackbar } = useSnackbar();
  const { t } = useTranslation('subscription');
  const router = useRouter();
  const subscriptionId = router?.query?.subscriptionId ?? backupSubscriptionId;
  const [removeData] = useRemoveDataMutation({
    refetchQueries: [{ query: SUBSCRIPTION, variables: { subscriptionId, accountInput } }],
    awaitRefetchQueries: true,
    onCompleted(data) {
      if (data?.removeData?.message) {
        enqueueSnackbar(t('remove.dataSuccess'), {
          variant: 'success',
        });
      }
    },
    onError(error) {
      if (error) {
        enqueueSnackbar(t('remove.dataFailure'), {
          variant: 'error',
        });
      }
    },
  });
  const [removeBalance] = useRemoveBalanceMutation({
    refetchQueries: [{ query: SUBSCRIPTION, variables: { subscriptionId, accountInput } }],
    awaitRefetchQueries: true,
    onCompleted(data) {
      if (data?.removeBalance?.message) {
        enqueueSnackbar(t('remove.balanceSuccess'), {
          variant: 'success',
        });
      }
    },
    onError(error) {
      if (error) {
        enqueueSnackbar(t('remove.balanceFailure'), {
          variant: 'error',
        });
      }
    },
  });

  const onSubmit = (type?: string) => {
    if (type === 'data') {
      removeData({
        variables: {
          input: {
            subscriptionId: subscriptionId?.toString() ?? '',
            ...(servicePackId && { servicePackId: servicePackId }),
          },
        },
      });
    }
    if (type === 'balance' && content) {
      const amount = parseInt(content.replace(/\D/g, ''), 10);
      removeBalance({
        variables: {
          input: {
            subscriptionId: subscriptionId?.toString() ?? '',
            amount: amount,
          },
        },
      });
    }
    refetch && refetch();
  };

  return (
    <button
      className={cn(s.usageBoxItem, `box-shadow-${color}`, { clickable: onClick, selected })}
      onClick={onClick}
    >
      {title && <div className={cn(s.usageBoxItem__usagePackTitle, `color-${color}`)}>{title}</div>}
      {onClick && !canRemoveDataOrBalance && (
        <div className={s.usageBoxItem__clickableArrow}>
          <RightArrowSvg className={cn(s.usageBoxItem__clickableArrowSvg, `color-${color}`)} />
        </div>
      )}
      <div className={s.usageBoxItem__content}>
        <div
          className={cn(s.usageBoxItem__contentMain, {
            hasInfinite: content && content.substring(0, 1) === '∞',
          })}
        >
          {content}
        </div>

        {displayPrice && price && <div className={s.usageBoxItem__contentPrice}>{price}</div>}
        {!displayPrice && !isEmpty(validTime) && (
          <div className={s.usageBoxItem__contentPrice}>{validTime}</div>
        )}
      </div>

      <div className={s.usageBoxItem__info}>
        {hasInfo && <div className={s.usageBoxItem__infoLabel}>{info}</div>}
        {displayPrice && !isEmpty(validTime) && (
          <div className={s.usageBoxItem__infoValue}>{validTime}</div>
        )}
      </div>

      {alerts &&
        alerts.map(({ key, value }, i) => (
          <div className={s.usageBoxItem__alert} key={i}>
            <div className={s.usageBoxItem__alertLabel}>{key}</div>
            <div className={cn(s.usageBoxItem__alertValue, `color-${color}`)}>{value}</div>
          </div>
        ))}

      {canRemoveDataOrBalance && content && !content?.startsWith('0') && (
        <Box
          onClick={(event) => {
            event.stopPropagation();
          }}
          position="absolute"
          padding={2}
          top={1}
          right={0}
        >
          <Menu
            color={color as MainColorType}
            label="Menu"
            items={[
              {
                text: `${t('remove.remove')} ${content}`,
                onClick: () => {
                  onSubmit(servicePackId === 'Hbalance' ? 'balance' : 'data');
                },
              },
            ]}
            disclosure={
              <IconButton
                color="black100"
                icon="dotsVertical"
                hiddenButtonText={t('remove.operations')}
              />
            }
          />
        </Box>
      )}
    </button>
  );
};