import React, { useEffect, useState } from 'react';
import { createGlobalStyle } from 'styled-components/macro';
import {
    Dialog as BaseDialog,
    DialogContext,
    IconPosition,
    RenderDialogProps,
} from '@/components/elements/dialog';
import tw from 'twin.macro';

interface DatabaseDialogProps extends RenderDialogProps {
    inline?: boolean;
}

const WideDialogStyles = createGlobalStyle`
    body.betterdatabases-wide-dialog [class*='panel'] {
        width: 95vw !important;
        max-width: 72rem !important;
    }
`;

const DatabaseDialog = (props: DatabaseDialogProps) => {
    const [icon, setIcon] = useState<React.ReactNode>();
    const [footer, setFooter] = useState<React.ReactNode>();
    const [iconPosition, setIconPosition] = useState<IconPosition>('title');

    useEffect(() => {
        if (!props.open || props.inline) {
            return;
        }

        document.body.classList.add('betterdatabases-wide-dialog');

        return () => {
            document.body.classList.remove('betterdatabases-wide-dialog');
        };
    }, [props.open, props.inline]);

    if (props.inline) {
        if (!props.open) {
            return null;
        }

        return (
            <DialogContext.Provider value={{ setIcon, setFooter, setIconPosition }}>
                <div css={tw`space-y-4`}>
                    {(props.title || icon) && (
                        <div css={tw`flex items-center`}>
                            {iconPosition !== 'container' && icon}
                            <div css={tw`min-w-0`}>
                                {props.title && (
                                    <h2 css={tw`truncate font-header text-xl font-medium text-neutral-50`}>
                                        {props.title}
                                    </h2>
                                )}
                                {props.description && <p css={tw`mt-1 text-sm text-neutral-400`}>{props.description}</p>}
                            </div>
                        </div>
                    )}
                    {props.children}
                </div>
            </DialogContext.Provider>
        );
    }

    return (
        <>
            <WideDialogStyles />
            <BaseDialog {...props} />
        </>
    );
};

const Dialog = Object.assign(DatabaseDialog, {
    Footer: BaseDialog.Footer,
    Icon: BaseDialog.Icon,
    Confirm: BaseDialog.Confirm,
});

export default Dialog;