import React, { Component } from 'react';
import './App.css';
import Student from './Student'

//Front End Assessment coded by Victor Zohni in React 2018

class App extends Component {

 state = {
  items: [],
  namesearch: '',
  tagsearch: '',
 }


  async componentDidMount() {
    try {
      const res = await fetch("https://www.hatchways.io/api/assessment/students");
      const items = await res.json();
      const tags = [];
      // console.log(items.students);

      items.students.forEach((item) => { item.tags = tags; });

      this.setState({
        items: items.students,
         });
    // console.log(items.students);

    } catch (e) {
     // console.log(e);
    }
  }

  onChangeHandler = (e) => {
    this.setState({
      namesearch: e.target.value,
    })
  }
  onChangeHandler2= (e) =>{
    this.setState({
      tagsearch: e.target.value,
    })
  }

  hasTag(tags, inputTag){
    return tags.indexOf(inputTag) > -1
  }



  render() {

    // console.log(this.state.items);
      let filteredStudents = this.state.items.filter(
        (item) =>{
          return item.firstName.toLowerCase().indexOf(this.state.namesearch) !== -1
          || item.lastName.toLowerCase().indexOf(this.state.namesearch) !== -1
        }
      );

       // console.log(this.state.items);

        let studentsWithTags = filteredStudents.filter((student) => {
          //Get student state somehow here???
          return this.hasTag(student.tags, this.state.tagsearch);

        });

      const ids = [];
      const noDups = [];

      filteredStudents.forEach((val) => {
        if (!ids.includes(val.id)) {
          ids.push(val.id);
          noDups.push(val);
        }
      });

      studentsWithTags.forEach((val) => {
        if (!ids.includes(val.id)) {
          ids.push(val.id);
          noDups.push(val);
        }
      });


    return (
      <div className="App">
        <div className="student-box">
        <input type="text" placeholder = "Search by name"  value={this.state.namesearch} onChange={this.onChangeHandler}/>
        <input type="text" placeholder = "Search by tag" value={this.state.tagsearch} onChange={this.onChangeHandler2}/>
          <nav>
            <ul>
              {noDups.map(item => <Student key = {item.id} student = {item} />)}
            </ul>
          </nav>
        </div>
      </div>
    );
  }
}

export default App;


// {filteredStudents.map(  item => <Student key = {item.id} student = {item} /> )}
// {studentsWithTags.map(item => <Student key = {item.id} student = {item} />  )}

// {filteredStudents.map(  item => <Student key = {item.id} student = {item} />               )}
//{filteredTags.map(item => <Student key = {item.id} student = {item} />  )}

 // let filteredTags = this.state.items.filter(
      //   (item) =>{
      //     item.tags.filter((tag) => {
      //       return tag.toLowerCase().indexOf(this.state.taginput) !== -1;
      //      });
      //   }
      // );

      //let array1 = filteredStudents.map(item => <Student key = {item.id} student = {item} /> );
      //let array2 = studentsWithTags.map(item => <Student key = {item.id} student = {item} /> );
      //console.log(array1);
      //console.log(array2);
      // let joinedArray = array1.concat(array2);
      // let noDuplicates = [...new Set(joinedArray)];
      // const uniqueNames = Array.from(new Set(joinedArray));

_________________


import React, { Component } from 'react';
import PropTypes from 'prop-types';

//Front End Assessment coded by Victor Zohni in React 2018

export default class Student extends Component{
    static propTypes = {
        student: PropTypes.shape({
            firstName: PropTypes.string.isRequired,
            lastName: PropTypes.string.isRequired,
            company: PropTypes.string.isRequired,
            skill: PropTypes.string.isRequired,
            email: PropTypes.string.isRequired,
            pic: PropTypes.string,
            grades: PropTypes.array,
            tags: PropTypes.array,
        }),
    }


    state = {
        toggle: false,
        input: '',
        tagsarr: [],
      }

      toggle = () => {
          this.setState({
            toggle: !this.state.toggle
          })
      }

      componentWillReceiveProps(nextProps) {
        //Perform any computations you want to perform with new prop here

      }

    calcAverage = (grades) => {
        var sum = 0;
        //console.log(grades);
        grades.forEach ((grade) => {
        sum += parseInt(grade); });
        return sum / grades.length;
    }


    handleKeyPress = (e) => {
        var newTag = e.target.value;

        this.setState({
            input: newTag,
        })
        if (e.key === 'Enter') {
            //console.log(this.props.tags);
            this.setState(prevState => ({
                tagsarr: prevState.tagsarr.concat(newTag)
            }))

          //console.log(newTag);
        }
        //return clonedElementWithTag;
      }

     render(){
        const {student} = this.props;
        const avg = this.calcAverage (student.grades);
        //const tags = this.handleKeyPress();

        var rows = []
        for (var i = 0; i < student.grades.length; i++) {
            rows.push(<li key={i}/>);
            rows.push("Test " + (i+1) + ": " +  student.grades[i] + "%");
        }

        var tagslist = []
        for (var j = 0; j < this.state.tagsarr.length; j++)
        {
            tagslist.push(<li className = "tag-box" key={j}> {this.state.tagsarr[j]} </li>);
        }


        return(
            <div className = "border-div">
                <button onClick = {this.toggle}>+</button>
                <img width={100} height={100} alt="" src={student.pic} />
                <h3>{student.firstName} {student.lastName} </h3>
                <div className = "student-text">
                    <p>Email: {student.email}</p>
                    <p>Company: {student.company}</p>
                    <p>Skill: {student.skill}</p>
                    <p>Average: {avg}%</p>
                        {this.state.toggle &&
                        <div>
                            <div className="test-list">{rows}</div>
                            <div className="test-list">{tagslist}</div>
                            <input className="tag-input" type="text" value = {this.state.input}
                            onChange={evt => this.handleKeyPress(evt)}
                            placeholder = "Add a tag" onKeyPress={this.handleKeyPress} />
                        </div>
                        }
                    </div>
             </div>

        )
    }
}