import {useParams} from "react-router-dom"
import {AppBar, Container, Toolbar} from "@mui/material"
import * as Highcharts from 'highcharts'
import highchartsItem from 'highcharts/modules/item-series'
import {useEffect, useMemo, useState} from "react"
import {
  SelectionAffichage,
  TableauParticipation,
  CarteResultats,
  HistogrammeVoix, CompositionHemicycle, GroupementParBloc, RetirerSeuil
} from "./includes/composants_elections"
import {TableauResultatsEuropeennes} from "./includes/composants_elections_europeennes"
import {calculerSieges, getNomZone, regrouperVoix} from "./utils"
import 'leaflet/dist/leaflet.css'


highchartsItem(Highcharts)

export default function ElectionsEuropeennes2024() {
  const {typeResultats, zoneId} = useParams()

  const [grouperParBloc, setGrouperParBloc] = useState(false)
  const [retirerSeuil, setRetirerSeuil] = useState(false)
  const [blocs, setBlocs] = useState([])
  const [nuances, setNuances] = useState([])
  const [listes, setListes] = useState([])
  const [resultats, setResultats] = useState([])
  const [typeSousZone, setTypeSousZone] = useState("region")
  const tour = 1

  useEffect(() => {
    fetch("/data/resultats/europeennes/2024/blocs.json").then(response => response.json())
      .then(data => setBlocs(data))
    fetch("/data/resultats/europeennes/2024/nuances.json").then(response => response.json())
      .then(data => setNuances(data))
    fetch("/data/resultats/europeennes/2024/listes.json").then(response => response.json())
      .then(data => setListes(data))

    if (typeResultats === "france") {
      fetch("/data/resultats/europeennes/2024/france.json").then(response => response.json())
        .then(data => setResultats(data))
    }
    else {
      fetch(`/data/resultats/europeennes/2024/${typeResultats}/${zoneId}.json`)
        .then(response => response.json())
        .then(data => setResultats(data))
    }
  }, [typeResultats, zoneId])

  const zoneInfo = useMemo(() => resultats?.zone ?? {}, [resultats])
  const nomZone = useMemo(() => getNomZone(typeResultats, zoneInfo), [typeResultats, zoneInfo])

  const donnees = useMemo(() => {
    if (tour === 1)
      return resultats?.tour1 ?? {}
    else if (tour === 2)
      return resultats?.tour2 ?? {}
    else
      return {}
  }, [resultats, tour])
  const [voixParBloc, voixParNuance] = regrouperVoix(donnees.voix, listes, blocs, nuances)

  const siegesParListe = calculerSieges(listes, donnees, retirerSeuil ? 0 : 0.05)
  const [siegesParBloc, siegesParNuance] = regrouperVoix(siegesParListe, listes, blocs, nuances)

  return <>
    <AppBar position="sticky">
      <Toolbar>
        <GroupementParBloc grouperParBloc={grouperParBloc} setGrouperParBloc={setGrouperParBloc} />
        <RetirerSeuil retirerSeuil={retirerSeuil} setRetirerSeuil={setRetirerSeuil} />
        <SelectionAffichage typeResultats={typeResultats} typeSousZone={typeSousZone} setTypeSousZone={setTypeSousZone} />
      </Toolbar>
    </AppBar>
    <Container>
      <HistogrammeVoix titre={`Résultats des élections européennes 2024 : ${nomZone}`}
                       resultats={donnees} voixParNuance={voixParNuance} voixParBloc={voixParBloc}
                       blocs={blocs} nuances={nuances} grouperParBloc={grouperParBloc} />
      <CompositionHemicycle titre={`Eurodéputé⋅es français⋅es dans l'hémicycle européen 2024 : ${nomZone}`}
                            blocs={blocs} nuances={nuances} siegesParBloc={siegesParBloc} siegesParNuance={siegesParNuance}
                            grouperParBloc={grouperParBloc} />
      <TableauResultatsEuropeennes blocs={blocs} nuances={nuances} listes={listes} resultats={donnees} siegesParListe={siegesParListe} />
      <TableauParticipation resultats={donnees} />
      <CarteResultats typeElection={"europeennes"} anneeElection={"2024"} typeResultats={typeResultats} zoneInfo={zoneInfo}
                      typeSousZone={typeSousZone} candidats={listes} blocs={blocs} nuances={nuances} tour={tour}
                      grouperParBloc={grouperParBloc} />
    </Container>
  </>
}