import React, {Component, components} from 'react';
import Student from './components/Student';
import StudentAdd from './components/StudentAdd';
import './App.css';
import Paper from '@material-ui/core/Paper'
import Table from '@material-ui/core/Table'
import TableHead from '@material-ui/core/TableHead'
import TableBody from '@material-ui/core/TableBody'
import TableRow from '@material-ui/core/TableRow'
import TableCell from '@material-ui/core/TableCell'
import {withStyles} from '@material-ui/core/styles';
import curcularProgress from '@material-ui/core/CircularProgress';
import CircularProgress from '@material-ui/core/CircularProgress';
import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import InputBase from '@material-ui/core/InputBase';
import { fade, makeStyles } from '@material-ui/core/styles';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';

const styles = theme => ({
  root: {
    width: '100%',
    minWidth:1080
  },
  paper: {
    marginLeft:18,
    marginRight:18
  },
  menu: {
    marginTop:15,
    marginBottom:15,
    display:'flex',
    justifyContent:'center'
  },
  progress:{
    margin: theme.spacing(2)
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  tableHead: {
    fontSize: '2.0rem',
  },
  title: {
    flexGrow: 1,
    display: 'none',
    [theme.breakpoints.up('sm')]: {
      display: 'block',
    },
  },
  search: {
    position: 'relative',
    borderRadius: theme.shape.borderRadius,
    backgroundColor: fade(theme.palette.common.white, 0.15),
    '&:hover': {
      backgroundColor: fade(theme.palette.common.white, 0.25),
    },
    marginLeft: 0,
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      marginLeft: theme.spacing(1),
      width: 'auto',
    },
  },
  searchIcon: {
    padding: theme.spacing(0, 2),
    height: '100%',
    position: 'absolute',
    pointerEvents: 'none',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  inputRoot: {
    color: 'inherit',
  },
  inputInput: {
    padding: theme.spacing(1, 1, 1, 0),
    // vertical padding + font size from searchIcon
    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
    transition: theme.transitions.create('width'),
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      width: '12ch',
      '&:focus': {
        width: '20ch',
      },
    },
  },
})

const students = [
  {
  'st_Code': 6666,
  //'st_Name': '육현진',
  //'st_Id': 2018102210,
  'st_Major':'컴퓨터공학과',
  'st_Midscore': 100,
  'st_Finalscore': 100,
  'st_Assignscore': 100,
  'st_Attendscore': 100,
  'st_Score':'A+'
},
{
  'st_Code': 1111,
  //'st_Name': '김창동',
  //'st_Id': 2020021120,
  'st_Major':'컴퓨터공학과',
  'st_Midscore': 79,
  'st_Finalscore': 85,
  'st_Assignscore': 100,
  'st_Attendscore': 90,
  'st_Score':'A0'
}]

class App extends Component{

  constructor(props){
    super(props);
    this.state = {
      students: '',
      completed: 0,
      searchKeyword:''
    }
  }

  stateRefresh = () => {
    this.setState({
      students: '',
      completed: 0,
      searchKeyword:''
    });
    this.callApi()
    .then(res => this.setState({students: res}))
    .catch(err => console.log(err));
  }


  componentDidMount() {
    this.timer= setInterval(this.progress,20);
    this.callApi()
      .then(res => this.setState({students: res}))
      .catch(err => console.log(err));
  }

  callApi=async()=>{
    const response = await fetch('/api/students');
    const body = await response.json();
    return body;
  }

  progress=() =>{
    const{completed}= this.state;
    this.setState({completed:completed >= 100 ?0:completed +1});
  }

  handleValueChange =(e)=>{
    let nextState ={};
    nextState[e.target.st_Name]=e.target.value;
    this.setState(nextState);
  }

  render(){

    const filteredComponents = (data)=>{
      data=data.filter((c) =>{
        return c.st_Name.indexOf(this.state.searchKeyword) > -1;
      });
      return data.map((c)=>{
          return <Student stateRefresh={this.stateRefresh} 
          key={c.st_Code} 
          st_Code={c.st_Code}
          //st_Name={c.st_Name}
          //st_Id={c.st_Id}
          st_Major={c.st_Major}
          st_Midscore={c.st_Midscore}
          st_Finalscore={c.st_Finalscore}
          st_Assignscore={c.st_Assignscore}
          st_Attendscore={c.st_Attendscore}
          st_Score={c.st_Score}/>
      });
    }

    const {classes}= this.props;
    const cellList=["코드번호","이름","학번","전공","중간","기말","과제","출석","성적","설정"];
      return (  
        <div className={classes.root}>
          <AppBar position="static">
            <Toolbar>
              <IconButton
                edge="start"
                className={classes.menuButton}
                color="inherit"
                aria-label="open drawer"
              >
                <MenuIcon />
              </IconButton>
              <Typography className={classes.title} variant="h6" noWrap>
                성적 조회 프로그램
              </Typography>
              
              <div className={classes.search}>
                <div className={classes.searchIcon}>
                  <SearchIcon />
                </div>
                <InputBase
                  placeholder="검색하기"
                  classes={{
                    root: classes.inputRoot,
                    input: classes.inputInput,
                  }}
                  st_Name="searchKeyword"
                  value={this.state.searchKeyword}
                  onChange={this.handleValueChange}
                  inputProps={{ 'aria-label': 'search' }}
                />
              </div>
            </Toolbar>
          </AppBar>

          <div className={classes.menu}>
             <StudentAdd stateRefresh={this.stateRefresh}/>
          </div>

          <Paper className={classes.paper}>
            <Table className={classes.table}>

            <TableHead>
              <TableRow>
                  {cellList.map(c => {
                    return <TableCell className={classes.TableHead}>{c}</TableCell>
                  })}
              </TableRow>
            </TableHead>            
              <TableBody>
              {this.state.students ?
                filteredComponents(this.state.students):
      
              <TableRow>
                <TableCell colSpan="9" allign="center">
                  <CircularProgress className={classes.progress} variant="determinate" value={this.state.completed}/>
                </TableCell>
              </TableRow>
              } 
              </TableBody>
            </Table>
          </Paper> 
        </div>


  );
  }
}

export default withStyles(styles)(App);