import React, { Fragment, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { useTheme } from '@material-ui/core/styles';
import DialogContent from '@material-ui/core/DialogContent';
import DialogActions from '@material-ui/core/DialogActions';
import Typography from '@material-ui/core/Typography';
import MainButton from 'Shared/Components/MainButton';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Divider from '@material-ui/core/Divider';
import { T } from 'Framework/i18n';
import CustomDialog from '../../../../Shared/Components/CustomDialog';

const useStyles = makeStyles(
    theme => ({
        root: {
            borderTop: `7px solid ${theme.palette.primary.main}`,
        },
        contentRoot: {
            padding: theme.spacing(2),
        },
        actionsRoot: {
            margin: 0,
            padding: theme.spacing(1),
        },
    }),
    { name: 'InvalidConfigurationNotice' }
);

const InvalidConfigurationNotice = ({ validationErrors, show, close, open, adminMode }) => {
    const theme = useTheme();
    const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
    const classes = useStyles();
    const initialRender = useRef(true);
    useEffect(() => {
        if (adminMode || !initialRender.current) {
            validationErrors.length && open();
        } else {
            initialRender.current = false;
        }
    }, [open, validationErrors, adminMode, initialRender]);

    return (
        <CustomDialog
            fullScreen={fullScreen}
            classes={{ paper: classes.root }}
            open={show}
            onClose={close}
            onCancel={close}
            dialogTitle={T('invalidConfigurationNotice.title')}
        >
            <DialogContent className={classes.contentRoot}>
                <List>
                    {validationErrors.map(({ title, errors }, index) => (
                        <Fragment key={index}>
                            {index !== 0 && <Divider />}
                            <ListItem>
                                <ListItemText
                                    primary={
                                        <Typography component={'span'} variant={'h6'}>
                                            {title}
                                        </Typography>
                                    }
                                    secondary={
                                        <List>
                                            {errors.map((error, index) => (
                                                <Typography component={'span'} key={index}>
                                                    {T(
                                                        `invalidConfigurationNotice.errorTypes.${error.message}`,
                                                        {
                                                            ...(error.amounts && {
                                                                minimumAmount: error.amounts.minAmount,
                                                                selectedAmount: error.amounts.selectedAmount,
                                                            }),
                                                        }
                                                    )}
                                                </Typography>
                                            ))}
                                        </List>
                                    }
                                    secondaryTypographyProps={{ component: 'span' }}
                                />
                            </ListItem>
                        </Fragment>
                    ))}
                </List>
            </DialogContent>
            <DialogActions>
                <MainButton onClick={close} variant="contained">
                    OK
                </MainButton>
            </DialogActions>
        </CustomDialog>
    );
};

InvalidConfigurationNotice.propTypes = {
    show: PropTypes.bool.isRequired,
    validationErrors: PropTypes.arrayOf(
        PropTypes.shape({
            title: PropTypes.string,
            errors: PropTypes.arrayOf(PropTypes.shape({ message: PropTypes.string })),
        })
    ),
    close: PropTypes.func.isRequired,
    open: PropTypes.func.isRequired,
};

export default InvalidConfigurationNotice;
