import React, { FC, FormEvent, useState } from 'react';
import { Button, FormDropdown, ErrorMessage } from '@nova-hf/ui';

import { useTranslation } from 'utils/i18n';
import { formatPhone } from 'utils/helpers';
import {
  useDeleteWalletCardsUserMutation,
  useWalletCardsRegisteredQuery,
  WalletCardsUser,
} from 'typings/graphql';

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

interface IDeleteUserProps {
  data?: {
    phone: WalletCardsUser['phone'];
    cards: WalletCardsUser['cards'];
  };
  onComplete(): void;
}

export const DeleteUser: FC<IDeleteUserProps> = ({ data, onComplete }) => {
  const { t } = useTranslation('cards');
  const [cardId, setCardId] = useState('');
  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
  const { data: registeredData } = useWalletCardsRegisteredQuery();
  const [deleteUser, { loading }] = useDeleteWalletCardsUserMutation();
  const formattedPhone = data?.phone ? `— ${formatPhone(data?.phone)}` : '';

  const findNameToCardId = (id: string) =>
    (registeredData?.walletCardsRegistered.registered ?? []).find((card) => card.cardId === id)
      ?.name ?? id;

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();

    if (cardId && data?.phone) {
      try {
        const res = await deleteUser({
          variables: {
            input: {
              cardId,
              phone: data.phone,
            },
          },
        });

        if (res.data?.deleteWalletCardsUser.deleteUser?.success) {
          onComplete();
        }
      } catch (error) {
        if (error instanceof Error) {
          setErrorMessage(error.message);
        }
      }
    }
  };

  return (
    <div className={s.deleteUser}>
      <form onSubmit={handleSubmit}>
        <h2 className={s.deleteUser__heading}>
          {t('delete.heading')} {formattedPhone}
        </h2>

        {Boolean(errorMessage) && <ErrorMessage>{errorMessage}</ErrorMessage>}

        <FormDropdown
          label={t('delete.dropdown')}
          name="dropdown"
          onSelect={(id: string) => setCardId(id)}
          skipOnSelectDefaultValue
        >
          {data?.cards?.map((card, index) => {
            if (!card?.cardId) {
              return null;
            }

            return (
              <option key={index} value={card.cardId}>
                {findNameToCardId(card.cardId)}
              </option>
            );
          })}
        </FormDropdown>

        <p className={s.deleteUser__copy}>{t('delete.copy')}</p>

        <Button big loading={loading} type="submit" fill arrowRight>
          {t('delete.button')}
        </Button>
      </form>
    </div>
  );
};