import React, { useEffect, useState } from 'react'
import { Card, Container, Form, Row  } from 'react-bootstrap';
import StatBarChart from '../components/StatBarChart';
import useStats from '../hooks/stats';

export default function Stats() {
  const [statName,setStatName] = useState("moyenne_globale")
  const [timeInterval, setTimeInterval] = useState("jour")
  const [chartReady, setChartReady] = useState(false);
  const [xlabels, setXlabels] = useState([]);
  const [plotData, setPlotData] = useState([]);

  const {loading, error, stats} = useStats(10,timeInterval);

  useEffect(() => {
    if(!loading && !error) {
      let newXlabels = [];
      let newPlotData = [];
      for(let i = 0; i < stats.length; i++) {
        newXlabels.push(stats[i].date);
        newPlotData.push(stats[i][statName]);
      }
      setXlabels(newXlabels);
      setPlotData(newPlotData);
      setChartReady(true);
    }else {
      setChartReady(false);
    }
  }, [stats, statName, timeInterval, loading, error])


  return (
    <Container fluid>
      <Card>
        <Card.Header>Tous les avis</Card.Header>
        <Card.Body>
          <Row>
            <Form>
              <Form.Group>
                <Form.Label>Statistique</Form.Label>
                <Form.Select value={statName} onChange={(e) => setStatName(e.target.value)}>
                  <option value="moyenne_globale">Moyenne globale</option>
                  <option value="nb_avis">Nombre d'avis</option>
                  <option value="moyenne_site">Moyenne du formulaire</option>
                  <option value = "moyenne_borne">Moyenne sur la borne</option>
                  <option value="dist_sexes">Distribution sexes</option>
                </Form.Select>
              </Form.Group>
              <Form.Group>
                <Form.Label>Periode</Form.Label>
                <Form.Select value={timeInterval} onChange={(e) => setTimeInterval(e.target.value)}>
                  <option value="jour">Jour</option>
                  <option value="semaine">Semaine</option>
                  <option value="mois">Mois</option>
                  <option value = "annee">Année</option>
                </Form.Select>
              </Form.Group>
            </Form>
          </Row>
          <Row>
            {error && <p>Error</p>}
            {chartReady && <StatBarChart data={plotData} labels={xlabels} />}
          </Row>
        </Card.Body>
      </Card>
    </Container>
  )
}