import classNames from 'classnames';
import PropTypes from 'prop-types';
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import spring from 'react-motion/lib/spring';

import { Icon, Stack, Text } from 'soapbox/components/ui';

import Motion from '../../ui/util/optional_motion';

const UploadArea = ({ active, onClose }) => {
  const handleKeyUp = (e) => {
    const keyCode = e.keyCode;

    if (active) {
      switch(keyCode) {
      case 27:
        e.preventDefault();
        e.stopPropagation();
        onClose();
        break;
      }
    }
  };

  React.useEffect(() => {
    window.addEventListener('keyup', handleKeyUp, false);

    return () => window.removeEventListener('keyup', handleKeyUp);
  }, []);

  return (
    <Motion
      defaultStyle={{ backgroundOpacity: 0, backgroundScale: 0.95 }}
      style={{ backgroundOpacity: spring(active ? 1 : 0, { stiffness: 150, damping: 15 }), backgroundScale: spring(active ? 1 : 0.95, { stiffness: 200, damping: 3 }) }}
    >
      {({ backgroundOpacity, backgroundScale }) => (
        <div
          className={classNames({
            'flex items-center justify-center bg-gray-700 bg-opacity-90 h-full w-full absolute left-0 top-0 z-1000 pointer-events-none': true,
            'visible': active,
            'invisible': !active,
          })}
          style={{ opacity: backgroundOpacity }}
        >
          <div className='w-80 h-40 flex relative p-2'>
            <div className='absolute inset-0' style={{ transform: `scale(${backgroundScale})` }} />

            <Stack space={3} justifyContent='center' alignItems='center'>
              <Icon
                src={require('@tabler/icons/icons/cloud-upload.svg')}
                className='w-12 h-12 text-white text-opacity-90'
              />

              <Text size='xl' theme='white'>
                <FormattedMessage id='upload_area.title' defaultMessage='Drag & drop to upload' />
              </Text>
            </Stack>
          </div>
        </div>
      )}
    </Motion>
  );
};

UploadArea.propTypes = {
  active: PropTypes.bool,
  onClose: PropTypes.func,
};

export default UploadArea;