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

import successIllustration from '../../../../assets/images/illustration/successModal.png'

const StudentFeedback = () => {
    const { progressId } = useParams();
    const { 
        progress,
        section,
        topic,
        name,
        nisn,
        loading, 
        error, 

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

        feedback,
        setFeedback,
        loadingFeedback,
        successFeedback,
        handleSubmitFeedback,
        showFeedback,
        handleShowFeedback,
        handleCloseFeedback,
    } = useProgressStudent(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='/portal/feedback'>
                        <i className="bi bi-arrow-90deg-left"></i>
                    </Button>
                    <Breadcrumb className='custom-breadcrumb'>
                        <Breadcrumb.Item href="/portal/feedback">Monitoring Progress</Breadcrumb.Item>
                        <Breadcrumb.Item active>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 me-3 bg-white' onClick={handleShowFeedback}>
                        <i className="bi bi-chat-left-text me-2"></i>Give Feedback
                    </Button>
                    <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 PDF
                    </Button>
                </Col>
            </Row>
            <Row className='mb-45'>
                <Col>
                    <div className="cards">
                        <div className="cards-title">
                            <h4 className='mb-2'>{nisn} - {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>No</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={6} 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>{index + 1}</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={6} 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>

            <Modal centered show={showFeedback} onHide={handleCloseFeedback} size='lg'>
                {successFeedback?(
                    <Modal.Body className='p-4 d-flex flex-column items-center'>
                        <h4 className='mb-4 fw-bold text-dark'>Feedback <span className='text-blue'>sent</span>!</h4>
                        <img src={successIllustration} alt="" style={{width:'20vw'}}/>
                        <p className='my-3 text-muted fw-light'>Thank you for letting us know. We’ll investigate the issue and work on resolving it promptly.</p>
                        <Button variant="gd" className="py-2 px-5 mt-4 w-50 rounded-35" onClick={handleCloseFeedback}>Done</Button>
                    </Modal.Body>
                ):(
                    <>
                        <Modal.Header closeButton>
                            <Modal.Title>Feedback</Modal.Title>
                        </Modal.Header>
                        <Modal.Body className='p-4 d-flex flex-column items-center'>
                            <Form onSubmit={handleSubmitFeedback} className="w-100 p-3 border rounded-3">
                                <Form.Group className="mb-3" controlId="feedbackTextarea">
                                    <Form.Label className="text-black fw-bold">What insights or comments would you like to share with the student?</Form.Label>
                                    <Form.Control
                                        as="textarea"
                                        rows={5}
                                        placeholder="Type your feedback here..."
                                        value={feedback}
                                        onChange={(e) => setFeedback(e.target.value)}
                                        required
                                    />
                                </Form.Group>
                                <Button variant="gd" type="submit" className="py-2 px-5 w-100 rounded-35" disabled={loadingFeedback || !feedback}>
                                    {loadingFeedback ? <Spinner animation="border" size="sm" /> : 'SEND'}
                                </Button>
                            </Form>
                        </Modal.Body>
                    </>
                )
                }
            </Modal>
        </div>
    );
};

export default StudentFeedback;
