import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import withWidth from '@material-ui/core/withWidth';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import Icon from '@material-ui/core/Icon';
import IconButton from '@material-ui/core/IconButton';
import AutoFocusDialogContentContainer from '../../App/Shared/Components/AutoFocusDialogContentContainer/AutoFocusDialogContentContainer';
import { useDialogId } from '../../App/Shared/Hooks/useDialogId';

export const customDialogStyle = theme => {
    const {
        smallScreen = {
            centeredDialogPadding: 0,
        },
    } = theme;
    return {
        MuiDialogBorder: {
            borderTop: '7px solid ' + theme.palette.primary.main,
        },
        MuiStyledDialog: {
            '& .MuiDialog-container': {
                '& .MuiDialog-paperWidthMd': {
                    maxWidth: 720,
                },
                '& .MuiDialogTitle-root': {
                    paddingTop: theme.spacing(2),
                    paddingBottom: theme.spacing(2),
                    '& .MuiTypography-root': {
                        fontSize: 24,
                        fontWeight: 'bold',
                        letterSpacing: 'normal',
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                    },
                },
                '& .MuiDialogActions-root': {
                    paddingBottom: 24,

                    '& .MuiButton-root': {
                        height: 40,
                        textTransform: 'none',
                        minWidth: 140,
                    },
                },
                '& .MuiDialogTitle-root, .MuiDialogContent-root, .MuiDialogActions-root': {
                    paddingLeft: smallScreen.centeredDialogPadding,
                    paddingRight: smallScreen.centeredDialogPadding,
                    '& p': {
                        fontSize: 15,
                        letterSpacing: 'normal',
                    },
                },
            },
        },
    };
};

const customDialogHeaderStyle = theme => ({
    closeButton: {
        marginLeft: 'auto',
        marginRight: theme.spacing(1),
        marginTop: theme.spacing(1),
    },
    dialogHeader: {
        display: 'flex',
        alignItems: 'start',
    },
    dialogTitle: {
        flex: 1,
    },
});

export const CustomDialogHeader = withStyles(customDialogHeaderStyle, { name: 'CustomDialogHeader' })(
    ({ classes, dialogTitle, dialogTitleId, onClose, children }) => (
        <div className={classes.dialogHeader}>
            <DialogTitle className={classes.dialogTitle} id={dialogTitleId}>
                {dialogTitle}
            </DialogTitle>
            {children}
            <IconButton onClick={onClose} className={classes.closeButton}>
                <CustomDialogHeader.IconComponent />
            </IconButton>
        </div>
    )
);
CustomDialogHeader.IconComponent = function CloseIcon() {
    return <Icon>close</Icon>;
};

export const CustomDialog = withWidth({ initialWidth: 'xl' })(
    withStyles(customDialogStyle, { name: 'CustomDialog' })(
        ({ className, classes, width, dialogTitle, onCancel, children, fullScreen, ...props }) => {
            const { open } = props;
            const { dialogTitleId } = useDialogId();
            return (
                <Dialog
                    maxWidth={width === 'md' || width === 'lg' || width === 'xl' ? 'md' : 'sm'}
                    fullWidth={true}
                    classes={{
                        paper: classes.MuiDialogBorder,
                        root: classes.MuiStyledDialog,
                    }}
                    className={className + ' ' + (width === 'xs' ? classes.stickyDialog : '')}
                    fullScreen={fullScreen}
                    aria-labelledby={dialogTitleId}
                    {...props}
                >
                    <CustomDialog.DialogHeaderComponent
                        dialogTitle={dialogTitle}
                        dialogTitleId={dialogTitleId}
                        onClose={onCancel}
                    />
                    <AutoFocusDialogContentContainer open={open}>{children}</AutoFocusDialogContentContainer>
                </Dialog>
            );
        }
    )
);

CustomDialog.DialogHeaderComponent = CustomDialogHeader;

export default CustomDialog;
