import React, { useState } from 'react';
import { Table, Row, Col, Nav, Tab, Button, Form, InputGroup, Modal, Spinner } from 'react-bootstrap';
import useTeachers from '../hooks/useTeachers';
import ModalOperation from '../../../../components/ui/adminMessageModal/ModalOperation';
import TablePaginate from '../../../../components/ui/TablePaginate';

const ManageTeachers = () => {
    const { 
        teachers, 
        loading, 
        error, 
        selectedTeacher, 
        formData, 
        createTeacher, 
        editTeacher, 
        deleteTeacher,
        setSelectedTeacher,
        setFormData,
        handleFormChange,
        resetForm,

        show,
        setShow,
        handleShow,
        handleClose,
        showLoader,
        handleShowLoader,
        handleCloseLoader,
        loaderState,
        setLoaderState,
        
        page, 
        totalData,
        totalPages,
        setSearch,
        handlePageChange,
        handleLimitsChange,
        handleSerachChange
     } = useTeachers();

    const handleCreate = async (e) => {
        handleShowLoader('Created', '', true)
        e.preventDefault();
        await createTeacher(formData);
    };

    const handleUpdate = async (e) => {
        handleClose();
        handleShowLoader('Updated', '', true)
        e.preventDefault();
        await editTeacher(selectedTeacher.ID, formData);
    };

    const handleDelete = async (id) => {
        handleShowLoader('Deleted', 'Are you sure you want to delete this teacher?', false, '', true);
        const confirmDelete = async () => {
            handleCloseLoader();
            await deleteTeacher(id);
        }
        setLoaderState(prev => ({ ...prev, handleConfirm: confirmDelete }));
    }

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

    return (
        <div className='admin-teachers'>
            <h2 className='page-title strip'>Teacher</h2>
            <p className='page-desc'>Description of Teachers.</p>
            <Tab.Container id="left-tabs-example" defaultActiveKey="detail" onSelect={resetForm}>
                <Row className='mb-45'>
                    <Col xs={12}>
                        <Nav variant="pills" className='col-tabs'>
                            <Nav.Item>
                                <Nav.Link eventKey="detail">View Entries</Nav.Link>
                            </Nav.Item>
                            <Nav.Item>
                                <Nav.Link eventKey="create">Create Data</Nav.Link>
                            </Nav.Item>
                        </Nav>
                    </Col>
                </Row>
                <Row className='mb-45'>
                    <Col xs={12} className='col-tabs-content'>
                        <Tab.Content>
                            <Tab.Pane eventKey="detail">
                                <div className="cards">
                                    <div className="cards-title">
                                        <h4>Teacher List</h4>
                                    </div>
                                    <div className="cards-body">
                                        <Form className="mb-3 d-flex align-items-strech" onSubmit={(e) => { e.preventDefault(); handleSerachChange(); }}>
                                            <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>No</th>
                                                <th>NIP</th>
                                                <th>Full Name</th>
                                                <th>Email Address</th>
                                                <th className='text-center'>Action</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>
                                                ):(
                                                    teachers.length > 0?(
                                                        teachers.map((teacher, index) => (
                                                            <tr key={teacher.ID}>
                                                                <td>{index + 1}</td>
                                                                <td>{teacher.NIP}</td>
                                                                <td>{teacher.NAME_USERS}</td>
                                                                <td>{teacher.EMAIL}</td>
                                                                <td className='text-center action-col d-flex justify-content-center'>
                                                                    <Button size='sm' className='btn-edit' onClick={() => handleShow(teacher)}>
                                                                        <i className="bi bi-pencil-square"></i>
                                                                    </Button>
                                                                    <Button size='sm' className='btn-delete' onClick={() => handleDelete(teacher.ID)}>
                                                                        <i className="bi bi-trash3"></i>
                                                                    </Button>
                                                                </td>
                                                            </tr>
                                                        ))
                                                    ):(
                                                        <tr>
                                                            <td colSpan={5} 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="7">7</option>
                                                    <option value="10">10</option>
                                                    <option value="20">20</option>
                                                </Form.Select>
                                                <small>of {totalData}</small>
                                            </div>
                                            <TablePaginate
                                                totalPages={totalPages}
                                                currentPage={page}
                                                onPageChange={handlePageChange}
                                            />
                                        </div>
                                    </div>
                                </div>
                            </Tab.Pane>
                            <Tab.Pane eventKey="create">
                                <div className="cards">
                                    <div className="cards-title">
                                        <h4>Add Teacher Data</h4>
                                    </div>
                                    <div className="cards-body">
                                        <Form onSubmit={handleCreate}>
                                            <Row className="mb-2">
                                                <Form.Group as={Col} controlId="formGridRole">
                                                    <Form.Label>Role<sup className='text-red fw-bold'>*</sup></Form.Label>
                                                    <InputGroup className="mb-2 input-group-icon disabled">
                                                        <InputGroup.Text id="basic-addon1"><i className="bi bi-person-vcard"></i></InputGroup.Text>
                                                        <Form.Control
                                                            disabled
                                                            value="Teacher"
                                                            aria-label="role"
                                                            aria-describedby="basic-addon1"
                                                        />
                                                    </InputGroup>
                                                </Form.Group>

                                                <Form.Group as={Col} controlId="formGridName">
                                                    <Form.Label>Full Name<sup className='text-red fw-bold'>*</sup></Form.Label>
                                                    <InputGroup className="mb-2 input-group-icon">
                                                        <InputGroup.Text id="basic-addon1"><i className="bi bi-person"></i></InputGroup.Text>
                                                        <Form.Control
                                                            name="fullName"
                                                            value={formData.fullName || ''}
                                                            onChange={handleFormChange}
                                                            placeholder="Enter Full Name"
                                                        />
                                                    </InputGroup>
                                                </Form.Group>
                                            </Row>
                                            <Row className="mb-2">
                                                <Form.Group as={Col} controlId="formGridNIP">
                                                    <Form.Label>NIP<sup className='text-red fw-bold'>*</sup></Form.Label>
                                                    <InputGroup className="mb-2 input-group-icon">
                                                        <InputGroup.Text id="basic-addon1"><i className="bi bi-123"></i></InputGroup.Text>
                                                        <Form.Control
                                                            name="nip"
                                                            value={formData.nip || ''}
                                                            onChange={handleFormChange}
                                                            placeholder="Enter NIP"
                                                        />
                                                    </InputGroup>
                                                </Form.Group>

                                                <Form.Group as={Col} controlId="formGridEmail">
                                                    <Form.Label>Email Address<sup className='text-red fw-bold'>*</sup></Form.Label>
                                                    <InputGroup className="mb-2 input-group-icon">
                                                        <InputGroup.Text id="basic-addon1"><i className="bi bi-envelope"></i></InputGroup.Text>
                                                        <Form.Control
                                                            name="email"
                                                            value={formData.email || ''}
                                                            onChange={handleFormChange}
                                                            placeholder="Enter Email Address"
                                                        />
                                                    </InputGroup>
                                                </Form.Group>
                                            </Row>
                                            <Row className="mb-2">
                                                <Form.Group as={Col} controlId="formGridPassword">
                                                    <Form.Label>Password<sup className='text-red fw-bold'>*</sup></Form.Label>
                                                    <InputGroup className="mb-2 input-group-icon">
                                                        <InputGroup.Text id="basic-addon1"><i className="bi bi-key"></i></InputGroup.Text>
                                                        <Form.Control
                                                            type='password'
                                                            name="pass"
                                                            value={formData.pass || ''}
                                                            onChange={handleFormChange}
                                                            placeholder="Create Password"
                                                        />
                                                    </InputGroup>
                                                </Form.Group>

                                                <Form.Group as={Col} controlId="formGridConfirm">
                                                    <Form.Label>Confirm Password<sup className='text-red fw-bold'>*</sup></Form.Label>
                                                    <InputGroup className="mb-2 input-group-icon">
                                                        <InputGroup.Text id="basic-addon1"><i className="bi bi-key-fill"></i></InputGroup.Text>
                                                        <Form.Control
                                                            type='password'
                                                            name="confirm_pass"
                                                            value={formData.confirm_pass || ''}
                                                            onChange={handleFormChange}
                                                            placeholder="Confirm Password"
                                                        />
                                                    </InputGroup>
                                                </Form.Group>
                                            </Row>
                                            <div className="d-flex justify-content-end">
                                                <Button variant="outline-blue" type="reset" className='ms-auto py-2 rounded-35' 
                                                    onClick={resetForm}
                                                >
                                                    reset
                                                </Button>
                                                <Button variant="blue" type="submit" className='ms-2 py-2 px-5 rounded-35' 
                                                    // onClick={handleCreate}
                                                >
                                                    Add
                                                </Button>
                                            </div>
                                        </Form>
                                    </div>
                                </div>
                            </Tab.Pane>
                        </Tab.Content>
                    </Col>
                </Row>
            </Tab.Container>

            <Modal show={show} onHide={handleClose} className='modal-admin' size='lg' centered>
                <Modal.Header closeButton>
                    <Modal.Title>Edit Teacher</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form onSubmit={handleUpdate}>
                        <Form.Group as={Col} controlId="modalGridRole" className='mb-3'>
                            <Form.Label>Role<sup className='text-red fw-bold'>*</sup></Form.Label>
                            <InputGroup className="mb-2 input-group-icon disabled">
                                <InputGroup.Text><i className="bi bi-person-vcard"></i></InputGroup.Text>
                                <Form.Control
                                    disabled
                                    value="Teacher"
                                    aria-label="role"
                                    aria-describedby="basic-addon1"
                                />
                            </InputGroup>
                        </Form.Group>
                        <Form.Group as={Col} controlId="modalGridName" className='mb-3'>
                            <Form.Label>Full Name<sup className='text-red fw-bold'>*</sup></Form.Label>
                            <InputGroup className="mb-2 input-group-icon">
                                <InputGroup.Text><i className="bi bi-person"></i></InputGroup.Text>
                                <Form.Control
                                    placeholder="Enter Full Name"
                                    name="fullName"
                                    value={formData.fullName || ''}
                                    onChange={handleFormChange}
                                />
                            </InputGroup>
                        </Form.Group>
                        <Form.Group as={Col} controlId="modalGridNip" className="mb-3">
                            <Form.Label>NIP<sup className='text-red fw-bold'>*</sup></Form.Label>
                            <InputGroup className="mb-2 input-group-icon">
                                <InputGroup.Text><i className="bi bi-123"></i></InputGroup.Text>
                                <Form.Control
                                    placeholder="Enter NIP"
                                    name="nip"
                                    value={formData.nip || ''}
                                    onChange={handleFormChange}
                                />
                            </InputGroup>
                        </Form.Group>
                        <Form.Group as={Col} controlId="modalGridEmail" className="mb-3">
                            <Form.Label>Email Address<sup className='text-red fw-bold'>*</sup></Form.Label>
                            <InputGroup className="mb-2 input-group-icon">
                                <InputGroup.Text><i className="bi bi-envelope"></i></InputGroup.Text>
                                <Form.Control
                                    placeholder="Enter Email Address"
                                    name="email"
                                    value={formData.email || ''}
                                    onChange={handleFormChange}
                                />
                            </InputGroup>
                        </Form.Group>
                        <div className="d-flex justify-content-end">
                            <Button variant="blue" type="submit" className='py-2 px-5 w-100 rounded-35'>
                                Update
                            </Button>
                        </div>
                    </Form>
                </Modal.Body>
            </Modal>

            <ModalOperation
                show={showLoader}
                handleClose={handleCloseLoader}
                title={loaderState.title}
                description={loaderState.description}
                loading={loaderState.loading}
                successMessage={loaderState.successMessage}
                confirmAction={loaderState.confirmAction}
                handleConfirm={loaderState.handleConfirm}
            />
        </div>
    );
};

export default ManageTeachers;
