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 useClassDetail from '../hooks/useClassDetail';

const ClassDetail = () => {
    const { classId } = useParams();
    const { classData, nameClass, loading, error } = useClassDetail(classId);

    if (error) {
        return <>{error}</>;
    }

    return (
        <div className='admin-teachers'>
            <Row className='mb-45'>
                <Col className="d-flex align-items-center breadcrumb-con">
                    <Button as={Link} className='btn btn-blue btn-square-back' to='/portal/class'>
                        <i className="bi bi-arrow-90deg-left"></i>
                    </Button>
                    <Breadcrumb className='custom-breadcrumb'>
                        <Breadcrumb.Item href="#">Academic</Breadcrumb.Item>
                        <Breadcrumb.Item href="/portal/class" className='text-capitalize'>Classes</Breadcrumb.Item>
                        <Breadcrumb.Item active>Class Details</Breadcrumb.Item>
                    </Breadcrumb>
                </Col>
            </Row>
            <Row className='mb-45'>
                <Col>
                    <div className="cards">
                        <div className="cards-title">
                            <h4>{nameClass}</h4>
                        </div>
                        <div className="cards-body">
                            <Table hover>
                                <thead>
                                <tr>
                                    <th>No</th>
                                    <th>NISN</th>
                                    <th>Student Name</th>
                                </tr>
                                </thead>
                                <tbody>
                                    {loading?(
                                        <tr>
                                            <td colSpan={5} 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>
                                    ):(
                                        classData.length > 0 ?(
                                            classData.map((data, index) => (
                                                <tr key={data.ID}>
                                                    <td>{index + 1}</td>
                                                    <td>{data.NISN}</td>
                                                    <td>{data.NAME_USERS}</td>
                                                </tr>
                                            ))
                                        ):(
                                            <tr>
                                                <td colSpan={3} style={{height:'20vh'}}>
                                                    <h3>This class is empty</h3>
                                                </td>
                                            </tr>
                                        )
                                    )}
                                </tbody>
                            </Table>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
    );
};

export default ClassDetail;