import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';
import { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
import Swal from 'sweetalert2';
import IconX from '../../../components/Icon/IconX';
import IconTrashLines from '../../../components/Icon/IconTrashLines';
import IconLoader from '../../../components/Icon/IconLoader';
import { useDeleteProductColour } from '../api/deleteProductColour';

interface DeleteProductColourModalProps {
    isOpen: boolean;
    onClose: () => void;
    colourId: number;
}

export const DeleteProductColourModal = ({ isOpen, onClose, colourId }: DeleteProductColourModalProps) => {
    const { t } = useTranslation();

    const deleteColour = useDeleteProductColour({
        mutationConfig: {
            onSuccess: () => {
                Swal.fire({
                    icon: 'success',
                    title: t('Deleted!'),
                    text: t('Product colour deleted successfully'),
                });
                onClose();
            },
        },
    });

    const handleDelete = () => {
        deleteColour.mutate({ colourId });
    };

    return (
        <Transition appear show={isOpen} as={Fragment}>
            <Dialog as="div" open={isOpen} onClose={onClose} className="relative z-[51]">
                <TransitionChild as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
                    <div className="fixed inset-0 bg-[black]/60" />
                </TransitionChild>

                <div className="fixed inset-0 overflow-y-auto">
                    <div className="flex min-h-full items-center justify-center px-4 py-8">
                        <TransitionChild
                            as={Fragment}
                            enter="ease-out duration-300"
                            enterFrom="opacity-0 scale-95"
                            enterTo="opacity-100 scale-100"
                            leave="ease-in duration-200"
                            leaveFrom="opacity-100 scale-100"
                            leaveTo="opacity-0 scale-95"
                        >
                            <DialogPanel className="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
                                <button type="button" onClick={onClose} className="absolute top-4 right-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none">
                                    <IconX />
                                </button>

                                <div className="text-lg font-medium bg-[#fbfbfb] dark:bg-[#121c2c] px-5 py-3">{t('Delete Product Colour')}</div>

                                <div className="p-5 text-center">
                                    <div className="text-white bg-danger ring-4 ring-danger/30 p-4 rounded-full w-fit mx-auto">
                                        <IconTrashLines className="w-7 h-7 mx-auto" />
                                    </div>

                                    <div className="sm:w-3/4 mx-auto mt-5">{t('Are you sure you want to delete this product colour?')}</div>

                                    <div className="flex justify-center items-center mt-8">
                                        <button type="button" className="btn btn-outline-danger disabled:opacity-50" onClick={onClose} disabled={deleteColour.isPending}>
                                            {t('cancel')}
                                        </button>
                                        <button type="button" className="btn btn-primary ml-4 disabled:opacity-50" onClick={handleDelete} disabled={deleteColour.isPending}>
                                            {deleteColour.isPending ? <IconLoader className="animate-spin" /> : null}
                                            {t('delete')}
                                        </button>
                                    </div>
                                </div>
                            </DialogPanel>
                        </TransitionChild>
                    </div>
                </div>
            </Dialog>
        </Transition>
    );
};
