import React from 'react';
import { AlignTargetContainer } from '../Creator/Containers';
import { withStyles } from '@material-ui/core/styles';
import { useSelector } from 'react-redux';

const styles = theme => ({
    root: {
        marginTop: 36,
        //maxHeight: 'calc(75% - 46px)',
        [theme.breakpoints.down('xs')]: {
            maxHeight: 'calc(100% - 270px)',
        },
        [theme.breakpoints.up('sm')]: {
            maxHeight: 'calc(100% - 58px)',
            [theme.orientation.portrait]: {
                maxHeight: 'calc(100% - 260px)',
            },
        },
        [theme.breakpoints.up(theme.creator.viewSelectBreakpoint)]: {
            marginTop: 0,
        },
        [theme.breakpoints.between(theme.creator.viewSelectBreakpoint, 'lg')]: {
            maxHeight: 'calc(100% - 152px)',
        },
        [theme.breakpoints.up('lg')]: {
            maxHeight: 'calc(100% - 154px)',
        },
        '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)': {
            maxHeight: '100%',
        },
        '&.withDesignViews': {
            [theme.breakpoints.up('sm')]: {
                maxHeight: 'calc(100% - 136px)',
                [theme.orientation.portrait]: {
                    maxHeight: 'calc(100% - 260px)',
                },
            },
            [theme.breakpoints.between(theme.creator.viewSelectBreakpoint, 'lg')]: {
                maxHeight: 'calc(100% - 156px)',
            },
            [theme.breakpoints.up('lg')]: {
                maxHeight: 'calc(100% - 196px)',
            },
        },
    },
});

const StyledAlignTargetContainer = withStyles(styles, { name: 'CreatorAlignTarget' })(AlignTargetContainer);

export const CreatorAlignTarget = props => {
    const className = useSelector(state => state.designView?.designViews.length > 1) && 'withDesignViews';
    return <StyledAlignTargetContainer className={className} {...props} />;
};
