import { useState } from 'react';
import { FaTrash } from 'react-icons/fa';
import { createPortal } from 'react-dom';
import styles from './PromptItemDelete.module.css';
import { useAuthToken } from '../../../auth/Hooks/use-auth-token';
import { authorizedDelete } from '../../../api';

interface PromptItemDeleteProps {
    promptId: string;
    promptTitle: string;
    onDelete: (promptId: string) => Promise<void>;
}

export const PromptItemDelete: React.FC<PromptItemDeleteProps> = ({ promptId, promptTitle, onDelete }) => {
    const [showConfirmation, setShowConfirmation] = useState(false);
    const { getToken } = useAuthToken();

    const handleDeleteClick = () => {
        setShowConfirmation(true);
    };

    const handleConfirm = async () => {
        try {
            await authorizedDelete(`/api/user/prompts/${promptId}`, getToken);
            setShowConfirmation(false);
            await onDelete(promptId);
        } catch (error) {
            console.error('Error deleting prompt:', error);
        }
    };

    const handleCancel = () => {
        setShowConfirmation(false);
    };

    return (
        <>
            <button 
                className={styles.deleteButton} 
                title="Delete"
                onClick={handleDeleteClick}
            >
                <FaTrash />
            </button>

            {showConfirmation && createPortal(
                <div className={styles.modalOverlay}>
                    <div className={styles.modalContent}>
                        <h2>Delete Prompt</h2>
                        <p>Are you sure you want to delete the prompt:</p>
                        <p className={styles.deletePromptTitle}>{promptTitle}?</p>
                        <div className={styles.modalButtons}>
                            <button 
                                className={`${styles.modalButton} ${styles.cancelButton}`}
                                onClick={handleCancel}
                            >
                                Cancel
                            </button>
                            <button 
                                className={`${styles.modalButton} ${styles.confirmButton}`}
                                onClick={handleConfirm}
                            >
                                Delete
                            </button>
                        </div>
                    </div>
                </div>,
                document.body
            )}
        </>
    );
};

export default PromptItemDelete;