import React, { useEffect, useState } from 'react'
import { Card, Container, Form, Row, Table } from 'react-bootstrap'
import AvisList from '../../components/AvisList';
import styles from '../../styles/AvisListPage.module.css'

export default function AvisListPage() {
    const [minGrade, setMinGrade] = useState(0);
    const [maxGrade, setMaxGrade] = useState(10);

    useEffect(() => {
      if(minGrade > maxGrade) {
        setMinGrade(maxGrade);
      }
    }, [maxGrade]);
    useEffect(() => {
        if(minGrade > maxGrade) {
            setMaxGrade(minGrade);
        }
    }, [minGrade])
    
    const [avis, setAvis] = useState([
        { id: 0, date: "2023-02-11", grade: 10, comment: "lorem ipsum lorem ipsum" },
        { id: 1, date: "2023-02-11", grade: 10, comment: "Lorem ipsum lorem ipsum" },
        { id: 2, date: "2023-02-11", grade: 10, comment: "Lorem ipsum lorem ipsum" },
        { id: 3, date: "2023-02-11", grade: 10, comment: "Lorem ipsum lorem ipsum" }
    ])

    return (
        <Container fluid>
            <Card>
                <Card.Header>Tous les avis</Card.Header>
                <Card.Body>
                    <Row>
                        <Form>
                            <Form.Group>
                                <Form.Label>Types d'avis</Form.Label>
                                <Form.Check
                                    type="switch"
                                    label="Automatique"
                                />
                                <Form.Check
                                    type="switch"
                                    label="Manuel"
                                />
                            </Form.Group>
                            <Form.Group>
                                <Form.Label>Note</Form.Label>
                                <div  className='d-flex flex-row justify-content-around col-md-6'>
                                    <div>Min : {minGrade}/10</div>
                                    <div className={styles.sliderContainer}>
                                        <input type="range" value={minGrade} onChange={(e) => setMinGrade(e.target.value)} min="0" max="10" step="1" className={styles.slider}></input>
                                        <input type="range" value={maxGrade} onChange={(e) => setMaxGrade(e.target.value)} min="0" max="10" step="1" className={styles.slider}></input>
                                    </div>
                                    <div>Max : {maxGrade}/10</div>
                                </div>
                            </Form.Group>
                        </Form>
                    </Row>
                    <Row>
                        <AvisList avis={avis} />
                    </Row>
                </Card.Body>
            </Card>
        </Container >
    )
}