import React from 'react';
import { Table, Row, Col, Card, Button, Spinner } from 'react-bootstrap';
import { NavLink, Link } from 'react-router-dom';
import avatar from '../../../../assets/images/avatar.png';

import useDashboard from '../hooks/useDashboard';

function validName(fullName) {
  const nameArray = fullName.split(" ");
  const firstTwoWords = nameArray.slice(0, 2).join(" ");
  
  return firstTwoWords;
}

const TeacherDashboard = () => {
  const { username }= JSON.parse(localStorage.getItem('userData'));
  
  const { 
    error,
    totalStudent,
    totalTeacher,
    totalClass,
    reports,
    activity,
    loadingActivity,
    loadingReports,
    formatLocalDate
  } = useDashboard();
  
  
  
  return (
    <div className='admin-dashboard'>
      <h2 className='page-title'>Hi, {validName(username)}!</h2>
      <p className='page-desc'>Together, we can make every learning journey smarter and more adaptive.</p>
      <Row className='mb-45'>
        <Col sm={12} md={4}>
          <div className='bg-gd rounded-3' style={{padding:"1px"}}>
            <div className="px-3 py-2 bg-white rounded-3 d-flex justify-content-between align-items-center">
              <div>
                <p className='mb-1 fs-12p text-gd fw-bold'>Teacher</p> <br />
                <h3 className='m-0 text-gd'>{totalTeacher}</h3>
              </div>
              <i className="display-3 text-gd bi bi-person-video3"></i>
            </div>
          </div>
        </Col>
        <Col sm={12} md={4}>
          <div className='bg-gd rounded-3' style={{padding:"1px"}}>
            <div className="px-3 py-2 bg-white rounded-3 d-flex justify-content-between align-items-center">
              <div>
                <p className='mb-1 fs-12p text-gd fw-bold'>Student</p> <br />
                <h3 className='m-0 text-gd'>{totalStudent}</h3>
              </div>
              <i className="display-3 text-gd bi bi-people-fill"></i>
            </div>
          </div>
        </Col>
        <Col sm={12} md={4}>
          <div className='bg-gd rounded-3' style={{padding:"1px"}}>
            <div className="px-3 py-2 bg-white rounded-3 d-flex justify-content-between align-items-center">
              <div>
                <p className='mb-1 fs-12p text-gd fw-bold'>Class</p> <br />
                <h3 className='m-0 text-gd'>{totalClass}</h3>
              </div>
              <i className="display-3 text-gd bi bi-easel2-fill"></i>
            </div>
          </div>
        </Col>
      </Row>
      <Row className='mb-45'>
        <Col sm={12}>
          <div className="cards">
            <div className="cards-title d-flex justify-content-between align-items-center">
              <h4 className='text-gd'>Student Last Activity</h4>
              <NavLink to="/portal/monitoring" className="text-blue">See more</NavLink>
            </div>
            <div className="cards-body">
              {/* <Table hover>
                <thead>
                  <tr>
                    <th>No</th>
                    <th>Email Address</th>
                    <th>Full Name</th>
                    <th>Activity</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>kenzi.lawson@example.com</td>
                    <td>Courtney</td>
                    <td>In most states, the legal limit in blood alcohol to not be considered DUI is 500 to 1,000 mg/L. Ther</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>jessica.hanson@example.com</td>
                    <td>Eleanor Pena</td>
                    <td>So yes, the alcohol (ethanol) in hand sanitizers can be absorbed through the skin, but no, it would </td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>michelle.rivera@example.com</td>
                    <td>Annette Black</td>
                    <td>An average healthy 7 year old boy weighs about 50 lb (23 kg). If we suppose the same amount of alcoh</td>
                  </tr>
                  <tr>
                    <td>4</td>
                    <td>tim.jennings@example.com</td>
                    <td>Marvin McKinney</td>
                    <td>The principal alcohol in Purell hand sanitizer (to take the most talked-about brand) is 70% ethanol </td>
                  </tr>
                  <tr>
                    <td>5</td>
                    <td>willie.jennings@example.com</td>
                    <td>Leslie Alexander</td>
                    <td>Twenty 30-second applications within half an hour is well in excess of almost anyone’s use of a sani</td>
                  </tr>
                </tbody>
              </Table> */}
              <Table hover>
                <thead>
                  <tr>
                    <th className='text-start'>NISN</th>
                    <th>Full Name</th>
                    <th className='text-center'>Class</th>
                    <th>Section</th>
                    <th>Topic</th>
                    <th>Level</th>
                    <th className='text-center'>Score</th>
                    <th className='text-center'>Review</th>
                  </tr>
                </thead>
                <tbody>
                  {loadingActivity?(
                      <tr>
                          <td colSpan={8} style={{height:"20vh"}}>
                              <Spinner animation="grow" variant="primary" />
                              <Spinner animation="grow" variant="secondary" />
                              <Spinner animation="grow" variant="success" />
                              <Spinner animation="grow" variant="danger" />
                              <Spinner animation="grow" variant="warning" />
                              <Spinner animation="grow" variant="info" />
                          </td>
                      </tr>
                  ):(
                      activity.length > 0?(
                          activity.map((data, index) => (
                            <tr key={index}>
                                <td className='text-start'>{data.NISN}</td>
                                <td>{data.NAME_USERS}</td>
                                <td className='text-center'>{data.NAME_CLASS ? data.NAME_CLASS : '-'}</td>
                                <td>{data.NAME_SECTION}</td>
                                <td>{data.NAME_TOPIC}</td>
                                <td>{data.NAME_LEVEL}</td>
                                <td className='text-center'>{data.SCORE}</td>
                                <td className='text-center action-col'>
                                    <Link className='btn btn-sm btn-view' to={`s/${data.ID_STUDENT_LEARNING}`}><i className="bi bi-eye"></i></Link>
                                </td>
                            </tr>
                          ))
                      ):( 
                          <tr>
                              <td colSpan={8} style={{height:'20vh'}}>
                                  <h3>Empty Data</h3>
                              </td>
                          </tr>
                      )
                  )}
                </tbody>
              </Table>
            </div>
          </div>
        </Col>
      </Row>
    </div>
  );
};

export default TeacherDashboard;