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

export default function AvisListPage() {
    const [minGrade, setMinGrade] = useState(0);
    const [maxGrade, setMaxGrade] = useState(10);
    const [sources, setSources] = useState({'borne': true, 'website': true})
    const [filteredReviews, setFilteredREviews] = useState([])

    const {reviews, error, loading} = useReviews();

    useEffect(() => {
        console.log(reviews)
        const newReviews = reviews.filter((review) => review.note_principale >= minGrade && review.note_principale <= maxGrade && sources[review.nom_source])
        setFilteredREviews(newReviews)
    }, [reviews, minGrade, maxGrade, sources])

    useEffect(() => {
      if(minGrade > maxGrade) {
        setMinGrade(maxGrade);
      }
    }, [maxGrade]);
    useEffect(() => {
        if(minGrade > maxGrade) {
            setMaxGrade(minGrade);
        }
    }, [minGrade])
    

    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="Borne"
                                    onChange={(e) => setSources({...sources, 'borne': e.target.checked})}
                                    checked={sources['borne']}
                                />
                                <Form.Check
                                    type="switch"
                                    label="QR Code"
                                    onChange={(e) => setSources({...sources, 'website': e.target.checked})}
                                    checked={sources['website']}
                                />
                            </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(Number(e.target.value))} min="0" max="10" step="1" className={styles.slider}></input>
                                        <input type="range" value={maxGrade} onChange={(e) => setMaxGrade(Number(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>
                        {!loading && !error && <AvisList avis={filteredReviews} />}
                    </Row>
                </Card.Body>
            </Card>
        </Container >
    )
}