import React from 'react';
import FullScreenView from 'App/Screens/Configurator/Components/FullScreenView';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
    viewsContainer: {
        [theme.orientation.landscape]: {
            height: 136,
        },
    },
    thumbnailGrid: {
        bottom: -16,
        [theme.breakpoints.up('sm')]: {
            minHeight: 136,
        },
        [theme.breakpoints.up('md')]: {
            bottom: 0,
            [theme.orientation.portrait]: {
                width: '25%',
            },
        },
        [theme.orientation.landscape]: {
            height: 136,
        },
        '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)': {
            width: '100%',
            maxWidth: '100%',
            position: 'absolute',
            bottom: 0,
            height: 60,
            minHeight: 60,
        },
    },
    button: {
        [theme.orientation.landscape]: {
            [theme.breakpoints.down('sm')]: {
                left: '50%',
            },
        },
    },
    buttonTop: {
        [theme.breakpoints.up('sm')]: {
            display: 'none',
        },
    },
    buttonBottom: {
        [theme.breakpoints.down('xs')]: {
            display: 'none',
        },
    },
});

const DesignerFullScreenView = props => <FullScreenView {...props} />;

export default withStyles(styles, { name: 'DesignerFullScreenView' })(DesignerFullScreenView);
