import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Cropper from 'react-easy-crop';
import classnames from 'classnames';
import Button from '../../Button/Button';

import { zoomRange } from './config';

class ImageCropper extends Component {
  static propTypes = {
    imageSrc: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired,
    onSaveCroppedImage: PropTypes.func.isRequired,
    onCancelCroppedImage: PropTypes.func.isRequired,
    buttonCancelText: PropTypes.string.isRequired,
    buttonApplyText: PropTypes.string.isRequired,
    aspect: PropTypes.number.isRequired,
  };

  constructor(props) {
    super(props);

    this.state = {
      crop: { x: 0, y: 0 },
      zoom: 1,
      croppedAreaPixels: 0,
    };
  }

  onCropChange = crop => {
    this.setState({ crop });
  };

  onCropComplete = (croppedArea, croppedAreaPixels) => {
    this.setState({ croppedAreaPixels });
  };

  onZoomChange = zoom => {
    this.setState({ zoom });
  };

  render() {
    const {
      imageSrc,
      onCancelCroppedImage,
      onSaveCroppedImage,
      type,
      buttonCancelText,
      buttonApplyText,
      aspect,
    } = this.props;
    const { crop, zoom, croppedAreaPixels } = this.state;

    const isLogo = type === 'logo';
    const isBackground = type === 'background';
    const isAvatar = type === 'avatar';

    const wrapperClassNames = classnames('ImageCropper-Wrapper', {
      'ImageCropper-Wrapper--Logo': isLogo,
      'ImageCropper-Wrapper--Avatar': isAvatar,
      'ImageCropper-Wrapper--Background': isBackground,
    });

    const cropContainerClassNames = classnames('ImageCropper-CropContainer', {
      'ImageCropper-CropContainer--Background': isBackground,
    });

    return (
      <div className={wrapperClassNames}>
        <div className="ImageCropper-CropWrapper">
          <Cropper
            image={imageSrc}
            crop={crop}
            zoom={zoom}
            minZoom={zoomRange.min}
            maxZoom={zoomRange.max}
            aspect={aspect}
            restrictPosition={false}
            cropShape={isAvatar ? 'round' : 'rect'}
            onCropChange={this.onCropChange}
            onCropComplete={this.onCropComplete}
            onZoomChange={this.onZoomChange}
            classes={{
              containerClassName: cropContainerClassNames,
            }}
          />
        </div>
        <div className="ImageCropper-ControlsContainer">
          <div className="ImageCropper-RangeContainer">
            <input
              type="range"
              aria-labelledby="Zoom"
              min={zoomRange.min}
              max={zoomRange.max}
              step={zoomRange.step}
              value={zoom}
              onChange={e => this.onZoomChange(e.target.value)}
              className="ImageCropper-Range"
            />
          </div>
          <div className="ImageCropper-ButtonsRow">
            <Button
              className="ImageCropper-Button--Cancel"
              type="button"
              variant="whiteWithBorder"
              onClick={onCancelCroppedImage}
            >
              {buttonCancelText}
            </Button>
            <Button
              className="ImageCropper-Button--Apply"
              variant="blue"
              type="button"
              onClick={() => onSaveCroppedImage(croppedAreaPixels)}
            >
              {buttonApplyText}
            </Button>
          </div>
        </div>
      </div>
    );
  }
}

export default ImageCropper;