import React from 'react';
import { Table, Row, Col, Button, Form, Dropdown, DropdownButton, Breadcrumb, Spinner } from 'react-bootstrap';
import { Link, useParams } from 'react-router-dom';
import useProgressClass from '../hooks/useProgressClass';
import TablePaginate from '../../../../components/ui/TablePaginate';

const ClassProgress = () => {
    const { classId } = useParams();
    const { 
        progress,
        nameClass,
        loading, 
        error, 

        totalPages,
        totalData,
        setSearch,
        page, 
        handlePageChange,
        handleLimitsChange,
        handleSearchChange,
        formatLocalDate
    } = useProgressClass(classId);
    return (
        <div className='admin-teachers'>
            <Row className='mb-45'>
                <Col sm={6} className="d-flex align-items-center breadcrumb-con">
                    <Button as={Link} className='btn btn-blue btn-square-back' to='/portal/monitoring'>
                        <i className="bi bi-arrow-90deg-left"></i>
                    </Button>
                    <Breadcrumb className='custom-breadcrumb'>
                        <Breadcrumb.Item href="/portal/monitoring">Monitoring Progress</Breadcrumb.Item>
                        <Breadcrumb.Item href="/portal/monitoring">Class Detail</Breadcrumb.Item>
                        <Breadcrumb.Item active>{nameClass}</Breadcrumb.Item>
                    </Breadcrumb>
                </Col>
            </Row>
            <Row className='mb-45'>
                <Col>
                    <div className="cards">
                        <div className="cards-title">
                            <h4 className='mb-2'>Student Last Activity</h4>
                        </div>
                        <div className="cards-body">
                            <Form className="mb-3 d-flex align-items-strech" onSubmit={(e) => { e.preventDefault(); handleSearchChange(); }}>
                                <Form.Control type='search'
                                    aria-label="Large"
                                    aria-describedby="inputGroup-sizing-sm"
                                    placeholder='Search'
                                    className='table-input-search mb-0 me-2 rounded-3'
                                    onChange={(e) => { setSearch(e.target.value); }}
                                />
                                <Button type='submit' variant='blue rounded-3'>Search</Button>
                            </Form>
                            <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>
                                    {loading?(
                                        <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>
                                    ):(
                                        progress.length > 0?(
                                            progress.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={`/portal/monitoring/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 className="mt-2 w-100 d-flex justify-content-between align-items-center">
                                <div className='d-flex align-items-center'>
                                    <small className="me-2">Item per page</small>
                                    <Form.Select 
                                        size='sm' 
                                        className='py-0 px-1 me-2' 
                                        aria-label="Default select example" 
                                        defaultValue='7' 
                                        onChange={handleLimitsChange}
                                        style={{ width: '50px' }} 
                                    >
                                        <option value="20">20</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                    </Form.Select>
                                    <small>of {totalData}</small>
                                </div>
                                <TablePaginate
                                    totalPages={totalPages}
                                    currentPage={page}
                                    onPageChange={handlePageChange}
                                />
                            </div>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
    );
};

export default ClassProgress;
