import { Dispatch, SetStateAction } from 'react';
import { Box } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import CloseIcon from '@material-ui/icons/Close';
import IconButton from '@material-ui/core/IconButton';
import VncDisplay from 'react-vnc-display';
import { Panel } from '../Panels';
import { RED, TEXT } from '../../lib/consts/DEFAULT_THEME';

const useStyles = makeStyles(() => ({
  displayBox: {
    paddingTop: '1em',
    paddingBottom: 0,
  },
  closeButton: {
    borderRadius: 8,
    backgroundColor: RED,
    '&:hover': {
      backgroundColor: RED,
    },
  },
  closeBox: {
    paddingLeft: '.7em',
    paddingRight: 0,
  },
}));

interface PreviewProps {
  setMode: Dispatch<SetStateAction<boolean>>;
}

const FullSize = ({ setMode }: PreviewProps): JSX.Element => {
  const classes = useStyles();

  return (
    <Panel>
      <Box display="flex" className={classes.displayBox}>
        <Box>
          <VncDisplay
            url="wss://spain.cdot.systems:5000/"
            style={{
              width: '75vw',
              height: '80vh',
            }}
          />
        </Box>
        <Box className={classes.closeBox}>
          <IconButton
            className={classes.closeButton}
            style={{ color: TEXT }}
            aria-label="upload picture"
            component="span"
            onClick={() => setMode(true)}
          >
            <CloseIcon />
          </IconButton>
        </Box>
      </Box>
    </Panel>
  );
};

export default FullSize;