import './../App.css';
import AddUser from './AddUser';
import Header from './Header';
import SearchForm from './Search';
import TableData from './TableData';
import React, { useState } from 'react';
import dataUser from './data.json'

function App() {
  const [hienThiForm , setStatus] = useState(false);
  const [data , setData] = useState(dataUser);
  const [searchText , setSearchText] = useState('');
  const doiTrangThai = () =>{
    setStatus(!hienThiForm);
  }
  let getTextSearch = (dl) =>{
     setSearchText(dl) ;
  }
  let getNewUserData = (Name,tel,permission) =>{
    let item = {};
    item.id ='';
    item.Name = Name;
    item.tel = tel;
    item.permission = permission ;
    let items =data ;
    items.push(item);
    setData(data => items);
    console.log(data);
  }
  // let ketqua = [];
  // data.forEach((item) =>{
  //   if(item.Name.indexOf(searchText)!== -1){
  //     ketqua.push(item);
  //   }
  // });

  return (

    <div>
      <Header/>
      <div className="searchForm">
        <div className="container">
          <div className="row">
            <SearchForm checkConnectProps ={(dl)=>getTextSearch(dl)} ketnoi={()=>doiTrangThai()} hienthi={hienThiForm}/>
            <TableData dataUserProps={data} />
            <AddUser add={(Name,tel,permission)=>getNewUserData(Name,tel,permission)} hienthi={hienThiForm}/>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;