import * as React from 'react';
import * as _get from 'lodash.get';
import * as _isEmpty from 'lodash.isempty';
import * as classNames from 'classnames';
import {HTMLProps, PureComponent} from 'react';
import {Image} from './models';
import {
  Button,
  Col,
  FormGroup,
  FormText,
  Icon,
  Img,
  ImgThumbnail,
  Label,
  Row,
  Scrollbars} from './';

const styles = {
  image: (hidden: boolean) => hidden ? {
    display: 'none',
  } : {},
};

export interface FormImagesProps extends HTMLProps<HTMLElement> {
  images?: Image[];
  mapImageUrl?: string;
  marketingImageUrl?: string;
  modelName?: string;
  noUploadButton?: boolean;
  onClickMarketingOrMapImage?: () => void;
  onClickRemoveButton?: (image: Image) => void;
  onClickUploaButton?: () => void;
}

export interface FormImagesState {
  errorOnLoadMarketingImage: boolean;
  errorOnLoadMapImage: boolean;
  removeButtonsVisible: boolean;
}

export class FormImages extends PureComponent<FormImagesProps, FormImagesState> {
  static defaultProps: FormImagesProps = {
    images: [],
    mapImageUrl: '',
    marketingImageUrl: '',
    modelName: '',
    noUploadButton: false,
    onClickMarketingOrMapImage: () => { return; },
    onClickRemoveButton: () => { return; },
    onClickUploaButton: () => { return; },
  };

  state: FormImagesState = {
    errorOnLoadMarketingImage: false,
    errorOnLoadMapImage: false,
    removeButtonsVisible: false,
  };

  render() {
    const {images, noUploadButton, readOnly, onClickUploaButton} = this.props;
    const {errorOnLoadMarketingImage, removeButtonsVisible} = this.state;

    return (
      <div className="form-images">
        <div className="top-gallery">
          {/* <Scrollbars> */}
            {this.renderMarketingImage()}
            {this.renderMapImage()}

            <div
              className={classNames(
                'uploads',
                {'no-images': _isEmpty(images)},
              )}
            >
              {!noUploadButton && !readOnly && (
                <Button
                  className="btn-icon btn-square toggle-drawer"
                  color="link"
                  onClick={onClickUploaButton}
                >
                  <Icon name="file_upload" />
                  <span className="text">Upload</span>
                </Button>
              )}

              {this.renderUploadedImages()}

              {!readOnly && !_isEmpty(images) && (
                <div className="form-check">
                  <label className="custom-control custom-checkbox form-check-label">
                    <input
                      className="custom-control-input"
                      checked={removeButtonsVisible}
                      type="checkbox"
                      onChange={this.handleRemoveMediaChange}
                    />

                    <span className="custom-control-indicator"></span>
                    <span className="custom-control-description">Remove media</span>
                  </label>
                </div>
              )}
            </div>
          {/* </Scrollbars> */}
        </div>

        {!readOnly && !errorOnLoadMarketingImage && (
          <FormText tag="p" color="muted">
            Click the image to open a map
          </FormText>
        )}

        {errorOnLoadMarketingImage && (
          <FormText className="text-warning input-description" tag="p">
            <Icon name="warning" />
            Reference image not found
          </FormText>
        )}
      </div>
    );
  }

  renderMarketingImage = () => {
    const {marketingImageUrl, readOnly, onClickMarketingOrMapImage} = this.props;
    const {errorOnLoadMarketingImage} = this.state;
    const image: any = {url: marketingImageUrl};

    return readOnly ? (
      <ImgThumbnail
        imageClassName="marketing-image rounded"
        image={image}
        imageAlt={this.getMarketingImageAlt()}
        noRemoveButton
        style={styles.image(errorOnLoadMarketingImage)}
        onError={this.updateState('errorOnLoadMarketingImage', true)}
        onLoad={this.updateState('errorOnLoadMarketingImage', false)}
      />
    ) : (
      <Img
        className="marketing-image rounded"
        src={marketingImageUrl}
        style={styles.image(errorOnLoadMarketingImage)}
        onClick={onClickMarketingOrMapImage}
        onError={this.updateState('errorOnLoadMarketingImage', true)}
        onLoad={this.updateState('errorOnLoadMarketingImage', false)}
      />
    );
  }

  renderMapImage = () => {
    const {mapImageUrl, readOnly, onClickMarketingOrMapImage} = this.props;
    const {errorOnLoadMapImage} = this.state;
    const image: any = {url: mapImageUrl};

    if (_isEmpty(mapImageUrl)) { return null; }

    return readOnly ? (
      <ImgThumbnail
        imageClassName="map-image rounded"
        image={image}
        imageAlt="Map Image"
        noRemoveButton
        style={styles.image(errorOnLoadMapImage)}
        onError={this.updateState('errorOnLoadMapImage', true)}
        onLoad={this.updateState('errorOnLoadMapImage', false)}
      />
    ) : (
      <Img
        className="map-image rounded"
        src={mapImageUrl}
        style={styles.image(errorOnLoadMapImage)}
        onClick={onClickMarketingOrMapImage}
        onError={this.updateState('errorOnLoadMapImage', true)}
        onLoad={this.updateState('errorOnLoadMapImage', false)}
      />
    );
  }

  renderUploadedImages = () => {
    const {images, readOnly, onClickRemoveButton} = this.props;
    const {removeButtonsVisible} = this.state;
    const toImage = (url: string) => ({url});

    return images.map((image, index) => (
      <ImgThumbnail
        key={index}
        image={image}
        noRemoveButton={readOnly || !removeButtonsVisible}
        onClickRemoveButton={this.handleRemoveButtonClick(image)}
      />
    ));
  }

  handleRemoveButtonClick = (image: Image) => () => {
    this.props.onClickRemoveButton(image);
  }

  handleRemoveMediaChange = () => {
    this.setState({removeButtonsVisible: !this.state.removeButtonsVisible});
  }

  updateState = (stateProp: string, error: boolean) => () => {
    this.setState({[stateProp]: error} as any);
  }

  getMarketingImageAlt = () => {
    return `Marketing image ${this.props.modelName}`;
  }
}