import React, { Component } from 'react';
import Dropzone from 'react-dropzone';
import PropTypes from 'prop-types';
import {
  Text,
  Button,
  CloseIcon,
} from '@bufferapp/components';
import ReactLoading from 'react-loading';
import CameraIcon from '@bufferapp/ui/Icon/Icons/Camera';

import styled from 'styled-components';
import { geyser, torchRed, outerSpaceLight, curiousBlue } from '@bufferapp/components/style/color';

const DropzoneWrapper = styled.div`
  transition: all 0.2s ease-out;
  height: 127px;
  width: 160px;
  display: flex;
  position: relative;
  top: 0px;
  right: 0px;

  border-width: ${props => props.logoUrl ? '0px' : '1px'};
  border-style: ${props => props.logoUrl ? 'none' : 'dashed'};
  border-color: ${props => props.isLogoUploadErrored ? torchRed : '#b8b8b8'};
  border-radius: 4px;

  &:hover > button > span {
    opacity: 1.0;
  }

  &:hover {
    cursor: ${props => props.logoUrl ? 'default' : 'pointer'};
    border-width: ${props => props.logoUrl ? '0px' : '1px'};
    border-style: ${props => props.logoUrl ? 'none' : 'dashed'};
    border-color: ${curiousBlue};
    box-shadow: ${props => props.logoUrl ? 'none' : `0 1px 2px ${outerSpaceLight}`};
  }

  &:active {
    border-width: ${props => props.logoUrl ? '0px' : '1px'};
    border-style: ${props => props.logoUrl ? 'none' : 'dashed'};
    border-color: '#b8b8b8';
    box-shadow: ${props => props.logoUrl ? 'none' : `0 1px 4px ${outerSpaceLight}`};
  }
`;

const DropzoneContainer = styled.div`
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  padding-top: 22px;
`;

const LogoPlaceholder = styled.div`
  transition: all 0.2s ease-out;
  height: 127px;
  width: 160px;
  position: absolute;
  box-sizing: border-box;
  text-align: right;
`;

const LogoImage = styled.img`
  max-width: 100%;
  max-height: 100%;
`;

const DropZone = {
  height: '127px',
  width: '160px',
};

const UploadLogoText = styled.span`
  display: block;
  margin-top: 13px;
`;

const UploadingText = styled.span`
  display: block;
  padding-left: 48px;
  margin-top: -13px;
  //margin-top: 21px;
`;

const Box = styled.span`
  transition: all 0.2s ease-out;
  position: absolute;
  top: -6px;
  right: -6px;
  background: #FFFFFF;
  border: 1px dashed ${geyser};
  box-sizing: border-box;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 .25rem;
  z-index: 9999;
  border-radius: 50%;
  display: flex;
  opacity: 0;

  &:hover {
    cursor: pointer;
    border: 1px dashed ${curiousBlue};
    box-shadow: 0 1px 2px ${outerSpaceLight};
  }
  &:active {
    border: 1px dashed #0e5c98;
    box-shadow: 0 1px 4px ${outerSpaceLight};
  }
`;

class LogoUpload extends Component {
  render() {
    const { logoUrl, uploadLogo, deleteLogo, isLogoUploading,
      isLogoDropzoneDisabled, isLogoUploadErrored, exporting } = this.props;
    const deleteLogoAction = () => deleteLogo();
    // Do not display the logo box in export when logo is not set
    if (logoUrl === '' && exporting) return null;
    return (
      <DropzoneWrapper
        isLogoUploading={isLogoUploading}
        logoUrl={logoUrl}
        isLogoUploadErrored={isLogoUploadErrored}
      >
        {!logoUrl &&
          <DropzoneContainer>
            <CameraIcon size="large" />
            <UploadLogoText>
              {!isLogoUploading &&
                <Text weight="medium" color="outerSpace">Upload logo</Text>
              }
            </UploadLogoText>
            {!isLogoUploading && !isLogoUploadErrored &&
            <Text size="small" color="shuttleGray">PNG or JPG</Text>
            }
            {!isLogoUploading && isLogoUploadErrored &&
            <Text size="small" color="torchRed">Oops! 5MB maximum</Text>
            }
            {isLogoUploading &&
              <UploadingText>
                <ReactLoading delay={0} className="loading" type="bubbles" color={geyser} />
              </UploadingText>
            }
          </DropzoneContainer>
        }
        <Dropzone
          name="file"
          disablePreview
          disabled={isLogoDropzoneDisabled}
          disableClick={isLogoDropzoneDisabled || logoUrl}
          onDropAccepted={uploadLogo}
          multiple={false}
          accept="image/png,image/jpeg"
          style={DropZone}
        >
          <LogoPlaceholder>
            <LogoImage src={logoUrl} />
          </LogoPlaceholder>
        </Dropzone>
        {logoUrl &&
          <Button noStyle onClick={deleteLogoAction}>
            <Box>
              <CloseIcon />
            </Box>
          </Button>
        }
      </DropzoneWrapper>
    );
  }
}

LogoUpload.defaultProps = {
  isLogoUploading: false,
  isLogoDropzoneDisabled: false,
  isLogoUploadErrored: false,
  exporting: false,
};

LogoUpload.propTypes = {
  logoUrl: PropTypes.string.isRequired,
  uploadLogo: PropTypes.func.isRequired,
  deleteLogo: PropTypes.func.isRequired,
  isLogoUploading: PropTypes.bool,
  isLogoDropzoneDisabled: PropTypes.bool,
  isLogoUploadErrored: PropTypes.bool,
  exporting: PropTypes.bool,
};

export default LogoUpload;