import * as React from "react";
import {connect} from "react-redux";
import * as  _ from "lodash";
import {changeTableScrollTopPositionAction, resizeWindow as resizeWindowAction, changeColCheckbox } from "../actions.ts";

const push = require("react-router-redux").push;
const classNames = require("classnames/bind");
const styles = require("./styles.scss");
const cx = classNames.bind(styles);
const Select = require("react-select");

declare interface IELPSourceTableProps {
  clickOnItemSettings?: any;
  timeStampOptions?: any;
  currentFileCSV?: any;
  isFirstRowColumnNames?: any;
  currentFileCSVTypes?: any;
}

export class ELPSourceTable extends React.Component<any, any> {
    refs: any;
    constructor(props) {
        super(props);
    }

    handleScroll = (event) => {
      let scrollTop = event.srcElement.scrollTop;
      this.props.changeTableScrollTopPosition(scrollTop);
    };

    changeColCheckboxValue = (mapping, columnNum, newTable, existingTablesRadio) => {
      let currentCheckboxState = this.isColumnChecked(mapping, columnNum, newTable, existingTablesRadio);
      if (!existingTablesRadio) this.props.changeColCheckbox(columnNum, currentCheckboxState);
    };

    componentWillUnmount () {
      if(this.refs.sourceTable) {
        this.refs.sourceTable.removeEventListener("scroll", this.handleScroll);
      }

    }

    componentWillReceiveProps(nextProps) {
      if ( nextProps.tableScrollTopPosition !== this.props.tableScrollTopPosition && this.refs.sourceTable) {
        this.refs.sourceTable.scrollTop = nextProps.tableScrollTopPosition;
      }
      //if ( nextProps.w1 !== this.props.w1 || nextProps.w2 !== this.props.w2 || nextProps.w3 !== this.props.w3) {
      // console.log("componentWillReceiveProps");
      // this.refs.headerRef_1.width = nextProps.w1 + "px";
      // this.refs.headerRef_2.width = nextProps.w2 + "px";
      // this.refs.headerRef_3.width = nextProps.w3 + "px";
    //}
  }

    componentDidMount() {
        //this.props.resizeWindow(50, 40, 390);
        this.props.clickOnItemSettings(false, 0, 0);
        this.refs.sourceTable.addEventListener("scroll", this.handleScroll);
        this.refs.sourceTable.scrollTop = this.props.tableScrollTopPosition;
        //setTimeout(() => (
        //this.updateHeaderWidth(),
        //window.addEventListener("resize", this.updateHeaderWidth)), 1000);
        // document.getElementById('headerCol3').style.width = document.getElementById('column3').offsetWidth + 'px';
        // document.getElementById('headerCol2').style.width = document.getElementById('column2').offsetWidth + 'px';
        // document.getElementById('headerCol1').style.width = document.getElementById('column1').offsetWidth + 'px';
    }

      updateHeaderWidth = () => {
        let w1 = this.refs.col1.getBoundingClientRect().width;
        let w2 = this.refs.col2.getBoundingClientRect().width;
        let w3 = this.refs.col3.getBoundingClientRect().width;

        this.props.resizeWindow(w1, w2, w3);
    }

    modalTimestampWindow = (params) => {
        let opions = {
            left:params.clientx,
            top:params.clienty - 307
        };

        return (
            <div
                className={cx({timestampBlock:true}, {visible:params.bool})}
                style={opions}>
                    <Select
                        placeholder={"DD/MM/YYYY"}
                        searchable={false}/>
                    <Select
                        placeholder={"HH:MM:SS:sss"}
                        searchable={false}/>
                    <button>OK</button>
                    <button onClick={(event)=>{this.props.clickOnItemSettings(false, 0, 0)}}>Cancel</button>
                    <button>Reset</button>
            </div>
        )
    };

    fieldPreview = (currentFileCSV, columnNum, isFirstRowColumnNames) => {
      let fieldPreview = _.map(currentFileCSV, (file: any) => {
        return file[columnNum];
      });

      if (isFirstRowColumnNames) {
        fieldPreview.shift();
      }
      return fieldPreview.join(", ");
    };

    isColumnChecked = (mapping, columnNum, newTable, existingTablesRadio) => {
      return  (existingTablesRadio) ? !_.get(mapping[columnNum], "skipped", true) : !_.get( _.get(newTable, "columns", [])[columnNum], "skipped", false);
    };

    render() {
        const {clickOnItemSettings, timeStampOptions, currentFileCSV, isFirstRowColumnNames, currentFileCSVTypes, tableScrollTopPosition, mapping, newTable, existingTablesRadio} = this.props;

        const maxLine: any = _.maxBy(currentFileCSV, _.property("length")) || [];
        const header = ( <div className={styles.tableHeader}>
                            <table className={styles.sourceTableHeader}>
                                <th className={styles.tableHeaderRow}>
                                    <td className={styles.col1} ref="headerRef_1" id="headerCol1">Select</td>
                                    <td className={styles.col2} ref="headerRef_2" id="headerCol2">ID</td>
                                    <td className={styles.col3} ref="headerRef_3" id="headerCol3">Field Preview</td>
                                </th>
                            </table>
                    </div>);
        return (
            <div className={styles.ELPSourceTableContainer}>
                <div className={styles.tableContainer}>
                    <div className={cx({tableBody:true}, {scrollDisabled:timeStampOptions.bool})} ref="sourceTable" >
                        <div className={styles.tableCover}>
                          <table className={styles.sourceTable} >
                          <thead>
                              <tr className={styles.tableHeaderRow}>
                                  <th className={styles.col1}  id="headerCol1">Select
                                  <div className={styles.div} >Select</div>
                                  </th>
                                  <th className={styles.col2}  id="headerCol2">ID
                                  <div className={styles.div}>ID</div></th>
                                  <th className={styles.col3}  id="headerCol3">Field Preview
                                  <div className={styles.div}>Field Preview</div></th>
                              </tr>
                          </thead>
                          <tbody>
                          {
                            maxLine.map((e, columnNum) => {
                              return (
                              <tr className={styles.tableRow}>
                                <td className={styles.col1} ref="col1" id="column1">
                                  <input type="checkbox"
                                  id = {columnNum}
                                  defaultChecked = {true}
                                  checked = {this.isColumnChecked(mapping, columnNum, newTable, existingTablesRadio)}
                                  onClick = {() => this.changeColCheckboxValue(mapping, columnNum, newTable, existingTablesRadio)}/>
                                  <label htmlFor={columnNum}><i className="fa fa-check"/></label>
                                </td>
                                <td className={styles.col2}ref="col2"  id="column2">{isFirstRowColumnNames ? e : columnNum + 1}</td>
                                <td className={cx({col3:true})} ref="col3" id="column3">
                                  <div className={styles.text}>
                                    {this.fieldPreview(currentFileCSV, columnNum, isFirstRowColumnNames)}
                                  </div>
                                  {(currentFileCSVTypes[columnNum] === "TIMESTAMP") ? (<div
                                    className={styles.gear}
                                    onClick={(event) => {clickOnItemSettings(true, event.pageX, event.pageY);}}></div>) : ""}
                                </td>
                              </tr>
                                );
                            })
                          }
                          </tbody>
                          </table>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state, props) => ({
  tableScrollTopPosition: _.get(state, "loadConstructor.tableScrollTopPosition", 0),
  mapping: _.get(state, "loadConstructor.mapping"),
  newTable: _.get(state, "loadConstructor.newTable"),
  existingTablesRadio: _.get(state, "loadConstructor.existingTablesRadio", true),
  w1: _.get(state, "loadConstructor.w1"),
  w2: _.get(state, "loadConstructor.w2"),
  w3: _.get(state, "loadConstructor.w3"),
});

const mapDispatchToProps = (dispatch, getState) => ({
  changeTableScrollTopPosition: (pos) => {
    dispatch(changeTableScrollTopPositionAction(pos));
  },
  changeColCheckbox: (columnNum, currentCheckboxState) => {
    dispatch(changeColCheckbox(columnNum, currentCheckboxState));
  },
  resizeWindow: (w1, w2, w3) => {
    dispatch(resizeWindowAction(w1, w2, w3));
  },
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ELPSourceTable);