"use client";
import clsx from "clsx";
import { AnimatePresence, motion } from "framer-motion";
import { confirmStore } from "./store";
import { useConfirmQueue } from "./useConfirm";

export function ConfirmHost() {
    const {queue} = useConfirmQueue();

    const current = queue[0];

    //   if (!current) return null;

    const close = (result: boolean) => {
        current.resolve(result);

        confirmStore.setState({
            queue: queue.slice(1),
        });
    };

    return (
        <AnimatePresence>
            {current && <motion.div
                layout
                initial={{ opacity: 0, }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                className="fixed z-1000 flex justify-center items-center bg-black/50 inset-0"
                onClick={(e) => e.stopPropagation()}
            >
                <div className="relative w-80 px-3 pb-6 pt-4 bg-white rounded-xl">
                    <div className={clsx("text-center text-ly-16 font-bold mb-3", !current.title && 'text-white')}>
                        {current.title ? current.title : 'notice'}
                    </div>
                    {Array.isArray(current.content) ? 
                        current.content.map((txt,i) => {
                            return <p key={i} className="text-ly-16 leading-5 text-center">
                                {txt}
                            </p>
                        })
                    : 
                        <p className="text-ly-16 leading-5 text-center">{current.content}</p>

                    }
                    
                    <div className="w-full flex justify-center flex-wrap gap-4 mt-4">
                        {!current.noOk && <button type="button" 
                            className="grow shrink basis-auto min-w-[calc(50%_-_0.5rem)] box-border h-12 border-1 flex justify-center items-center rounded-3xl text-ly-16" 
                            onClick={() => close(true)}
                        >
                            {current.okBtnTxt ? current.okBtnTxt : 'Yes'}
                        </button>}
                        {!current.noCancel && <button type="button" 
                            className="grow shrink basis-auto min-w-[calc(50%_-_0.5rem)] h-12 flex justify-center items-center rounded-3xl bg-ly-middlegreen text-ly-16 text-white" 
                            onClick={() => close(false)}
                        >
                            {current.cancelBtnTxt ? current.cancelBtnTxt : 'Cancel'}
                        </button>}
                    </div>
                    {!current.noCancel &&
                        <button type="button" className="absolute top-4 right-4 h-6 w-6" onClick={() => close(false)}>
                            <svg className="block w-full h-full" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none"><path    stroke="rgba(0, 0, 0, 1)" strokeWidth="1.2" strokeLinejoin="round" strokeLinecap="round"  d="M7 7L17 17"></path><path    stroke="rgba(0, 0, 0, 1)" strokeWidth="1.2" strokeLinejoin="round" strokeLinecap="round"  d="M7 17L17 7"></path></svg>
                        </button>
                    }
                </div>
            </motion.div>}
        </AnimatePresence>
    );
}