import React, { PropTypes, Component } from 'react';
import ReactDOM from 'react-dom';
import './blank.css';
import Details from './Details';
import {
  Panel,
  Button,
  PageHeader,
  ControlLabel,
  FormControl,
  Pagination,
  FormGroup
} from 'react-bootstrap';
import JwPagination from 'jw-react-pagination';
import IdleTimer from 'react-idle-timer';
import history from '../../../core/history';

var API_URL; // end_point url

// This really needs a more descriptive name. It seems like it toggles article visibility?
function myFunction(details) {
  var x = document.getElementById("article-lookup");
  var y = document.getElementById("articledetails");
  if (details === true) {
    x.style.display = "none";
    y.style.display = "block";
  } else {
    y.style.display = "none";
    x.style.display = "block";
  }
}

function newFunction(isActive) {
  var x = document.getElementById("article-lookup");
  var y = document.getElementById("articledetails");
  if (isActive) {
    x.style.display = "block";
    y.style.display = "none";
    //history.push('/blank');
  } else {
    x.style.display = "none";
    y.style.display = "block";
  }
}



const customStyles = {
  ul: {
    backgroundColor: 'red'
  },
  li: {
    border: '1px solid green'
  },
  a: {
    color: 'blue'
  }
};
const title = 'Customer-LookUp';
const spacing = {
  marginRight: "20px",
  marginbottom: "20px"
}
const buttonalignment = {
  marginLeft: "20px",
  marginbottom: "20px"
}

class displayBlank extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Data: [],
      filteredData: [],
      pageOfItems: [],
      respData: [],
      // showResults:false,
      sort: {
        column: null,
        direction: 'desc',
      },
      filterVal: '',
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.setArrow = this.setArrow.bind(this);
    this.onSort = this.onSort.bind(this);
    this.onChangePage = this.onChangePage.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.afterUpdate = this.afterUpdate.bind(this);
    this._onActive = this._onActive.bind(this);
    this._onIdle = this._onIdle.bind(this);
    this._onAction = this._onAction.bind(this);
    var hasStorage = (function () {
      try {
        return true;
      } catch (exception) {
        return false;
      }
    }());
    var host = JSON.parse(localStorage.getItem('host'));
    var url = JSON.parse(localStorage.getItem('url'));

    var login = sessionStorage.getItem('login');
    if (!login) {
      history.push('/');
    }

  };
  componentDidMount() {
    myFunction(false);
  }

  _onAction(e) {
    //console.log('user did something', e);
  }

  _onActive(e) {
    //console.log('user is active', e);
    //console.log('time remaining', this.idleTimer.getRemainingTime());
  }

  _onIdle(e) {
    //console.log('user is idle', e)
    //console.log('last active', this.idleTimer.getLastActiveTime());
    //console.log('elapsed time in blank', this.idleTimer.getElapsedTime());
    //var eltime = this.idleTimer.getElapsedTime();
    var minutes = 1000 * 60;
    var hours = minutes * 60;
    var days = hours * 24;
    var years = days * 365;
    var d = new Date();
    var t = d.getTime();
    //console.log('current time in icons',t);
    var last_active = this.idleTimer.getLastActiveTime();
    var eltime = t - last_active;
    //console.log('eltime in blank', eltime);
    if (eltime >= 1800000) {
      history.push('/'); window.location = '/'; sessionStorage.setItem('login', '');
    }

  }
  /*shouldComponentUpdate(){
    myFunction(false);
  }*/

  afterUpdate() {
    //console.log('In afterupdate');
    //myFunction(false);
    //componentDidMount();
    myFunction(false);
  }
  onChangePage(pageOfItems) {
    // update local state with new page of items
    this.setState({ pageOfItems });
  }
  handleSubmit(event) {
    event.preventDefault();
    //myFunction();
    const form = event.target;
    const data = new FormData(form);
    const arrayValue = [];
    var i = 0;
    for (let name of data.keys()) {
      const input = form.elements[name];
      const parserName = input.dataset.parse;
      const parsedValue = data.get(name);
      if (typeof (parsedValue) == 'undefined' || parsedValue == null) {
        arrayValue[i] = "";
        data.set(name, arrayValue[i]);
      }
      else {
        data.set(name, parsedValue);
        arrayValue[i] = parsedValue;
      }
      i = i + 1;
    }

    var response_data = "";
    var response_jsonObj;
    var txt = "";
    var req = {
      "ArticleErrorsRequest": [{
        "col_1": arrayValue[1],
        "col_2": arrayValue[0],
        "col_3": arrayValue[2],
        "col_4": arrayValue[3],
        "col_5": arrayValue[4],
        "col_6": arrayValue[5],
      }]
    };
    if (data.get('col_1') === '') {
      swal({
        title: "Column 1 is required!",
        icon: "error",
        confirmButtonText: 'OK'
      }).then((okay) => {
        if (okay) {

          history.push('/grid');
          history.push('/blank');
        }
      });
    }
    else {

      fetch(API_URL, {
        headers: {
          'Accept': '*/*',
          'Content-Type': 'application/json',
        },
        method: 'POST',
        body: JSON.stringify(req)
      }
      ).then(response => {
        if (response.status !== 200) {
          return;
        }
        response.text().then(data => {
          if (data.length == 2) {
            swal({
              title: "Item Not Found!",
              icon: "error",
              confirmButtonText: 'OK'
            }).then((okay) => {
              if (okay) {

                history.push('/grid');
                history.push('/blank');
              }
            });
          }
          response_data = data;
          response_jsonObj = JSON.parse(response_data);
          this.setState({ Data: response_jsonObj });
        });
      }).catch(error => this.setState({ error }));

    }
    //console.log('req string :', JSON.stringify(req));

  }

  handleClick(col_1, col_2, col_3, col_4) {

    myFunction(true);
    var newresponse_jsonObj, response_data;
    var req = {
      "ArticleErrorsRequest": [{
        "col_1": col_1,
        "col_2": col_2,
        "col_3": col_3,
        "col_4": col_4
      }]
    };
    //console.log('req string :', JSON.stringify(req));
    fetch(API_URL, {
      headers: {
        'Accept': '*/*',
        'Content-Type': 'application/json',
      },
      method: 'POST',
      body: JSON.stringify(req)
    }
    ).then(response => {
      if (response.status !== 200) {
        return;
      }
      response.text().then(data => {
        response_data = data;
        newresponse_jsonObj = JSON.parse(response_data);
        this.setState({ respData: newresponse_jsonObj });
      });
    }).catch(error => this.setState({ error }));
  }

  onSort = (column) => (e) => {
    const direction = this.state.sort.column ? (this.state.sort.direction === 'asc' ? 'desc' : 'asc') : 'desc';
    const sortedData = this.state.pageOfItems.sort((a, b) => {
      if (column === 'First Name') {
        return a.FIRST_NAME.toUpperCase().localeCompare(b.COL_1.toUpperCase());
      }

      else if (column === 'Last Name') {
        return a.LAST_NAME.toUpperCase().localeCompare(b.COL_2.toUpperCase());
      }

    });


    if (direction === 'desc') {
      sortedData.reverse();
    }

    this.setState({
      pageOfItems: sortedData,
      sort: {
        direction,
        column,
      }
    });
  };

  setArrow = (column, className) => {
    let current_className = className;

    if (this.state.sort.column === column) {
      current_className += this.state.sort.direction === 'asc' ? ' asc' : ' desc';
    }


    return current_className;
  };

  onFilterChange = (e) => {
    const filterVal = e.target.value;
    this.setState({ filterVal });
  }

  render() {


    //myFunction(false);
    return (
      <div id="id1">
        <div id="article-lookup">
          <div className="row">
            <div className="col-lg-12">
              <PageHeader>Header Name </PageHeader>
            </div>
          </div>
          <form className="form-horizontal" onSubmit={this.handleSubmit}>
            <table>
              <tr>
                <td>
                  <div className="form-group col-xs-12" style={{ marginRight: 20 + "px", marginbottom: 8 + "px" }}>
                    <label className="control-label" >Value</label>
                    <input className="form-control"
                      id="Value" name="Value" />
                  </div>
                </td>
                <td>
                  <div className="form-group col-xs-12" style={{ marginRight: 20 + "px", marginbottom: 8 + "px" }}>
                    <label className="control-label">Value1</label>
                    <select className="form-control" id="Value1" name="Value1">
                      <option value=""></option>
                      <option value="column1">column1</option>
                      <option value="column2">column2</option>
                      <option value="column3">column3</option>
                      <option value="column4">column4</option>
                    </select>
                  </div>
                </td>

              </tr>
              <tr>
                <td>
                  <div className="form-group col-xs-12" style={{ marginRight: 20 + "px", marginbottom: 8 + "px" }}>
                    <label className="control-label">Style Code</label>
                    <input className="form-control"
                      id="style_code" name="style_code" />
                  </div>
                </td>
                <td>
                  <div className="form-group required col-xs-12" style={spacing}>
                    <label className="control-label">Value2</label>
                    <select className="form-control" id="Value2" name="Value2">
                      <option value=""></option>
                      <option value="column1">column1</option>
                      <option value="column2">column2</option>
                      <option value="column3">column3</option>
                      <option value="column4">column4</option>
                      <option value="column5">column5</option>
                      <option value="column6">column6</option>
                      <option value="column7">column7</option>
                      <option value="column8">column8</option>
                    </select>
                  </div>

                </td>
              </tr>
              <tr>
                <td>
                  <div className="form-group col-xs-12" style={{ marginRight: 20 + "px", marginbottom: 8 + "px" }}>
                    <label className="control-label">From Date</label>
                    <input className="form-control"
                      id="from_date" name="from_date"
                      type="date"
                      placeholder="Enter Date"
                    />
                  </div>
                </td>
                <td>
                  <div className="form-group col-xs-12" style={{ marginRight: 20 + "px", marginbottom: 8 + "px" }}>
                    <label className="control-label">To Date</label>
                    <input className="form-control"
                      id="to_date" name="to_date"
                      type="date"
                      placeholder="Enter Date"
                    />
                  </div>
                </td>
              </tr>
              <tr>
                <td></td>
                <td></td>
                <td>
                  <FormGroup style={buttonalignment}>
                    <Button bsStyle="primary" type="submit" >Search </Button>
                    {'  '}
                    <Button className="btn btn-secondary" bsStyle="primary" type="reset">Clear </Button>
                  </FormGroup>
                </td>
              </tr>
            </table>

            <div className="row ng-scope">
              <div className="col-lg-15">
                <Panel header={<span> Search Results</span>} >
                  <div id="dataTables-example_filter" className="dataTables_filter">
                    <label htmlFor={'search'}>Search:
                       <input
                        type="text"
                        className="form-control input-sm"
                        placeholder="Search-Term"
                        aria-controls="dataTables-example"
                        id="search"
                        value={this.state.filterVal}
                        onChange={this.onFilterChange}
                      />
                    </label>
                  </div><br></br>
                  <div id="Search-Table" className="table-responsive">
                    <table className="table table-striped table-bordered table-hover dataTable no-footer" id="dataTables-example" role="grid" aria-describedby="dataTables-example_info">
                      <thead>
                        <tr role="row">
                          <th className="col-lg-1">Column1</th>
                          <th className="col-lg-1">Column2</th>
                          <th className="col-lg-1">Column3</th>
                          <th className="col-lg-1">Column4</th>
                          <th className="col-lg-1">Column5</th>
                          <th className="col-lg-1">Column6</th>
                          <th className="col-lg-1">Column7</th>
                        </tr>
                      </thead>
                      <tbody>
                        {this.state.pageOfItems.map((item, i) => {
                          return (
                            <tr key={i} onClick={() => this.handleClick(item.Column1, item.Column2, item.Column3, item.Column3)}>
                              <td className="col-lg-1">{item.Column1}</td>
                              <td className="col-lg-1">{item.Column2}</td>
                              <td className="col-lg-1"> {item.Column3}</td>
                              <td className="col-lg-1"> {item.Column4}</td>
                              <td className="col-lg-1"> {item.Column5}</td>
                              <td className="col-lg-1"> {item.Column6}</td>
                              <td > {item.Column7}</td>
                            </tr>
                          );
                        })}

                      </tbody>
                    </table>
                    <div className="col-sm-6 pullRight " >
                      <JwPagination items={this.state.Data.filter(item => item.Column1.indexOf(this.state.filterVal) > -1)} onChangePage={this.onChangePage} />
                    </div>
                  </div>
                </Panel>
              </div>
            </div>
          </form>
        </div>
        <div id="articledetails">
          <Details respData={this.state.respData} afterUpdate={this.afterUpdate} />
        </div>
        <IdleTimer
          ref={ref => { this.idleTimer = ref }}
          element={document}
          onActive={this._onActive}
          onIdle={this._onIdle}
          onAction={this._onAction}
          debounce={250}
          timeout={1800000} />
      </div>
    );
  }


}
export default displayBlank;