import React from 'react';
import FullScreenView, { PreviewButton } from 'App/Screens/Configurator/Components/FullScreenView';
import { makeStyles } from '@material-ui/core/styles';
import { useTheme } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { combineMediaQueriesWithAnd } from '../../../../../Utils/Styles/combineMediaQueries';

export const useStyles = makeStyles(
    theme => ({
        viewsContainer: {
            width: '100%',
            '@media (max-height: 650px)': {
                bottom: 0,
            },
        },
        button: {
            [theme.breakpoints.down('sm')]: {
                bottom: 'auto',
            },
        },
        thumbnailGrid: {
            width: '100%',
            maxWidth: '100%',
            left: 0,

            [theme.breakpoints.up('md')]: {
                width: '25%',
                left: '50%',
            },
            [theme.breakpoints.up(theme.creator.viewSelectBreakpoint)]: {
                height: 136, // same as the checkout box
            },
            [theme.breakpoints.down(theme.creator.viewSelectBreakpoint)]: {
                maxWidth: '100%',
                marginBottom: 0,
            },
            [theme.breakpoints.up('lg')]: {
                width: 450,
            },
            [combineMediaQueriesWithAnd(theme.orientation.portrait, theme.breakpoints.down('md'))]: {
                maxWidth: '100%',
                width: '100%',
            },
            // styles for ipad pro
            [combineMediaQueriesWithAnd(theme.orientation.portrait, theme.breakpoints.up('md'))]: {
                bottom: 20,
            },
            [theme.orientation.portrait]: {
                maxWidth: '100%',
                width: '100%',
            },
            [theme.breakpoints.down('xs')]: {
                maxWidth: '100%',
            },
        },
    }),
    { name: 'CreatorFullScreenView' }
);

export default props => {
    const { thumbnailDots, ...classes } = useStyles(props);
    const theme = useTheme();
    const renderButtonOnTop = useMediaQuery(`(max-width : ${theme.creator.viewSelectBreakpoint}px)`);

    return (
        <FullScreenView
            classes={classes}
            renderButtonOnTop={renderButtonOnTop}
            renderTopPreviewButton={({ width, ...props }) =>
                (width === 'xs' || renderButtonOnTop) && <PreviewButton {...props} />
            }
            thumbnailProps={{
                classes: {
                    dots: thumbnailDots,
                },
            }}
            {...props}
        />
    );
};
