'use client'
import React, {useState} from "react";
import ToggleSwitch from "@/components/form/ToggleSwitch";
import AlertBox, {AlertType} from "@/components/AlertBox";

interface ToggleWithConfirmationProps {
    checked: boolean;
    onChange: (checked: boolean) => void;
    alertTitle: string;
    alertMessage: string;
    alertType: AlertType;
    confirmText?: string;
    cancelText?: string;
    disabled?: boolean;
}

export default function ToggleWithConfirmation({
    checked,
    onChange,
    alertTitle,
    alertMessage,
    alertType,
    confirmText = "Activer",
    cancelText = "Annuler",
    disabled = false
}: ToggleWithConfirmationProps) {
    const [showAlert, setShowAlert] = useState<boolean>(false);

    function handleToggle(newChecked: boolean): void {
        if (newChecked) {
            setShowAlert(true);
        } else {
            onChange(false);
        }
    }

    async function handleConfirm(): Promise<void> {
        onChange(true);
        setShowAlert(false);
    }

    function handleCancel(): void {
        setShowAlert(false);
    }

    return (
        <>
            <ToggleSwitch checked={checked} onChange={handleToggle} disabled={disabled}/>

            {showAlert && (
                <AlertBox
                    title={alertTitle}
                    message={alertMessage}
                    type={alertType}
                    confirmText={confirmText}
                    cancelText={cancelText}
                    onConfirm={handleConfirm}
                    onCancel={handleCancel}
                />
            )}
        </>
    );
}