import React, { Component } from 'react'

import { withTracker } from 'meteor/react-meteor-data'
import { Link } from 'react-router-dom'

import { ModulesCollection } from '/imports/api/ModulesCollection'
import ModulesCreate from '/client/imports/admin/ModulesCreate'

import { CompanyCollection } from '/imports/api/CompanyCollection'

import { Template } from 'meteor/templating';

import classnames from 'classnames';

import Utils from '/client/utils/utils';

class Modules extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isCreatingModules: false,
      itemToDelete: '',
      itemToDeleteId: '',
      itemToEdit: {},
      itemToView: {},
      _id: '',
      companyId: '',
      companyName: '',
      moduleBelongTo: '',
      moduleBelongToId: '',
      name: '',
      link: '',
      icon: '',
      description: '',
      order: '',
    }
    this.itemToEdit = {
      name: 'no'
    };
    this.toggleCreateState = this.toggleCreateState.bind(this);
    this.txtClass = 'inputNormal';
    this.emailValidator = false;
  }

  renderModulesTable(modules, padreId) {

    _.forEach(modules, function (item, index) {
//console.log('index', index);
  //    console.log('entre', item);
    //  console.log('pad', padreId);

      if (item.moduleBelongToId == padreId){

      console.log('entre2', item.companyName);
      return (<tr><td>hl</td></tr>)
      return (  <tr key={index}>
          <th scope="row">{index + 1}</th>
          <td>{item.companyName}</td>
          <td>{item.name}</td>
          <td>{item.link}</td>
          <td scope="col">
            <button className="btn-close" type="button"
              onClick={(e) =>{
                this.setState({itemToView: item});
                $('#modalView').modal('show');

              }}>
              <i className="fa fa-eye"></i>
            </button>
            <button className="btn-close" type="button"
              onClick={(e) =>{
                this.itemToEdit = item;
                this.setState({_id: item._id});
                this.setState({name: item.name});
                this.setState({link: item.link});
                this.setState({icon: item.icon});

                $('#modalEdit').modal('show');

              }}>
              <i className="fa fa-pencil"></i>
            </button>
            <button className="btn-close" type="button" onClick={(e) =>{
              this.state.itemToDelete = item.name;
              this.state.itemToDeleteId = item._id;
              this.setState({itemToDelete: this.state.itemToDelete});
              $('#modalDelete').modal('show');

            }}><i className="fa fa-times"></i>
            </button>
          </td>
        </tr>)
      }
    })
  }

  renderModulesTable2(modules, padreId) {

    return modules.map( (item, index) => (
        <tr key={index}>
          <th scope="row">{index + 1}</th>
          <td>{item.companyName}</td>
          <td>{item.name}</td>
          <td>{item.link}</td>
          <td scope="col">
            <button className="btn-close" type="button"
              onClick={(e) =>{
                this.setState({itemToView: item});
                $('#modalView').modal('show');

              }}>
              <i className="fa fa-eye"></i>
            </button>
            <button className="btn-close" type="button"
              onClick={(e) =>{
                this.itemToEdit = item;
                this.setState({_id: item._id});
                this.setState({name: item.name});
                this.setState({link: item.link});
                this.setState({icon: item.icon});

                $('#modalEdit').modal('show');

              }}>
              <i className="fa fa-pencil"></i>
            </button>
            <button className="btn-close" type="button" onClick={(e) =>{
              this.state.itemToDelete = item.name;
              this.state.itemToDeleteId = item._id;
              this.setState({itemToDelete: this.state.itemToDelete});
              $('#modalDelete').modal('show');

            }}><i className="fa fa-times"></i>
            </button>
          </td>
        </tr>

    ))
  }

  toggleCreateState(e) {

    let toggle = !this.state.isCreatingModules
    this.setState({isCreatingModules: toggle})
  }

  renderCreateModulesArea(){
    if (!this.state.isCreatingModules) {
      return (
        <button className="btn btn-primary btn-create" onClick={(e)=>{e.preventDefault(); this.setState({isCreatingModules:true})}}>Crear Modulo <i className="fa fa-plus"></i></button>
      )
    } else {
      return <ModulesCreate
        handler={this.toggleCreateState}
        company   = { this.props.company   }
        modules   = { this.props.modules   }
        roles     ={this.props.roles}
        />
    }
  }

  handleModulesSubmit(e) {
    e.preventDefault()
    let companyData = this.state
    console.log('send', companyData);

    Meteor.call("company.update", companyData, function(error){
      if(error){
        Bert.alert({
          title: 'Error',
          message: error.reason,
          type: 'danger',
          style: 'growl-top-right',
          icon: 'fa-times'
        });
      } else {
        Bert.alert({
          title: 'Modulo editada',
          message: companyData.name + ' fue editada!',
          type: 'info',
          style: 'growl-top-right',
          icon: 'fa-users'
        });
      }
    });
    // this.props.handler()
    $('#modalEdit').modal('hide');
  }

  handleModulesSettingsSubmit(e) {
    e.preventDefault()
    let companyData = this.state
    console.log('send', companyData);

    Meteor.call("company.updateSettings", companyData, function(error){
      if(error){
        Bert.alert({
          title: 'Error',
          message: error.reason,
          type: 'danger',
          style: 'growl-top-right',
          icon: 'fa-times'
        });
      } else {
        Bert.alert({
          title: 'Configuración de empresa editada',
          message: companyData.name + ' fue editada!',
          type: 'info',
          style: 'growl-top-right',
          icon: 'fa-users'
        });
      }
    });
    // this.props.handler()
    $('#modalSettings').modal('hide');
  }

  render() {
    let txtClass = 'inputNormal';
    let modules = this.props.modules
    return (
      <div role="main" className="col-sm-9 ml-sm-auto col-md-10 pt-3">
        <h1>Modulos</h1>
        <nav aria-label="breadcrumb" role="navigation">
          <ol className="breadcrumb">
            <li className="breadcrumb-item"><Link to="/admin">Administración</Link></li>
            <li className="breadcrumb-item active" aria-current="page">Modulos</li>
          </ol>
        </nav>
        {this.renderCreateModulesArea()}
        <table className="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Empresa</th>
              <th scope="col">Nombre</th>
              <th scope="col">Enlace principal</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            {

              _.forEach(modules, function(item, index) {
                console.log('itemes', item)
                if(item.moduleBelongToId == 0){
                   console.log('item', item);
                 // this.renderModulesTable(modules, item._Id)

                }
              })
            }
            {
              modules.forEach((item)=>{
                if(item.moduleBelongToId == 0){
                  console.log('i1',  this.renderModulesTable(modules, 0));
                  console.log('i2',  this.renderModulesTable2(modules, item._id));
                  //this.renderModulesTable2(modules, item._id);
                  this.renderModulesTable(modules, 0)
                }
              })
            }
                              {
                 this.renderModulesTable(modules, 0)

                              }
          </tbody>
        </table>

        <div id="modalView" className="modal fade">
          <div className="modal-dialog modal-md">
            <div className="modal-content">

              <div className="modal-header">
                <h4 className="modal-title">Modulo</h4>
              </div>

              <div className="modal-body">
                <p><strong>Empresa:</strong>  { this.state.itemToView.companyName }</p>
                <p><strong>Nombre:</strong>  { this.state.itemToView.name }</p>
                <p><strong>Enlace:</strong>  { this.state.itemToView.link }</p>
                <p><strong>Módulo padre:</strong>  { this.state.itemToView.moduleBelongTo }</p>
                <p><strong>Icono:</strong>  { this.state.itemToView.icon }</p>
                <p><strong>Orden:</strong>  { this.state.itemToView.order }</p>
                <p><strong>Descripción:</strong>  { this.state.itemToView.description }</p>

              </div>
              <div className="modal-footer">
                <button type="button" className="btn btn-default" data-dismiss="modal">Cerrar</button>
              </div>

            </div>
          </div>
        </div>


         <div id="modalEdit" className="modal fade">
          <div className="modal-dialog modal-lg">
            <div className="modal-content">

              <div className="modal-header">
                <h4 className="modal-title">Editar módulo </h4>
              </div>

              <div className="modal-body">

              <form onSubmit={this.handleModulesSubmit.bind(this)}>
                <div className="row">
                  <div className="col-5">
                    <div className="form-group">
                      <label>Nombre</label>
                      <input maxLength="270" type="text" className="form-control" required value={this.state.name}
                        onChange={(e)=>{e.preventDefault(); this.setState({name: e.target.value})}}
                        />
                    </div>
                  </div>
                  <div className="col-7">
                    <div className="form-group">
                      <label>Enlace</label>
                      <input maxLength="270" type="text" className="form-control" required value={this.state.link}
                        onChange={(e)=>{e.preventDefault(); this.setState({link: e.target.value})}}/>
                    </div>
                  </div>
                </div>

                <div className="modal-footer">
                  <button type="submit" className="btn btn-primary">Editar</button>
                  <button type="button" className="btn btn-default" data-dismiss="modal">Cancelar</button>
                </div>
              </form>

              </div>

            </div>
          </div>
        </div>

        <div id="modalDelete" className="modal fade">
          <div className="modal-dialog modal-lg">
            <div className="modal-content">

              <div className="modal-header">
                <h4 className="modal-title">Eliminar</h4>
              </div>

              <div className="modal-body">
                <label htmlFor="name">Esta seguro que desea eliminar { this.state.itemToDelete }</label>
              </div>

              <div className="modal-footer">
                <button type="button" className="btn btn-primary" id="save" onClick={(e) =>{
                  Meteor.call("company.delete", this.state.itemToDeleteId, function(error){
                    if(error){
                      Bert.alert({
                        title: 'Error',
                        message: error.reason,
                        type: 'danger',
                        style: 'growl-top-right',
                        icon: 'fa-times'
                      });
                    } else {
                      Bert.alert({
                        title: 'Modulo Desactivada',
                        message: 'La empresa se desactivó con exito!',
                        type: 'info',
                        style: 'growl-top-right',
                        icon: 'fa-users'
                      });
                    }
                  });
                  // this.props.handler();
                  //
                  $('#modalDelete').modal('hide');

                }}>Aceptar</button>
                <button type="button" className="btn btn-default" data-dismiss="modal">Cancel</button>
              </div>

            </div>
          </div>
        </div>

      </div>


    )
  }
}

export default withTracker(props => {
  const modulesSubscription = Meteor.subscribe("ModulesCollection")
  const empSubscription = Meteor.subscribe('CompanyCollection')
  const rolesSubscription = Meteor.subscribe("allRoles")
  const allReady = modulesSubscription.ready() && empSubscription.ready() && rolesSubscription.ready()
  const loading = modulesSubscription ? !allReady : true

  return {
    loading,
    modules: ModulesCollection.find().fetch(),
    company: CompanyCollection.find().fetch(),
    roles: Meteor.roles.find().fetch(),
  }
})(Modules)