import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Icon from '@material-ui/core/Icon';
import { t } from 'Framework/i18n';
import Typography from '@material-ui/core/Typography';
import PropTypes from 'prop-types';

const styles = () => ({
    LandscapeFullscreen: {
        display: 'none',
    },
    '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)': {
        LandscapeFullscreen: {
            display: 'flex',
            position: 'absolute',
            top: 25,
            width: '100%',
            zIndex: 6,
            margin: '-8px',
        },
        ContentWrapper: {
            display: 'flex',
            backgroundColor: 'rgba(255,255,255,0.8)',
            alignItems: 'center',
            margin: '0 auto',
            padding: '0 8px',

            '& span': {
                display: 'block',
            },
        },
        iconRotate: {
            fontSize: 28,
            margin: 8,
        },
    },
});

const LandscapeInformation = ({ classes }) => (
    <div className={classes.LandscapeFullscreen}>
        <div className={classes.ContentWrapper}>
            <Icon className={classes.iconRotate}>screen_rotation</Icon>
            <Typography variant="body1">{t('rotationInstructions')}</Typography>
        </div>
    </div>
);

LandscapeInformation.propTypes = {
    classes: PropTypes.object,
};
export default withStyles(styles, { name: 'LandscapeInformation' })(LandscapeInformation);
