'use client';

import { Button, LoaderSpinner, Modal } from '@akinon/next/components';
import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
import {
  setCards,
  setDeletionModalId,
  setDeletionModalVisible
} from '../redux/reducer';
import { useDeleteSavedCardMutation } from '../redux/api';
import { useState } from 'react';
import { DeletePopupTexts } from '../types';

const defaultTranslations = {
  title: 'Are you sure you want to delete this card?',
  delete_button: 'Delete',
  cancel_button: 'Cancel'
};

export interface DeleteConfirmationModalProps {
  translations?: DeletePopupTexts;
}

export const DeleteConfirmationModal = ({
  translations
}: DeleteConfirmationModalProps) => {
  const [error, setError] = useState<string | null>(null);
  const { cards, deletion } = useAppSelector((state) => state.savedCard);
  const dispatch = useAppDispatch();

  const [deleteCard, { isLoading }] = useDeleteSavedCardMutation();

  const handleClose = () => {
    dispatch(setDeletionModalId(null));
    dispatch(setDeletionModalVisible(false));
    setError(null);
  };

  const handleDelete = async () => {
    try {
      await deleteCard(deletion.id).unwrap();
      dispatch(setCards(cards.filter((card) => card.id !== deletion.id)));
      handleClose();
    } catch (error) {
      setError(error.data.detail);
    }
  };

  return (
    <Modal
      portalId="saved-card-remove-card-modal"
      className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
      open={deletion.isModalVisible}
      setOpen={() => dispatch(setDeletionModalVisible(false))}
    >
      <div className="px-6">
        <h3 className="text-center mt-4 text-lg">
          {translations?.title ?? defaultTranslations.title}
        </h3>
        <div className="flex flex-col gap-3 p-5 w-3/4 m-auto">
          <Button className="py-3 h-auto" onClick={handleDelete}>
            {isLoading ? (
              <LoaderSpinner className="w-4 h-4" />
            ) : (
              translations?.delete_button ?? defaultTranslations.delete_button
            )}
          </Button>
          <Button
            appearance="outlined"
            className="underline px-5 py-3 h-auto"
            onClick={handleClose}
          >
            {translations?.cancel_button ?? defaultTranslations.cancel_button}
          </Button>
          {error && <p className="text-error text-xs text-center">{error}</p>}
        </div>
      </div>
    </Modal>
  );
};