import React from 'react';
import Tooltip from '@material-ui/core/Tooltip';
import { withStyles } from '@material-ui/core/styles';
import withWidth from '@material-ui/core/withWidth';
import { t } from 'Framework/i18n';
import PropTypes from 'prop-types';
import ErrorIcon from '@material-ui/icons/Error';
import Typography from '@material-ui/core/Typography';
import Link from '@material-ui/core/Link';

const styles = () => ({
    root: {
        position: 'absolute',
        width: '100%',
        top: 145,
    },
    noticeContainer: {
        display: 'flex',
        justifyContent: 'center',
    },
    notice: {
        maxWidth: '90vw',
        backgroundColor: 'rgb(253, 236, 234)',
        color: 'rgb(97, 26, 21)',
        display: 'flex',
        padding: 12,
        zIndex: 2,
        borderRadius: 4,
    },
    icon: {
        paddingRight: 8,
    },
    tooltip: {
        backgroundColor: 'rgb(253, 236, 234)',
        color: 'rgb(97, 26, 21)',
    },
});

class LicenseNotice extends React.Component {
    render() {
        const { mobileOffset, width, classes, displayMissingLicenseNotice } = this.props;

        if (!displayMissingLicenseNotice) {
            return null;
        }

        return (
            <div
                className={classes.root}
                style={{ top: (width === 'xs' || width === 'sm') && mobileOffset ? mobileOffset : 145 }}
            >
                <div className={classes.noticeContainer}>
                    <div className={classes.notice}>
                        <Typography>
                            {t('licenseNotice.message')} -{' '}
                            <Link
                                href={t('licenseNotice.buyLicenseLink')}
                                rel="noopener noreferrer"
                                target="_blank"
                            >
                                {t('licenseNotice.linkText')}
                            </Link>
                        </Typography>
                        <Tooltip
                            classes={{
                                tooltip: classes.tooltip,
                            }}
                            interactive={true}
                            title={
                                <>
                                    <Typography>
                                        <Link
                                            href={t('licenseNotice.licenseInfoLink')}
                                            rel="noopener noreferrer"
                                            target="_blank"
                                        >
                                            {t('licenseNotice.viewLicense')}
                                        </Link>
                                    </Typography>
                                </>
                            }
                        >
                            <ErrorIcon className={classes.icon} />
                        </Tooltip>
                    </div>
                </div>
            </div>
        );
    }
}

LicenseNotice.propTypes = {
    classes: PropTypes.object.isRequired,
    displayMissingLicenseNotice: PropTypes.bool.isRequired,
    width: PropTypes.string,
    mobileOffset: PropTypes.number,
};

LicenseNotice.defaultProps = {
    displayMissingLicenseNotice: false,
};

export default withWidth({ initialWidth: 'lg' })(
    withStyles(styles, { name: 'LicenseNotice' })(LicenseNotice)
);
