import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import Popper from '@material-ui/core/Popper';
import Icon from '@material-ui/core/Icon';
import Typography from '@material-ui/core/Typography';
import withWidth from '@material-ui/core/withWidth';
const textShadow = '0px 0px 4px rgba(255, 255, 255, 0.8)';

const useStyles = makeStyles(
    theme => ({
        '@keyframes left': {
            '0%': { transform: 'translateX(0)' },
            '50%': { transform: 'translateX(100%)' },
            '100%': { transform: 'translateX(0)' },
        },
        '@keyframes right': {
            '0%': { transform: 'translateX(0)' },
            '50%': { transform: 'translateX(-100%)' },
            '100%': { transform: 'translateX(0)' },
        },
        '@keyframes top': {
            '0%': { transform: 'translateY(0)' },
            '50%': { transform: 'translateY(100%)' },
            '100%': { transform: 'translateY(0)' },
        },
        '@keyframes bottom': {
            '0%': { transform: 'translateY(0)' },
            '50%': { transform: 'translateY(-100%)' },
            '100%': { transform: 'translateY(0)' },
        },
        popoverRoot: {
            [theme.breakpoints.down('xs')]: {
                display: 'none',
            },
        },
        container: {
            position: 'relative',
            display: 'flex',
            alignItems: 'center',
        },
        popper: {
            zIndex: 2,
        },
        topContainer: ({ offset, perpendicularOffset }) => ({
            top: -offset,
            right: perpendicularOffset,
            flexDirection: 'column-reverse',
        }),
        leftContainer: ({ offset, perpendicularOffset }) => ({
            right: offset,
            top: perpendicularOffset,
            flexDirection: 'row-reverse',
        }),
        bottomContainer: ({ offset, perpendicularOffset }) => ({
            bottom: -offset,
            right: perpendicularOffset,
            flexDirection: 'column',
        }),
        rightContainer: ({ offset, perpendicularOffset }) => ({
            top: perpendicularOffset,
            left: offset,
            flexDirection: 'row',
        }),
        animation: {
            animation: '$left 1s infinite',
            display: 'flex',
            alignItems: 'center',
            '&:before': {
                fontSize: '1.5em',
            },
        },
        topAnimation: {
            animationName: '$top',
        },
        rightAnimation: {
            animationName: '$right',
        },
        bottomAnimation: {
            animationName: '$bottom',
        },
        leftAnimation: {
            animationName: '$left',
        },
        icon: {
            margin: '0 5px',
            textShadow,
        },
        leftIcon: {
            transform: 'rotate(0deg)',
        },
        topIcon: {
            transform: 'rotate(90deg)',
        },
        rightIcon: {
            transform: 'rotate(180deg)',
        },
        bottomIcon: {
            transform: 'rotate(270deg)',
        },
        typography: {
            textAlign: 'center',
            whiteSpace: 'nowrap',
            [theme.breakpoints.down('xs')]: {
                fontSize: '1rem',
            },
        },
        hintText: {
            textShadow,
        },
    }),
    { name: 'CallToAction' }
);

const CallToAction = props => {
    const { anchorRef, offsetDirection, label, width, className } = props;

    const classes = useStyles(props);

    if (!anchorRef || width === 'xs') {
        return null;
    }

    return (
        <Popper className={classes.popper} open={true} anchorEl={anchorRef} placement={offsetDirection}>
            <div className={clsx(classes.container, classes[`${offsetDirection}Container`], className)}>
                <div className={clsx(classes.animation, classes[`${offsetDirection}Animation`])}>
                    <Icon className={clsx(classes.icon, classes[`${offsetDirection}Icon`])}>forward</Icon>
                </div>
                <Typography className={classes.hintText} variant="h5">
                    {label}
                </Typography>
            </div>
        </Popper>
    );
};

CallToAction.propTypes = {
    offsetDirection: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).isRequired,
    offset: PropTypes.number,
    perpendicularOffset: PropTypes.number,
    anchorRef: PropTypes.oneOfType([
        PropTypes.func,
        PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
    ]),
    label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
    width: PropTypes.string,
    className: PropTypes.string,
};

CallToAction.defaultProps = {
    offset: 100,
    perpendicularOffset: 0,
    className: '',
};

export default withWidth({ initialWidth: 'lg' })(CallToAction);
