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 { progressId } = useParams();
    const { 
        progress,
        name,
        section,
        topic,
        loading, 

        totalPages,
        totalData,
        setSearch,
        page, 
        handlePageChange,
        handleLimitsChange,
        handleSearchChange,
        formatLocalDate,
        handleDownloadCSV
    } = useProgressClass(progressId);
    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='/admin/learning-progress'>
                        <i className="bi bi-arrow-90deg-left"></i>
                    </Button>
                    <Breadcrumb className='custom-breadcrumb'>
                        <Breadcrumb.Item href="/admin/learning-progress">Monitoring Progress</Breadcrumb.Item>
                        <Breadcrumb.Item active>Class Progress Details</Breadcrumb.Item>
                    </Breadcrumb>
                </Col>
                <Col sm={6} className="d-flex align-items-center justify-content-end">
                    <Button variant="outline-blue" type="button" className='py-2 bg-white' onClick={(e) => { e.preventDefault(); handleDownloadCSV(); }}>
                        <i className="bi bi-download me-2"></i>Download CSV
                    </Button>
                </Col>
            </Row>
            <Row className='mb-45'>
                <Col>
                    <div className="cards">
                        <div className="cards-title">
                            <h4 className='mb-2'>{name}</h4>
                            <span className='text-grey'>{section} / {topic}</span>
                        </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>Level</th>
                                        <th>Score</th>
                                        <th>Feedback</th>
                                        <th>Start Exercise</th>
                                        <th>Finish Exercise</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {loading?(
                                        <tr>
                                            <td colSpan={7} 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>{data.NAME_LEVEL}</td>
                                                    <td>{data.SCORE}</td>
                                                    <td>{data.FEEDBACK_STUDENT ?? '-'}</td>
                                                    <td>{formatLocalDate(data.STUDENT_START)}</td>
                                                    <td>{formatLocalDate(data.STUDENT_FINISH)}</td>
                                                </tr>
                                            ))
                                        ):( 
                                            <tr>
                                                <td colSpan={7} 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;
