import { Fragment, memo } from 'react';

import { Icon, IconifyIcon } from '@iconify/react';

import closeIcon from '@/assets/iconify/single-color/close.svg';
import { useResponsive } from '@/hooks/useSize';
import { dialogModel } from '@/models/dialogModel';

import { useAction } from './useAction';

export interface DialogButton {
    label: string;
    onClick?: (event: React.MouseEvent<HTMLButtonElement>, dialogId: string) => void;
    variant?: 'primary' | 'secondary';
}

export interface DialogProps {
    open: boolean;
    id: string;
    icon?: string | IconifyIcon;
    title: React.ReactNode;
    content: React.ReactNode;
    buttons?: DialogButton[];
    zIndex: number;
    maskClosable?: boolean;
    closeable?: boolean;
}

const Dialog = memo(
    ({
        open,
        id,
        icon,
        title,
        content,
        buttons,
        zIndex,
        maskClosable = true,
        closeable = false,
    }: DialogProps) => {
        const { isMobile } = useResponsive();
        const { closeDialog } = dialogModel.useModel();
        const { handleOverlayClick, handleButtonClick } = useAction({
            id,
            closeDialog,
            maskClosable,
        });

        if (!open) {
            return null;
        }

        const renderIcon = () => {
            if (!icon) return null;
            return <Icon icon={icon} className="w-10 h-10 flex-shrink-0 text-white" />;
        };

        return (
            <Fragment>
                <div
                    className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center p-4"
                    style={{ zIndex }}
                    onClick={handleOverlayClick}
                >
                    <div
                        className={`bg-[#272A33] flex flex-col max-w-full [&_button]:select-none ${
                            isMobile
                                ? 'w-[328px] rounded-2xl shadow-[0px_8px_36px_0px_rgba(0,0,0,0.16)] pt-2'
                                : 'w-[544px] rounded-xl shadow-[0px_8px_8px_-4px_rgba(16,24,40,0.04),0px_20px_24px_-4px_rgba(16,24,40,0.1)]'
                        }`}
                        onClick={(e) => e.stopPropagation()}
                    >
                        <div
                            className={`relative flex flex-col ${isMobile ? 'gap-2.5 p-[10px_24px]' : 'gap-5 p-6'}`}
                        >
                            {isMobile ? (
                                <>
                                    {icon && (
                                        <div className="flex justify-start">{renderIcon()}</div>
                                    )}
                                    {title && (
                                        <h2 className="text-white text-[22px] leading-[1.27] font-[510] text-start">
                                            {title}
                                        </h2>
                                    )}
                                    {closeable && (
                                        <div className="absolute top-[12px] left-0 right-0 h-6 px-6 flex justify-end">
                                            <button
                                                type="button"
                                                onClick={() => closeDialog(id)}
                                                className="p-0 rounded-lg bg-transparent border-none text-white outline-none focus:outline-none focus:bg-transparent active:bg-transparent hover:text-[#0EA5E9]/80 active:text-[#0EA5E9]/60 [-webkit-tap-highlight-color:transparent] transition-colors"
                                                aria-label="Close menu"
                                            >
                                                <Icon icon={closeIcon} className="w-6 h-6" />
                                            </button>
                                        </div>
                                    )}
                                    {content && (
                                        <div className="text-white px-0 py-2 text-sm leading-[1.43] text-start">
                                            {content}
                                        </div>
                                    )}
                                </>
                            ) : (
                                <>
                                    {(icon || title) && (
                                        <div className="flex items-center gap-[14px]">
                                            {renderIcon()}
                                            {title && (
                                                <h2 className="flex-1 text-white text-2xl leading-[1.17] font-semibold">
                                                    {title}
                                                </h2>
                                            )}
                                        </div>
                                    )}
                                    {closeable && (
                                        <div className="absolute top-[26px] left-0 right-0 h-6 px-6 flex justify-end">
                                            <button
                                                type="button"
                                                onClick={() => closeDialog(id)}
                                                className="p-0 rounded-lg bg-transparent border-none text-white outline-none focus:outline-none focus:bg-transparent active:bg-transparent hover:text-[#0EA5E9]/80 active:text-[#0EA5E9]/60 [-webkit-tap-highlight-color:transparent] transition-colors"
                                                aria-label="Close menu"
                                            >
                                                <Icon icon={closeIcon} className="w-6 h-6" />
                                            </button>
                                        </div>
                                    )}
                                    {content && (
                                        <div className="text-white text-sm leading-[1.43]">
                                            {content}
                                        </div>
                                    )}
                                </>
                            )}
                        </div>
                        {buttons && buttons.length > 0 && (
                            <div
                                className={`flex ${
                                    buttons.length === 1 ? 'flex-col' : 'flex-row'
                                } ${isMobile ? 'gap-2.5 px-6 pt-4 pb-6' : 'gap-6 p-6'}`}
                            >
                                {buttons.map((button, index) => (
                                    <button
                                        key={index}
                                        type="button"
                                        onClick={(e) => handleButtonClick(button, e, id)}
                                        className={`flex-1 rounded-lg flex items-center justify-center gap-2.5 px-5 ${
                                            isMobile ? 'h-[42px] py-2.5' : 'h-11 py-3.5'
                                        } ${
                                            button.variant === 'secondary'
                                                ? 'bg-[#1C1E25] text-[#646776]'
                                                : 'bg-[#0EA5E9] text-[#F5F5F5]'
                                        } text-sm leading-[1.21] font-medium`}
                                    >
                                        {button.label}
                                    </button>
                                ))}
                            </div>
                        )}
                    </div>
                </div>
            </Fragment>
        );
    }
);

Dialog.displayName = 'Dialog';

export default Dialog;
