import React, {
  Component,
} from 'react';
import {
  Container,
  Form,
  Button,
  TabContent,
  TabPane,
  Nav,
  NavItem,
  NavLink,
} from 'reactstrap';
import classnames from 'classnames';
import {
  FaEdit,
} from 'react-icons/fa';
import {
  NotificationContainer,
  NotificationManager,
} from 'react-notifications';
import Navigation from './Navigation';
import Header from './Header';
import API from './Api';
import VegetableMain from './Vegetable/Main';
import VegetableCarousel from './Vegetable/Carousel';
import VegetableMap from './Vegetable/Map';
import VegetablesProperties from './Vegetable/Properties';

import './Vegetable.css';
import 'react-notifications/lib/notifications.css';

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

    this.state = {
      Vegetable: {
        name: '',
        lat: 0,
        lng: 0,
        description: '',
        Pictures: [],
      },
      uploadPictures: 0,
      uploadedPictures: 0,
      imagePreviewUrl: '',
      imagesPreviewUrls: [],
      activeTab: '1',
      availableProperties: [],
    };

    this.handleChange = this.handleChange.bind(this);
    this.getVegetable = this.getVegetable.bind(this);
    this.updateVegetable = this.updateVegetable.bind(this);
    this.changeMainPicture = this.changeMainPicture.bind(this);
    this.addPicture = this.addPicture.bind(this);
    this.deletePicture = this.deletePicture.bind(this);
    this.toggle = this.toggle.bind(this);
    this.updateValueFromChild = this.updateValueFromChild.bind(this);

    this.getVegetable(props.match.params.categoryId, props.match.params.vegetableId);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState(prevState => ({
      Vegetable: {
        ...prevState.Vegetable,
        [name]: value,
      },
    }));
  }

  toggle(tab) {
    if (this.state.activeTab !== tab) {
      this.setState({
        activeTab: tab,
      });
    }
  }

  updateValueFromChild(name, value) {
    this.setState(prevState => ({
      Vegetable: {
        ...prevState.Vegetable,
        [name]: value,
      },
    }));
  }

  changeMainPicture(file, reader) {
    this.setState(prevState => ({
      Vegetable: {
        ...prevState.Vegetable,
        mainPictureImported: file,
      },
      imagePreviewUrl: reader.result,
    }));
  }

  addPicture(file, reader) {
    this.setState(prevState => ({
      uploadPictures: prevState.uploadPictures + 1,
    }), () => {
      const fd = new FormData();
      NotificationManager.info('Sauvegarde de l\'image en cours...');

      fd.append('picture', file);

      API.post(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}/pictures`, fd)
        .then((res) => {
          const picture = res.data;
          this.setState(prevState => ({
            uploadedPictures: prevState.uploadedPictures + 1,
            Vegetable: {
              ...prevState.Vegetable,
              Pictures: [
                ...prevState.Vegetable.Pictures,
                picture,
              ],
            },
            imagesPreviewUrls: [
              ...prevState.imagesPreviewUrls,
              picture.url,
            ],
            activeIndex: prevState.imagesPreviewUrls.length,
          }));
          NotificationManager.success('Image sauvegardée');
        })
        .catch(() => {
          NotificationManager.error('Impossible d\'ajouter cette image');
        });
    });
  }

  deletePicture(id) {
    API.delete(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}/pictures/${id}`)
      .then(() => {
        NotificationManager.success('Image supprimée');
        const Pictures = this.state.Vegetable.Pictures;
        const urls = this.state.imagesPreviewUrls;
        let url = null;

        for (let i = 0; i < Pictures.length; i++) {
          if (Pictures[i].id === id) {
            url = Pictures[i].url;
            Pictures.splice(i, 1);
            break;
          }
        }
        for (let i = 0; i < urls.length; i++) {
          if (urls[i] === url) {
            urls.splice(i, 1);
            break;
          }
        }

        this.setState(prevState => ({
          ...prevState,
          imagesPreviewUrls: urls,
          Vegetable: {
            ...prevState.Vegetable,
            Pictures,
          },
        }));
      })
      .catch(() => {
        NotificationManager.error('Impossible de supprimer cette image');
      });
  }

  updateVegetable(event) {
    NotificationManager.info('Sauvegarde en cours');
    event.preventDefault(); // Let's stop this event.
    event.stopPropagation(); // Really this time.
    const requests = 1 + this.state.Vegetable.Properties.length;
    let requestsDone = 0;

    const isDone = () => {
      if (requests === requestsDone) {
        NotificationManager.success('Sauvegarde terminée');
        this.getVegetable(this.props.match.params.categoryId, this.props.match.params.vegetableId);
      }
    };

    // Patch Vegetable
    const fd = new FormData();
    if (this.state.imagePreviewUrl) {
      fd.append('mainPicture', this.state.Vegetable.mainPictureImported);
    }

    Object.keys(this.state.Vegetable).map((objectKey) => {
      // if (objectKey === 'Properties') {
      //   fd.append(objectKey, JSON.stringify(this.state.Vegetable[objectKey]));
      // } else
      if (objectKey !== 'mainPicture' && objectKey !== 'mainPictureImported' && objectKey !== 'Properties') {
        fd.append(objectKey, this.state.Vegetable[objectKey]);
      }
      return true;
    });
    API.patch(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}`, fd)
      .then((res) => {
        requestsDone++;
        isDone();
      })
      .catch(() => {
        NotificationManager.error('Impossile de mettre à jour ce végétal');
      });

    // Patch or create Properties
    this.state.Vegetable.Properties.forEach((propertyItem) => {
      if (propertyItem.id) {
        API.patch(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}/properties/${propertyItem.id}`, propertyItem)
          .then((res) => {
            requestsDone++;
            isDone();
          })
          .catch(() => {
            NotificationManager.error(`Impossile de mettre à jour la propriété ${propertyItem.Property.name}`);
          });
      } else {
        API.post(`types/${this.state.Vegetable.Type.id}/vegetables/${this.state.Vegetable.id}/properties`, propertyItem)
          .then((res) => {
            requestsDone++;
            isDone();
          })
          .catch(() => {
            NotificationManager.error(`Impossile de sauvegarder la propriété ayant pour valeur ${propertyItem.value}`);
          });
      }
    });
  }

  getVegetable(categoryId, vegetableId) {
    API.get('properties')
      .then((res) => {
        // availableProperties
        if (res.status === 200) {
          this.setState({
            availableProperties: res.data.rows,
          });
        }
      })
      .catch((e) => {
        NotificationManager.error('Erreur lors de la récupération des types de propriétés');
      });

    API.get(`types/${categoryId}/vegetables/${vegetableId}`)
      .then((res) => {
        if (res.status === 200) {
          const item = res.data;
          const images = [];

          if (item.description === null) {
            item.description = ' ';
          }

          if (item.Pictures.length > 0) {
            for (let i = 0; i < item.Pictures.length; i += 1) {
              images.push(item.Pictures[i].url);
            }
          }

          this.setState(prevState => ({
            ...prevState,
            Vegetable: item,
            imagesPreviewUrls: images,
          }));
        }
      })
      .catch((e) => {
        NotificationManager.error('Erreur lors de la récupération de ce végétal');
      });
  }

  render() {
    return (
      <div>
        <NotificationContainer />
        <Header />
        <Container className="Vegetable">
          <Navigation categoryId={this.state.Vegetable.Type ? this.state.Vegetable.Type.id : 1} categoryName={this.state.Vegetable.Type ? this.state.Vegetable.Type.name : null} vegetableId={this.state.Vegetable.id || 1} vegetableName={this.state.Vegetable.name} />
          <Form onSubmit={this.updateVegetable}>
            <Nav tabs>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '1' })}
                  onClick={() => { this.toggle('1'); }}
                >
                  Informations générales
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '2' })}
                  onClick={() => { this.toggle('2'); }}
                >
                  Propriétés
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '3' })}
                  onClick={() => { this.toggle('3'); }}
                >
                  Carte
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '4' })}
                  onClick={() => { this.toggle('4'); }}
                >
                  Galerie
                </NavLink>
              </NavItem>
            </Nav>
            <TabContent activeTab={this.state.activeTab}>
              <TabPane tabId="1">
                <VegetableMain
                  Vegetable={this.state.Vegetable}
                  imagePreviewUrl={this.state.imagePreviewUrl}
                  updateValue={this.updateValueFromChild}
                  changeMainPicture={this.changeMainPicture}
                  availableProperties={this.state.availableProperties}
                />
              </TabPane>
              <TabPane tabId="2">
                <VegetablesProperties
                  selectedProperties={this.state.Vegetable.Properties}
                  availableProperties={this.state.availableProperties}
                  setProperties={this.handleChange}
                />
              </TabPane>
              <TabPane tabId="3">
                <VegetableMap
                  Vegetable={this.state.Vegetable}
                  updateValue={this.updateValueFromChild}
                />
              </TabPane>
              <TabPane tabId="4">
                <VegetableCarousel
                  addPicture={this.addPicture}
                  deletePicture={this.deletePicture}
                  imagesPreviewUrls={this.state.imagesPreviewUrls}
                  activeIndex={this.state.activeIndex}
                  pictures={this.state.Vegetable.Pictures}
                />
              </TabPane>
            </TabContent>

            {this.state.uploadPictures === this.state.uploadedPictures ? (
              <Button color="primary" style={{ marginTop: '16px' }} className={this.state.activeTab === '3' ? 'd-none' : ''}>
                <FaEdit />
                {' '}
                Mettre à jour
              </Button>
            ) : (null)}
          </Form>
        </Container>
      </div>
    );
  }
}

export default Vegetable;