/* eslint-disable lines-around-comment */
import { makeStyles, createStyles } from '@material-ui/core';
import React, { useCallback } from 'react';
import { useStore } from 'react-redux';

// @ts-ignore
import { translate } from '../../base/i18n';
import { Theme } from '../../base/ui/types';
// @ts-ignore
import { setSeeWhatIsBeingShared } from '../actions.web';

const useStyles = makeStyles((theme: Theme) => createStyles({
    overlayContainer: {
        width: '100%',
        height: '100%',
        backgroundColor: theme.palette.ui02,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute'
    },
    content: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center'
    },
    laptop: {
        width: '88px',
        height: '56px',
        boxSizing: 'border-box',
        border: '3px solid',
        borderColor: theme.palette.text01,
        borderRadius: '6px'
    },
    laptopStand: {
        width: '40px',
        height: '4px',
        backgroundColor: theme.palette.text01,
        boxSizing: 'border-box',
        borderRadius: '6px',
        marginTop: '4px'
    },
    sharingMessage: {
        fontStyle: 'normal',
        fontWeight: 600,
        fontSize: '20px',
        lineHeight: '28px',
        marginTop: '24px',
        letterSpacing: '-0.012em',
        color: theme.palette.text01
    },
    showSharing: {
        fontStyle: 'normal',
        fontWeight: 600,
        fontSize: '14px',
        lineHeight: '20px',
        height: '20px',
        marginTop: '16px',
        color: theme.palette.link01,
        cursor: 'pointer',

        '&:hover': {
            color: theme.palette.link01Hover
        }
    }
}));

/**
 * Component that displays a placehoder for when the screen is shared.
 * * @param {Function} t - Function which translate strings.
 *
 * @returns {ReactElement}
 */
const ScreenSharePlaceholder: React.FC<{ t: Function }> = ({ t }) => {
    const classes = useStyles();
    const store = useStore();


    const updateShowMeWhatImSharing = useCallback(() => {
        store.dispatch(setSeeWhatIsBeingShared(true));
    }, []);

    return (
        <div className = { classes.overlayContainer }>
            <div className = { classes.content }>
                <div className = { classes.laptop } />
                <div className = { classes.laptopStand } />
                <span className = { classes.sharingMessage }>{ t('largeVideo.screenIsShared') }</span>
                <span
                    className = { classes.showSharing }
                    onClick = { updateShowMeWhatImSharing }
                    role = 'button'>{ t('largeVideo.showMeWhatImSharing') }</span>
            </div>
        </div>
    );
};

export default translate(ScreenSharePlaceholder);