/* eslint-disable @typescript-eslint/no-shadow */
import { useState } from "react";

import { CardListItem } from "@/components/widget/payment/card-list/card-list-item";
import { useLocale } from "@/hooks/useLocale";
import { useDeleteCardMutation } from "@/services/masterpass/delete-card/delete-card.service";
import { useListManagementMutation } from "@/services/masterpass/list-management/list-management.service";
import { useMasterpassStore } from "@/store/masterpass-store/use-masterpass-store";

import { useMasterpass } from "../hooks/use-check-masterpass";

const MasterpassMyRegisteredCard = () => {
  const { masterpassState, setMasterpassData } = useMasterpassStore();
  const [selectCard, setSelectCard] = useState(
    masterpassState.data?.payload?.cardList[0].UniqueId,
  );
  const { t } = useLocale();
  const { CheckListManagementCardStatus } = useMasterpass();

  const listManagementService = useListManagementMutation({
    onSuccess: (data) => {
      if (data.success) {
        if (data.cardList?.ListItem?.length > 0) {
          const cardList = CheckListManagementCardStatus(
            data.cardList.ListItem,
          );
          setMasterpassData({
            moduleName: "Hotel",
            payload: {
              ...masterpassState!.data!.payload,
              masterpassLoginState: true,
              cardList: cardList ?? [],
              selectedCard: cardList[0],
            },
          });
        }
      }
    },
  });
  const deleteCardServices = useDeleteCardMutation({
    onSuccess: (data) => {
      if (data.success) {
        if (data.responseCode === "") {
          listManagementService.mutate({
            referenceNo:
              masterpassState.data?.payload.masterpassUserData.referenceNumber!,
            token: masterpassState.data?.payload?.masterpassUserData.token!,
            msisdn: masterpassState.data?.payload?.masterpassUserData.msisdn!,
          });
        } else {
          setMasterpassData({
            moduleName: "Hotel",
            payload: {
              ...masterpassState!.data!.payload,
              masterpassLoginState: false,
              cardList: [],
            },
          });
        }
      } else {
        setMasterpassData({
          moduleName: "Hotel",
          payload: {
            ...masterpassState!.data!.payload,
            masterpassLoginState: false,
            cardList: [],
          },
        });
      }
    },
  });

  const handleSelectCard = (id: string) => {
    setSelectCard(id);
  };

  return (
    <div className="mt-6 flex flex-col gap-4">
      <span className="text-base">{t("Card Preference")}</span>
      <div className="flex gap-4">
        {masterpassState.data?.payload?.cardList?.map((item: any) => (
          <CardListItem
            key={item.Value1}
            id={item.UniqueId}
            cardNumber={item.Value1}
            cardAlias={item.Name}
            cardDate=""
            isSelected={selectCard === item.UniqueId}
            setSelectCardId={() => handleSelectCard(item.UniqueId)}
            onDeleteCard={() => {
              deleteCardServices.mutate({
                token: masterpassState.data?.payload?.masterpassUserData.token!,
                msisdn:
                  masterpassState.data?.payload.masterpassUserData.msisdn!,
                accountAliasName: item.Name,
              });
            }}
          />
        ))}
      </div>
    </div>
  );
};

export { MasterpassMyRegisteredCard };