import React, {
  Component,
} from 'react';
import {
  Row,
  Col,
  FormGroup,
  Label,
  Input,
  Carousel,
  CarouselItem,
  CarouselControl,
  CarouselIndicators,
} from 'reactstrap';
import {
  FaFileImage,
} from 'react-icons/fa';

class VegetableCarousel extends Component {
  constructor(props) {
    super(props);

    this.state = {
      imagesPreviewUrls: this.props.imagesPreviewUrls,
      activeIndex: 0
    };

    this.onPictureChange = this.onPictureChange.bind(this);
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
    this.goToIndex = this.goToIndex.bind(this);
    this.onExited = this.onExited.bind(this);
    this.onExiting = this.onExiting.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if ( nextProps.imagesPreviewUrls) {
      this.setState({
        imagesPreviewUrls: nextProps.imagesPreviewUrls
      });
    }
    if ( nextProps.activeIndex) {
      this.setState({
        activeIndex: nextProps.activeIndex
      });
    }
  }

  onPictureChange(e) {
    e.preventDefault();

    const reader = new FileReader();
    const file = e.target.files[0];

    reader.onloadend = () => {
      this.props.addPicture(file, reader);
    };

    reader.readAsDataURL(file);
  }

  next() {
    if (this.animating) return;
    const nextIndex = this.state.activeIndex === this.state.imagesPreviewUrls.length - 1 ? 0 : this.state.activeIndex + 1;
    this.setState({
      activeIndex: nextIndex,
    });
  }

  previous() {
    if (this.animating) return;
    const nextIndex = this.state.activeIndex === 0 ? this.state.imagesPreviewUrls.length - 1 : this.state.activeIndex - 1;
    this.setState({
      activeIndex: nextIndex,
    });
  }

  goToIndex(newIndex) {
    if (this.animating) return;
    this.setState({
      activeIndex: newIndex,
    });
  }

  onExiting() {
    this.animating = true;
  }

  onExited() {
    this.animating = false;
  }

  render() {
    const {
      activeIndex,
    } = this.state;

    return (
      <Row>
        <Col xs={12} sm={4}>
          <FormGroup row>
            <Col sm={12}>
              <Label className="btn btn-success" for="Pictures" sm={12}>
                <FaFileImage />
                {' '}
                Ajouter une photo
              </Label>
              <Input
                type="file"
                id="Pictures"
                onChange={e => this.onPictureChange(e)}
              />
            </Col>
          </FormGroup>
        </Col>
        <Col xs={12} sm={8}>
          {this.state.imagesPreviewUrls
            && this.state.imagesPreviewUrls.length > 0
              ? (<Carousel
                activeIndex={activeIndex}
                next={this.next}
                previous={this.previous}
                 >
                <CarouselIndicators items={this.state.imagesPreviewUrls} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
                {this.state.imagesPreviewUrls.map( (item, key) => (
                  <CarouselItem
                    onExiting={this.onExiting}
                    onExited={this.onExited}
                  key={`Carousel_${key}`}
                >
                  <img src={item} alt="Carousel" />
                </CarouselItem>
              ))}
              <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
              <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
            </Carousel>)
            : (null)
        }
      </Col>
    </Row>
    )
  }
}

export default VegetableCarousel;