import React, { Component } from 'react';
import { Form, Button, Row, Col } from 'react-bootstrap';
import TextBox from '../elements/textField'
import TextArea from '../elements/textArea'
import CheckBox from '../elements/checkbox';
import SelectFormElement from '../elements/selectpicker';
import DateTime from '../elements/datepicker';
import translateLabel from "../translation";

export default class Section extends Component {

  constructor(props) {
    super(props);

    var stateVal = this.props.stateVal;
    this.state = { ...stateVal };
    this.checkValue = [];
    this.stateList = [];
    this.handleChange = this.handleChange.bind(this);
    this.handleLoadValue = this.handleLoadValue.bind(this);
  }

  handleChange(event) {
    if (event.hasOwnProperty("keyCode")) {
      if(event.keyCode === 13) {
        event.preventDefault();
      }
    }
    if (event.target.type === "checkbox") {
      // console.log("event.target.checked..",event.target.checked)
      if (event.target.checked || !event.target.checked) {
        this.props.inputElement.formgroup.input.forEach((val) => {
          if (event.target.name === val.name) {
            this.checkValue[val.name] = [];
            val.options.forEach((dt) => {
              if (dt.value === event.target.value) {
                dt.checked = event.target.checked;
              }
            });
            val.options.forEach((vl) => {
              if (vl.checked) {
                this.checkValue[val.name].push(vl.value);
              }
            });
          }
        });
      }
      this.setState({ ...this.checkValue });
    } else {
      // this.props.inputElement.formgroup.input.forEach((val) => {
      //   if (val.name === event.target.name && val.depElement) {
      //     val.depElement.map(elemntName => {
      //       this.setState({
      //         [elemntName]: ''
      //       })
      //       return elemntName
      //     })
      //   }
      // });
      // console.log("log", { [event.target.name]: event.target.value });


    // console.log("elese part", { [event.target.name]: event.target.value });
     this.setState({ [event.target.name]: event.target.value });
    }
    this.props.onChange(event);
  }

  getOnLoad (template) {
    if (template.hasOwnProperty("onDependLoad")) {
      this.handleLoadValue(template)
    }
  }
  handleLoadValue(element) {

    if (element.value > 0) {
      this.props.onKeyLoad(element);
      //console.log("element", element.name,  element.value);
    }
  }

  handleSectionEditClick(params, tabIndex) {
    this.props.onSectionActionClick(params, tabIndex);
  }

  componentDidUpdate(prevProps, prevState) {

  }

  render() {
    // var title;
    if (this.props.frmTitle !== "") {
      // title = <Col lg="12" md="12" sm="12" xs="12" key={this.props.frmTitle + "tl"}><h4 dir={this.props.config[this.props.lang]} key={this.props.frmTitle}>{translateLabel(this.props.frmTitle)}</h4></Col>;
    }

    return (
      <div className={"sectionPad col-12 " + this.props.inputElement.gridClass + " section-blk-"+this.props.lang}>
        {/* {title} */}
        <div className={"col-12 col-lg-12 " + this.props.inputElement.panelClass !== "" ? this.props.inputElement.panelClass : ""}>
          <Row dir={this.props.config[this.props.lang]} className="sectionContainer"> {this.constructFormTemplate(this.props.inputElement)} </Row>
        </div>
        {/* {(() => {
          {
            if (this.props.wizardStep !== "") {
            // if (this.props.storeData.hasOwnProperty('WizardStep') && this.props.storeData.WizardStep !== "") {
              return (
                <div className="col-lg-12 col-md-12 col-sm-12 col-6">
                  <div style={{ width: '100%', textAlign: 'right' }}>
                    <button onClick={() => { this.handleSectionEditClick() }} className="btn-primary"> {translateLabel("EDITBTN")}</button>
                  </div>
                </div>
              )
            } else {
              return ("")
            }
          }
        }
        )()}
 */}
      </div>
    );
  }

  constructFormTemplate(frmData) {
    const formContent = [];
    var sectionBtn = "";
    if (this.props.sectionButton && frmData.formgroup.hasOwnProperty("wizardStep")) { //sectionButton
      sectionBtn = <div className="col-lg-12"><input type="button" className="btn formbtn-primary" style={this.props.lang === this.props.langCheckValue ? { float: "left" } : { float: "right" }} value={translateLabel('EDITBTN')} onClick={() => { this.handleSectionEditClick(frmData.formgroup.wizardStep, frmData.formgroup.editTabIndex) }} /></div>
      formContent.push(<Col lg="12" md="12" sm="12" xs="12" key={frmData.formgroup.title + "-edit-hd"}>{sectionBtn}</Col>);
    }
    // formContent.push(<Col lg="12" md="12" sm="12" xs="12" key={frmData.formgroup.title+"-hd"}><h5 key={frmData.formgroup.title}>{translateLabel(frmData.formgroup.title)}</h5></Col>);
    frmData.formgroup.input.forEach((template) => {
      if (template.type === "text" || template.type === "password" || template.type === "email") {
        formContent.push(
          <div className={"col-6 " + template.class} key={template.id + '-text'}>
            <TextBox key={template.id}
              id={template.id}
              langCheckValue={this.props.langCheckValue}
              label={translateLabel(template.labelName)}
              type={template.type}
              placeholder={translateLabel(template.placeholder)}
              asterisk={template.showAsterisk}
              inputGroup={template.hasOwnProperty("inputGroup") && template.inputGroup !== "" ? template.inputGroup : ""}
              readonly={template.readOnly}
              name={template.name}
              value={this.state[template.name]}
              onChange={this.handleChange}
              validators={template.hasOwnProperty("validator") && template.validator.hasOwnProperty("rules") ? template.validator.rules : []}
              errorMessages={template.hasOwnProperty("validator") && template.validator.hasOwnProperty("errorMsg") ? template.validator.errorMsg : []}
            />
          </div>
        );
      }
      if (template.type === "textarea") {
        formContent.push(
          <div className={"col-6 " + template.class} key={template.id + '-text'}>
            <TextArea key={template.id}
              id={template.id}
              label={translateLabel(template.labelName)}
              rows={template.rows}
              as={template.type}
              type={template.type}
              placeholder={translateLabel(template.placeholder)}
              asterisk={template.showAsterisk}
              readonly={template.readOnly}
              name={template.name}
              value={this.state[template.name]}
              onChange={this.handleChange}
              lang={this.props.lang}
              langCheckValue={this.props.langCheckValue}
              validators={template.hasOwnProperty("validator") && template.validator.hasOwnProperty("rules") ? template.validator.rules : []}
              errorMessages={template.hasOwnProperty("validator") && template.validator.hasOwnProperty("errorMsg") ? template.validator.errorMsg : []}
            />
          </div>
        );
      }
      if (template.type === "checkbox" || template.type === "radio") {
        formContent.push(
          <div className={"col-6 " + template.class} key={template.id + '-ckbox'}>
            <CheckBox key={template.id}
              id={template.id}
              label={translateLabel(template.labelName)}
              name={template.name}
              type={template.type}
              asterisk={template.showAsterisk}
              value={this.state[template.name]}
              isValid={template.isValid}
              options={template.options}
              onChange={this.handleChange}
              lang={this.props.lang}
              langCheckValue={this.props.langCheckValue}
              validators={template.hasOwnProperty("validator") && template.validator.hasOwnProperty("rules") ? template.validator.rules : []}
              errorMessages={template.hasOwnProperty("validator") && template.validator.hasOwnProperty("errorMsg") ? template.validator.errorMsg : []}
            />
          </div>
        );
      }
      if (template.type === "select") {
        formContent.push(
          <div className={"col-6 " + template.class} key={template.id + '-selist'}>
            <SelectFormElement key={template.id}
              id={template.id}
              label={translateLabel(template.labelName)}
              name={template.name}
              type={template.type}
              placeholder={translateLabel(template.placeholder)}
              asterisk={template.showAsterisk}
              /* asterisk={template.showAsterisk.toString()} */
              value={this.state[template.name]}
              options={template.options}
              onChange={this.handleChange}
              lang={this.props.lang}
              langCheckValue={this.props.langCheckValue}
              validators={template.hasOwnProperty("validator") && template.validator.hasOwnProperty("rules") ? template.validator.rules : []}
              errorMessages={template.hasOwnProperty("validator") && template.validator.hasOwnProperty("errorMsg") ? template.validator.errorMsg : []}
            />
          </div>
        );
      }
      if (template.type === "datepicker" || template.type === "timepicker") {
        formContent.push(
          <div className={"col-6 " + template.class} key={template.id + '-dtp'}>
            <DateTime key={template.id}
              id={template.id}
              label={translateLabel(template.labelName)}
              name={template.name}
              value={this.state[template.name]}
              asterisk={template.showAsterisk}
              type={template.type}
              placeholder={translateLabel(template.placeholder)}
              readonly={template.readOnly}
              isValid={template.isValid}
              onChange={this.handleChange}
              lang={this.props.lang}
              langCheckValue={this.props.langCheckValue}
              minDate={template.hasOwnProperty("minDate") ? template.minDate : false}
              maxDate={template.hasOwnProperty("maxDate") ? template.maxDate : false}
              validators={template.hasOwnProperty("validator") && template.validator.hasOwnProperty("rules") ? template.validator.rules : []}
              errorMessages={template.hasOwnProperty("validator") && template.validator.hasOwnProperty("errorMsg") ? template.validator.errorMsg : []}
            />
          </div>
        );
      }
      if (template.type === "label") {
        var labelContent = "";
        if (this.state[template.name] !== "" && this.state[template.name] !== undefined) {
          labelContent = <Form.Label className={this.props.matchElement !== "" && this.props.matchElement !== undefined && this.props.matchElement.hasOwnProperty(template.keyCode) ? "label-content " + this.props.matchElement[template.keyCode] : "label-content"}>{this.state[template.name] !== "" ? this.state[template.name] : translateLabel("N/A")}</Form.Label>;
        } else {
          labelContent = <Form.Label className={this.props.matchElement !== "" && this.props.matchElement !== undefined && this.props.matchElement.hasOwnProperty(template.keyCode) ? "label-content " + this.props.matchElement[template.keyCode] : "label-content"}  onLoad={ this.getOnLoad(template) }>{template.value !== "" ? template.value : translateLabel("N/A")}</Form.Label>;
        }
        formContent.push(
          <div className={"col-6 " + template.class} key={template.id + '-lbl'}>
            <Form.Group controlId={template.id}>
              <Form.Label className={this.props.matchElement !== "" && this.props.matchElement !== undefined && this.props.matchElement.hasOwnProperty(template.keyCode) ? this.props.matchElement[template.keyCode] : ""}>{translateLabel(template.labelName) + " "}</Form.Label>
              {labelContent}
            </Form.Group>
          </div>
        );
      }
      if (template.type === "submit" || template.type === "button") {
        formContent.push(
          <div className={"col-6 " + template.class} key={template.id + '-btm'}>
            <Form.Group controlId={template.id}>
              <Button className = "formbtn-primary"
                  variant="formbtn-primary" type={template.type}>{translateLabel(template.value)}</Button>
            </Form.Group>
          </div>
        );
      }
    });
    return formContent;
  }
}