import React, { Component } from "react";
import _ from "lodash"
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      employees: [
        {
          image : "https://www.shareicon.net/download/2015/09/24/106420_man_512x512.png",
          name : "Jerry Seinfeld",
          emp_id : "914037",
          position : "Chief Financial Officer",
          department : "Head Office",
          email : "seinfield@penske.com",
        },
        {
          image : "https://www.shareicon.net/download/2015/09/24/106420_man_512x512.png",
          name : "Cosmo Kramer",
          emp_id : "900345",
          position : "Operations Manager",
          department : "Operations",
          email : "kramer@penske.com",
        },
        {
          image : "https://www.shareicon.net/download/2015/09/24/106420_man_512x512.png",
          name : "George Costanza",
          emp_id : "833425",
          position : "Operations Trainee",
          department : "Operations",
          email : "costanza@penske.com",
        },
        {
          image : "https://www.shareicon.net/download/2015/09/24/106420_man_512x512.png",
          name : "Susan Ross",
          emp_id : "455326",
          position : "Operations Trainee",
          department : "Operations",
          email : "susan@penske.com",
        },
		{
          image : "https://www.shareicon.net/download/2015/09/24/106420_man_512x512.png",
          name : "Ruthie Cohen",
          emp_id : "123774",
          position : "Operations Trainee",
          department : "Operations",
          email : "cohen@penske.com",
        },
		{
          image : "https://www.shareicon.net/download/2015/09/24/106420_man_512x512.png",
          name : "Elaine Benes",
          emp_id : "87265",
          position : "Operations Trainee",
          department : "Operations",
          email : "Benes@penske.com",
        },
		{
          image : "https://www.shareicon.net/download/2015/09/24/106420_man_512x512.png",
          name : "George Steinbrenner ",
          emp_id : "866204",
          position : "Operations Trainee",
          department : "Operations",
          email : "steinbrener@penske.com",
        },
		{
          image : "https://www.shareicon.net/download/2015/09/24/106420_man_512x512.png",
          name : "Larry Charles",
          emp_id : "265674",
          position : "Operations Trainee",
          department : "Operations",
          email : "larry.charles@penske.com",
        },
		{
          image : "https://www.shareicon.net/download/2015/09/24/106420_man_512x512.png",
          name : "Larry Charles",
          emp_id : "279402",
          position : "Operations Trainee",
          department : "Operations",
          email : "larry.charles@penske.com",
        },
		{
          image : "https://www.shareicon.net/download/2015/09/24/106420_man_512x512.png",
          name : "Larry Charles",
          emp_id : "68292",
          position : "Operations Trainee",
          department : "Operations",
          email : "larry.charles@penske.com",
        },
      ],
      departments : [
        "Head Office",
        "Operations",
      ],
      positions : [
        "Chief Financial Officer",
        "Operations Trainee",
        "Operations Manager"
      ],
      emp_name : "",
      emp_id : "",
      department : 0,
      position : 0,
    };
  }

  render() {
    let _this = this, data = this.state.employees;

    if(!_.isEmpty(_this.state.emp_name)){
      data = _.filter(data, obj => obj.name.toLowerCase().indexOf(_this.state.emp_name.toLowerCase()) > -1);
    }
    if(!_.isEmpty(_this.state.emp_id)){
      data = _.filter(data, obj => obj.emp_id.toLowerCase().indexOf(_this.state.emp_id.toLowerCase()) > -1);
    }
    if(!_.isEmpty(_this.state.department)){
      data = _.filter(data, obj => obj.department == _this.state.department);
    }
    if(!_.isEmpty(_this.state.position)){
      data = _.filter(data, obj => obj.position == _this.state.position);
    }
    //   if(!_.isEmpty(_this.state.emp_name) && ! _.isEmpty(_this.state.department) && ! _.isEmpty(_this.state.position)){
    //
    // }
    return (
      <div className="App">
        <header
          style={{
            height: 50,
            display: "flex",
            flexDirection: "row",
            flex: 1,
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <div
            style={{
              fontSize: 24,
              display: "inline",
              flex: 0.3,
              textAlign: "left"
            }}
          >
            <i class="fa fa-bars" /> PENSKE
          </div>
          <div
            style={{
              flexDirection: "row",
              flex: 0.5,
              justifyContent: "center",
              alignItems: "center",
              display: "inline",
              textAlign: "center"
            }}
          >
            <span className="App-title">
              NORTH STAR MOTORS <i class="fa fa-chevron-down" />
            </span>
          </div>
          <div
            className="App-title"
            style={{
              flex: 0.2,
              textAlign: "right",
              display: "flex",
              justifyContent: "flex-end",
              alignItems: "center"
            }}
          >
            <div
              style={{
                width: 24,
                height: 24,
                borderRadius: 12,
                backgroundColor: "#9c3d6b",
                color: "#fff",
                fontSize: 12,
                textAlign: "center",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                marginRight: 5
              }}
            >
              <span>VJ</span>
            </div>
            <span
              style={{
                marginRight: 5
              }}
            >
              Jean Valjean
            </span>{" "}
            <i class="fa fa-chevron-down" />
          </div>
        </header>
        <div
          style={{
            flex: 1,
            display: "flex",
            height: 40,
            backgroundColor: "#891f59",
            justifyContent: "flex-start",
            alignItems: "center",
            color: "#fff",
            paddingLeft: 40
          }}
        >
          <span
            style={{
              marginRight: 10
            }}
          >
            Employees
          </span>
          <span>142 Employees</span>
        </div>
        <div
          style={{
            display: "flex",
            flex: 1,
            flexDirection: "row",
            padding: 15
          }}
        >
          <div
            style={{
              width: 300
            }}
          >
            <span>Filters</span>
            <div
              style={{
                marginBottom: 15,
                marginTop: 15
              }}
            >
              <labe
                for="name"
                style={{
                  display: "block",
                  width: "100%"
                }}
              >
                Name
              </labe>
              <input
                type="text"
                name="name"
                id="name"
                placeholder="Employee Name"
                style={{
                  display: "block",
                  width: "100%"
                }}
                value={this.state.emp_name}
                onChange={function (event) {
                  _this.setState({
                    emp_name :  event.target.value
                  })
                }}
              />
            </div>
            <div
              style={{
                marginBottom: 15,
                marginTop: 15
              }}
            >
              <labe
                for="emp_id"
                style={{
                  display: "block"
                }}
              >
                Employee ID
              </labe>
              <input
                name="emp_id"
                id="emp_id"
                style={{
                  display: "block",
                  width: "100%"
                }}
                value={this.state.emp_id}
                onChange={function (event) {
                  _this.setState({
                    emp_id :  event.target.value
                  })
                }}
              />
            </div>
            <div
              style={{
                marginBottom: 15,
                marginTop: 15
              }}
            >
              <labe
                for="department"
                style={{
                  display: "block"
                }}
              >
                Department
              </labe>
              <select
                name="department"
                id="department"
                placeholder="Choice"
                style={{
                  display: "block",
                  width: "100%"
                }}
                onChange={function (event) {
                  _this.setState({
                    department :  event.target.value
                  })
                }}
              >
                <option value="0">Choice</option>
                {this.state.departments.map(function (item) {
                  return <option value={item} selected={_this.state.department == item}>{item}</option>
                })}
              </select>
            </div>
            <div
              style={{
                marginBottom: 15,
                marginTop: 15
              }}
            >
              <label
                for="position"
                style={{
                  display: "block"
                }}
              >
                Position
              </label>
              <select
                name="position"
                id="position"
                placeholder="Choice"
                style={{
                  display: "block",
                  width: "100%"
                }}
                onChange={function (event) {
                  _this.setState({
                    position :  event.target.value
                  })
                }}
              >
                <option value="0">Choice</option>
                {this.state.positions.map(function (item) {
                  return <option value={item}  selected={_this.state.position == item}>{item}</option>
                })}
              </select>
            </div>
          </div>
          <div>
            <table>
              <thead>
                <tr>
                  <th>Image</th>
                  <th>Name</th>
                  <th>Employee ID</th>
                  <th>Position</th>
                  <th>Department</th>
                  <th>Email</th>
                </tr>
              </thead>
              <tbody>
              {data.map(function (item) {
                return <tr>
                  <td><img src={item.image} alt="" style={{
                    width : 32,
                    height : 32,
                    borderRadius: 16,
                    backgroundColor : "#000fff",
                  }}/></td>
                  <td>{item.name}</td>
                  <td>{item.emp_id}</td>
                  <td>{item.position}</td>
                  <td>{item.department}</td>
                  <td>{item.email}</td>
                </tr>
              })}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  }
}

export default App;