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

const ManageReports = () => {
    const { 
        reports,
        loading, 
        error, 

        totalPages,
        totalData,
        setSearch,
        page, 
        handlePageChange,
        handleLimitsChange,
        handleSearchChange,

        selected,
        show,
        handleShow,
        handleClose,
        formatLocalDate
     } = useReports();

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

    return (
        <div className='admin-teachers'>
            <h2 className='page-title strip'>Issue Reports</h2>
            <p className='page-desc'>Description of Issue Reports.</p>
            <Row className='mb-45'>
                <Col xs={12}>
                    <div className="cards">
                        <div className="cards-title">
                            <h4>Issue Reports</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>No</th>
                                    <th>Email</th>
                                    <th className='text-nowrap'>Full Name</th>
                                    <th>Report Message</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>
                                    ):(
                                        reports.length > 0?(
                                            reports.map((report, index) => (
                                                <tr key={index}>
                                                    <td>{index + 1}</td>
                                                    <td>{report.USER_EMAIL}</td>
                                                    <td>{report.USER_NAME}</td>
                                                    <td>
                                                        <div className='truncate truncate-2'>
                                                            {report.REPORTS}
                                                        </div>
                                                    </td>
                                                    <td className='text-center action-col'>
                                                        <Button size='sm' className='btn-view' onClick ={ () => {handleShow(report)}}>
                                                            <i className="bi bi-eye"></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='10' 
                                        onChange={handleLimitsChange}
                                        style={{ width: '50px' }} 
                                    >
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="50">50</option>
                                    </Form.Select>
                                    <small>of {totalData}</small>
                                </div>
                                <TablePaginate
                                    totalPages={totalPages}
                                    currentPage={page}
                                    onPageChange={handlePageChange}
                                />
                            </div>
                        </div>
                    </div>
                </Col>
            </Row>

            <Modal show={show} onHide={handleClose} className='modal-admin' size='lg' centered>
                <Modal.Header closeButton>
                    <Modal.Title>Reports Detail</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form>
                        <Row className='mb-2'>
                            <Form.Group as={Col} controlId="modalGridRole">
                                <Form.Label>Date / Time</Form.Label>
                                <InputGroup className="mb-2 input-group-icon">
                                    <InputGroup.Text><i className="bi bi-calendar-date"></i></InputGroup.Text>
                                    <Form.Control
                                        readOnly
                                        name='time'
                                        defaultValue={selected.TIME_REPORT ? formatLocalDate(selected.TIME_REPORT) : "" || ''}
                                    />
                                </InputGroup>
                            </Form.Group>
                        </Row>
                        <Row className='mb-2'>
                            <Form.Group as={Col} controlId="modalGridRole">
                                <Form.Label>Username</Form.Label>
                                <InputGroup className="mb-2 input-group-icon">
                                    <InputGroup.Text><i className="bi bi-person-vcard"></i></InputGroup.Text>
                                    <Form.Control
                                        readOnly
                                        name='username'
                                        defaultValue={selected.USER_NAME || ''}
                                    />
                                </InputGroup>
                            </Form.Group>
                            <Form.Group as={Col} controlId="modalGridName">
                                <Form.Label>Email</Form.Label>
                                <InputGroup className="mb-2 input-group-icon">
                                    <InputGroup.Text><i className="bi bi-at"></i></InputGroup.Text>
                                    <Form.Control
                                        readOnly
                                        name="email"
                                        defaultValue={selected.USER_EMAIL || ''}
                                    />
                                </InputGroup>
                            </Form.Group>
                        </Row>
                        <Row className="mb-2">
                            <Form.Group as={Col} controlId="formGridEmail">
                                <Form.Label>Material Content</Form.Label>
                                <Form.Control as="textarea" rows={5} className='mb-2' placeholder='Type the meterial content here...'
                                    readOnly
                                    name='report'
                                    defaultValue={selected.REPORTS || ''}
                                />
                            </Form.Group>
                        </Row>
                    </Form>
                </Modal.Body>
            </Modal>
        </div>
    );
};

export default ManageReports;
