import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Modal } from 'react-bootstrap';
import { change, Field, reduxForm, SubmissionError } from 'redux-form'
import swal from 'sweetalert2';
import axios from 'axios/index'

const formName = 'addOwner';

class BusinessNewOwnerModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bizRoleOption:[],
      listNewOwner: [],
      errorConfirmOwner: '',
      first_name_owner: '',
      last_name_owner: '',
      position_name_owner: '',
      department_name_owner: '',
    };
  }

  componentDidMount(){
      this.getRoleBizOption();
  }

  handleSubmit = async (values) => {
    const url = `${process.env.MIX_BACKEND_IP}/api/check_owner`;
    try {
      const res = await axios.post(url, values);
      const { id } = res.data.data;
      this.setState({
        listNewOwner: [
          ...this.state.listNewOwner, {
            name: `${values.first_name_owner} ${values.last_name_owner}`,
            id,
          }],
        first_name_owner: values.first_name_owner,
        last_name_owner: values.last_name_owner,
        position_name_owner: values.position_name_owner,
        department_name_owner: values.department_name_owner,
      });
    } catch (e) {
      throw new SubmissionError({
        _error: e.response.data.errorMessage,
      });
    }
  };

  deleteNewOwner = (i) => {
    const listNewOwner = this.state.listNewOwner.filter((item, index) => index !== i);
    this.setState({
      listNewOwner,
    });
  };

  renderField = (field, disabled) => {
    const { meta: { touched, error } } = field;
    const className = `form-group has-feedback ${touched && error
      ? 'has-error'
      : ''}`;
    return (
      <div className={className}>
        <label htmlFor={field.input.name}>{field.label}</label>
        <input
          type={field.type}
          disabled={disabled}
          placeholder={field.label}
          className="form-control"
          {...field.input}
        />
        <span className="help-block">
          {touched ? error : ''}
        </span>
      </div>
    );
  };

  getRoleBizOption=()=>{
      console.log(this.props.bizRole.length);
      this.setState({
          bizRoleOption:this.props.bizRole.map((bizRole)=>(
              <option key={bizRole} value="{bizRole}">{bizRole}</option>
          )),
      })
  }

  renderSelectPosition= async (field)=>{
      const { meta: { touched, error } } = field;
      const className = `form-group has-feedback ${touched && error
          ? 'has-error'
          : ''}`;

    return (
          <div className={className}>
              <label htmlFor={field.input.name}>{field.label}</label>
              <div className="form-group">
                  <div className="input-group col-md-12">
                      <select
                          type={field.type}
                          placeholder={field.label}
                          className="form-control">
                          {this.state.bizRole}
                      </select>
                  </div>
                  <span className="help-block">
                    {/*{touched ? error : ''}*/}
                  </span>
            </div>
          </div>
      );
  }

  renderInputField = (field) => {
    const { meta: { touched, error } } = field;
    const className = `form-group has-feedback ${touched && error
      ? 'has-error'
      : ''}`;
    return (
      <div className={className}>
        <label htmlFor={field.input.name}>{field.label}</label>
        <div className="form-group">
          <div className="input-group col-md-12">
            <input
              type={field.type}
              placeholder={field.label}
              className="form-control"
              {...field.input}
            />
            <span className="input-group-btn"> <button type="button" className="btn btn-primary"><i className="fa fa-search"/></button> </span>
          </div>
          <span className="help-block">
            {touched ? error : ''}
          </span>
        </div>
      </div>
    );
  };

  renderInputFieldDetail = (field) => {
    const { meta: { touched, error } } = field;
    const className = `form-group has-feedback ${touched && error
      ? 'has-error'
      : ''}`;
    return (
      <div className={className}>
        <label htmlFor={field.input.name}>{field.label}</label>
          <input
            type={field.type}
            placeholder={field.label}
            className="form-control"
            {...field.input}
          />
          <span className="help-block">
            {touched ? error : ''}
          </span>
      </div>
    );
  };

  handleConfirmOwner = async () => {
    if (!this.state.listNewOwner.length) {
      this.setState({
        errorConfirmOwner: 'Please add owner before confirm',
      });
      return;
    }
    const ownerId = this.state.listNewOwner.map(account => account.id);
    const url = '/service/request_business';
    const businessId = document.querySelector('meta[name="account-id"]').getAttribute('content');
    try {
      await axios.post(url, {
        businessId,
        type: 'ADD_NEW_OWNER',
        ownerId,
        firstName: this.state.first_name_owner,
        lastName: this.state.last_name_owner,
        position: this.state.position_name_owner,
        department: this.state.department_name_owner,
      });
      swal({
        title: 'request success',
        type: 'success',
        showConfirmButton: false,
        timer: 3000,
      });
      this.props.handleModal(false);
    } catch (e) {
      console.log(e);
    }
  };

  render() {
    console.log(this.props.bizRole.length);
    if(this.props.bizRole.length>0)
      return (
          <Modal
              show={this.props.openModal}
              onHide={() => this.props.handleModal(false)}
          >
              <Modal.Header closeButton>
                  <Modal.Title>เพิ่มพนักงาน</Modal.Title>
              </Modal.Header>
              <Modal.Body>
                  <form onSubmit={this.props.handleSubmit(this.handleSubmit)}>
                      <Field
                          name="first_name_owner"
                          type="text"
                          component={this.renderField}
                          label="ชื่อ (ภาษาอังกฤษ)"
                      />
                      <Field
                          name="last_name_owner"
                          type="text"
                          component={this.renderField}
                          label="นามสกุล (ภาษาอังกฤษ)"
                      />

                      <Field
                          name="id_no_owner"
                          type="text"
                          component={this.renderInputField}
                          label="เลขบัตรประจำตัว"
                      />

                      <Field
                          name="position_name_owner"
                          type="text"
                          component={this.renderSelectPosition}
                          label="ตำแหน่ง*"
                      />


                      <Field
                          name="department_name_owner"
                          type="text"
                          component={this.renderInputFieldDetail}
                          label="แผนก*"
                      />

                      <p className="text-danger">
                          {this.props.error && <strong>{this.props.error}</strong>}
                      </p>
                      <button type="submit" className="btn btn-primary">เพิ่ม</button>
                  </form>
                  <hr />
                  <table className="table table-hover">
                      <thead>
                      <tr>
                          <th>#</th>
                          <th>ชื่อ</th>
                      </tr>
                      </thead>
                      <tbody>
                      {this.state.listNewOwner.map((account, index) => (
                          <tr key={index}>
                              <td>
                                  {index + 1}
                              </td>
                              <td>
                                  {account.name}
                              </td>
                              <td>
                                  <button
                                      className="btn btn-danger"
                                      onClick={() => this.deleteNewOwner(index)}
                                  >
                                      <i className="fa fa-times" />
                                  </button>
                              </td>
                          </tr>
                      ))}
                      </tbody>
                  </table>
                  <p className="text-danger">
                      {!this.state.listNewOwner.length && <strong>{this.state.errorConfirmOwner}</strong>}
                  </p>
              </Modal.Body>
              <Modal.Footer>
                  <button className="btn btn-primary" onClick={this.handleConfirmOwner}>
                      ยืนยัน
                  </button>
              </Modal.Footer>
          </Modal>
      );
    return "";

  }
}

BusinessNewOwnerModal.propTypes = {
  openModal: PropTypes.bool.isRequired,
  handleModal: PropTypes.func.isRequired,
  handleSubmit: PropTypes.func.isRequired,
};
BusinessNewOwnerModal.defaultProps = {};

function validate(values) {
  const errors = {};
  const regex = /(?=.*[A-Za-z])(?=.*\d)[\S\d]{8,}$/;
  const regexNumber = /^[0-9\b]+$/;
  const regexEng = /^[A-Za-z][A-Za-z0-9]*$/;

  if (!values.first_name_owner) {
    errors.first_name_owner = 'โปรดกรอกชื่อ';
  } else if (!regexEng.test(values.first_name_owner)) {
    errors.first_name_owner = 'โปรดกรอกภาษาอังกฤษเท่านั้น';
  }
  if (!values.last_name_owner) {
    errors.last_name_owner = 'โปรดกรอกชื่อ(ภาษาอังกฤษ)';
  } else if (!regexEng.test(values.last_name_owner)) {
    errors.last_name_owner = 'โปรดกรอกภาษาอังกฤษเท่านั้น';
  }
  if (!values.id_no_owner) {
    errors.id_no_owner = 'โปรดกรอกเลขประจำตัวประชาชน';
  } else if (!regexNumber.test(values.id_no_owner)) {
    errors.id_no_owner = 'โปรดกรอกตัวเลขเท่านั้น';
  } else if (values.id_no_owner.length !== 13) {
    errors.id_no_owner = 'เลขประจำตัวประชาชนต้องเท่ากับ 13 หลัก';
  }
  if (!values.position_name_owner) {
    errors.position_name_owner = 'โปรดกรอกตำแหน่ง';
  }
  if (!values.department_name_owner) {
    errors.department_name_owner = 'โปรดกรอกแผนก';
  }
  return errors;
}

const handleSearch = async (values, dispatch, props) => {
  const url = `${process.env.MIX_BACKEND_IP}/api/check_owner`;
  try {
    const res = await axios.post(url, {
      id_no_owner: values.id_no_owner,
    });
    props.dispatch(change(formName, 'first_name_owner', res.data.data.first_name_eng));
    props.dispatch(change(formName, 'last_name_owner', res.data.data.last_name_eng));
  } catch (exception) {
    props.dispatch(change(formName, 'first_name_owner', ''));
    props.dispatch(change(formName, 'last_name_owner', ''));
    throw {
      id_no_owner: "ไม่พบผู้ใช้ในระบบ"
    }
  }
}

export default reduxForm({
  form: formName,
  validate,
  asyncValidate: handleSearch,
  asyncBlurFields: ['id_no_owner'],
})(BusinessNewOwnerModal);