import React from 'react';
import {
    DialogContent,
    IconButton,
    SvgIcon
} from '@mui/material';
import {
    ModalActions,
    ModalContainer,
    ModalPaper,
    ModalRoot,
    ModalRootBackdrop,
    ModalTitle,
    ModalTitleCaption
} from './style';

type SizeProp =
    'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | string | number;

type Size = {
    min?: SizeProp,
    max?: SizeProp,
    set?: SizeProp,
}

type ScrollProp =
    'hidden' | 'x' | 'y' | 'auto';

interface DialogProps {
    className?: string;
    unclosable?: boolean,
    open: boolean;
    caption: string;
    width?: Size,
    height?: Size,
    padding?: string | number,
    scroll?: ScrollProp,
    actions?: JSX.Element;
    onClose?: () => void;
    children?: React.ReactNode | React.ReactNode[] | any
}

export const Dialog: React.FC<DialogProps> = ({ className, unclosable, open, width, height, scroll, padding, caption, children, actions, onClose }) => {
    const handleClose = () => {
        if (onClose) {
            onClose();
        }
    }
    const scrollToCSS = (scroll?: ScrollProp) => {
        switch (scroll) {
            case 'x':
                return {
                    overflowX: 'auto' as any,
                    overflowY: 'hidden' as any
                }
            case 'y':
                return {
                    overflowX: 'hidden' as any,
                    overflowY: 'auto' as any
                }
            case 'auto':
                return {
                    overflowX: 'auto' as any,
                    overflowY: 'auto' as any
                }
            default:
                return {
                    overflowX: 'hidden' as any,
                    overflowY: 'hidden' as any
                }
        }
    }
    const sizeToCSS = (size?: SizeProp) => {
        return size
            ? size === 'xxl'
                ? '2048px'
                : size === 'xl'
                    ? '1536px'
                    : size === 'l'
                        ? '1024px'
                        : size === 'm'
                            ? '800px'
                            : size === 's'
                                ? '600px'
                                : size === 'xs'
                                    ? '400px'
                                    : size === 'xxs'
                                        ? '200px'
                                        : size
            : 'unset'
    }
    const getPaperStyle = (width?: Size, height?: Size, scroll?: ScrollProp) => {
        return {
            width: width ? sizeToCSS(width.set) : 'unset',
            minWidth: width ? sizeToCSS(width.min) : 'unset',
            maxWidth: width ? sizeToCSS(width.max) : 'unset',
            height: height ? sizeToCSS(height.set) : 'unset',
            minHeight: height ? sizeToCSS(height.min) : 'unset',
            maxHeight: height ? sizeToCSS(height.max) : 'unset',
            overflow: 'hidden'
        }
    }

    return (
        <>
            {
                open &&
                <ModalRoot role="presentation" className={className}>
                    <ModalRootBackdrop />
                    <ModalContainer role="none presentation" tabIndex={-1}>
                        <ModalPaper elevation={24} role="dialog" style={getPaperStyle(width, height)}>
                            <ModalTitle id="modal-title">
                                <ModalTitleCaption variant="button">
                                    {caption}
                                </ModalTitleCaption>
                                <span className="spacer" />
                                {
                                    !unclosable &&
                                    <IconButton
                                        style={{ padding: '2px', marginRight: '-20px' }}
                                        color="inherit"
                                        onClick={handleClose}>
                                        <CloseIcon />
                                    </IconButton>
                                }
                            </ModalTitle>
                            <DialogContent dividers={true} style={{ padding, minWidth: '352px', minHeight: '160px', position: 'relative', ...scrollToCSS(scroll) }}>
                                {children}
                            </DialogContent>
                            {
                                !!actions &&
                                <ModalActions>
                                    {actions}
                                </ModalActions>
                            }
                        </ModalPaper>
                    </ModalContainer>
                </ModalRoot>
            }
        </>
    );
}

const CloseIcon = () => (
    <SvgIcon fontSize="small" color="primary" width="24" height="24" overflow="hidden" viewBox="0 0 24 24">
        <g>
            <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
        </g>
    </SvgIcon>
)