import {useParams} from "react-router-dom"
import FormGroup from '@mui/material/FormGroup'
import FormControlLabel from '@mui/material/FormControlLabel'
import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'
import TableContainer from '@mui/material/TableContainer'
import TableHead from '@mui/material/TableHead'
import TableRow from '@mui/material/TableRow'
import Paper from '@mui/material/Paper'
import Switch from '@mui/material/Switch'
import * as Highcharts from 'highcharts'
import highchartsItem from 'highcharts/modules/item-series'
import HighchartsReact from 'highcharts-react-official'
import {useEffect, useState} from "react"

highchartsItem(Highcharts)

function ResultatsTable({blocs, nuances, listes, resultats, siegesParListe}) {
  const voix_listes = resultats.voix_listes
  const listes_triees = listes.toSorted((l1, l2) => {
    return (voix_listes[l2.numero] || 0) - (voix_listes[l1.numero] || 0)
  })

  return <>
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Numéro</TableCell>
            <TableCell>Liste</TableCell>
            <TableCell colSpan={2}>Nuance</TableCell>
            <TableCell colSpan={2}>Bloc</TableCell>
            <TableCell>Voix</TableCell>
            <TableCell>% Inscrit⋅es</TableCell>
            <TableCell>% Exprimé⋅es</TableCell>
            <TableCell>Sièges</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {listes_triees.map((liste) => (
            <TableRow key={liste.numero}>
              <TableCell>{liste.numero}</TableCell>
              <TableCell>{liste.nom}</TableCell>
              <TableCell sx={{backgroundColor: nuances.filter(nuance => nuance.code === liste.nuance)[0].couleur, padding: "0.2em"}}></TableCell>
              <TableCell>{liste.nuance}</TableCell>
              <TableCell sx={{backgroundColor: blocs.filter(bloc => bloc.nom === liste.bloc)[0].couleur, padding: "0.2em"}}></TableCell>
              <TableCell>{liste.bloc}</TableCell>
              <TableCell>{voix_listes[liste.numero] || 0}</TableCell>
              <TableCell>{(100 * (voix_listes[liste.numero] || 0) / resultats.inscrits).toFixed(2)} %</TableCell>
              <TableCell>{(100 * (voix_listes[liste.numero] || 0) / resultats.exprimes).toFixed(2)} %</TableCell>
              <TableCell>{siegesParListe[liste.numero]}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  </>
}


function ParticipationTable({resultats}) {
  return <>
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell></TableCell>
            <TableCell>Nombre</TableCell>
            <TableCell>% Inscrit⋅es</TableCell>
            <TableCell>% Votant⋅es</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow key={"Inscrit⋅es"}>
            <TableCell>Inscrit⋅es</TableCell>
            <TableCell>{resultats.inscrits}</TableCell>
            <TableCell></TableCell>
            <TableCell></TableCell>
          </TableRow>
          <TableRow key={"Abstentions"}>
            <TableCell>Abstention</TableCell>
            <TableCell>{resultats.abstentions}</TableCell>
            <TableCell>{(100 * resultats.abstentions / resultats.inscrits).toFixed(2)} %</TableCell>
            <TableCell></TableCell>
          </TableRow>
          <TableRow key={"Votant⋅es"}>
            <TableCell>Votant⋅es</TableCell>
            <TableCell>{resultats.votants}</TableCell>
            <TableCell>{(100 * resultats.votants / resultats.inscrits).toFixed(2)} %</TableCell>
            <TableCell></TableCell>
          </TableRow>
          <TableRow key={"Blancs"}>
            <TableCell>Blancs</TableCell>
            <TableCell>{resultats.blancs}</TableCell>
            <TableCell>{(100 * resultats.blancs / resultats.inscrits).toFixed(2)} %</TableCell>
            <TableCell>{(100 * resultats.blancs / resultats.votants).toFixed(2)} %</TableCell>
          </TableRow>
          <TableRow key={"Nuls"}>
            <TableCell>Nuls</TableCell>
            <TableCell>{resultats.nuls}</TableCell>
            <TableCell>{(100 * resultats.nuls / resultats.inscrits).toFixed(2)} %</TableCell>
            <TableCell>{(100 * resultats.nuls / resultats.votants).toFixed(2)} %</TableCell>
          </TableRow>
          <TableRow key={"Exprimés"}>
            <TableCell>Exprimés</TableCell>
            <TableCell>{resultats.exprimes}</TableCell>
            <TableCell>{(100 * resultats.exprimes / resultats.inscrits).toFixed(2)} %</TableCell>
            <TableCell>{(100 * resultats.exprimes / resultats.votants).toFixed(2)} %</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </TableContainer>
  </>
}

export default function Election2024({typeResultats = "france"}) {
  const {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 [siegesParListe, setSiegesParListe] = useState({})
  const [voixParBloc, setVoixParBloc] = useState([])
  const [voixParNuance, setVoixParNuance] = useState([])
  const [siegesParBloc, setSiegesParBloc] = useState([])
  const [siegesParNuance, setSiegesParNuance] = useState([])
  const [categoriesVoix, setCategoriesVoix] = useState([])
  const [dataVoix, setDataVoix] = useState([])
  const [dataSieges, setDataSieges] = useState([])

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

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

  useEffect(() => {
    const parBloc = {}
    const parNuance = {}
    for (let bloc of blocs) {
      parBloc[bloc.nom] = 0
    }
    for (let nuance of nuances) {
      parNuance[nuance.code] = 0
    }

    for (let liste of listes) {
      parBloc[liste.bloc] += resultats.voix_listes[liste.numero] || 0
      parNuance[liste.nuance] += resultats.voix_listes[liste.numero] || 0
    }

    setVoixParBloc(parBloc)
    setVoixParNuance(parNuance)
  }, [blocs, nuances, listes, resultats])

  useEffect(() => {
    const categories = []
    const data = []
    if (grouperParBloc) {
      for (let bloc of blocs) {
        categories.push(bloc.nom)
        data.push([bloc.nom, voixParBloc[bloc.nom], bloc.couleur, bloc.nom])
      }
    }
    else {
      for (let nuance of nuances) {
        categories.push(nuance.nom)
        data.push([nuance.nom, voixParNuance[nuance.code], nuance.couleur, nuance.nom])
      }
    }
    setCategoriesVoix(categories)
    setDataVoix(data)
  }, [voixParBloc, voixParNuance, grouperParBloc])

  useEffect(() => {
    const MAX_SIEGES = 81
    const sieges = {}
    const listesElues = []
    let siegesAffectes = 0
    let totalVoix = resultats.exprimes
    for (let liste of listes) {
      const voix = resultats.voix_listes[liste.numero] || 0
      if (voix / resultats.exprimes < 0.05 && !retirerSeuil) {
        // Barre des 5 % non franchie
        totalVoix -= voix
        sieges[liste.numero] = 0
      }
      else {
        listesElues.push(liste)
      }
    }

    if (listesElues.length === 0)
      return

    for (let liste of listesElues) {
      const voix = resultats.voix_listes[liste.numero] || 0
      sieges[liste.numero] = Math.floor(MAX_SIEGES * voix / totalVoix)
      siegesAffectes += sieges[liste.numero]
    }

    while (siegesAffectes < MAX_SIEGES) {
      // Méthode de la plus forte moyenne pour affecter les sièges restants
      let maxMoyenne = 0
      let listeElue = null
      for (let liste of listesElues) {
        if (sieges[liste.numero] < MAX_SIEGES) {
          const voix = resultats.voix_listes[liste.numero] || 0
          const moyenne = voix / (sieges[liste.numero] + 1)
          if (moyenne > maxMoyenne) {
            maxMoyenne = moyenne
            listeElue = liste
          }
        }
      }
      sieges[listeElue.numero]++
      siegesAffectes++
    }

    setSiegesParListe(sieges)
  }, [listes, resultats, retirerSeuil])

  useEffect(() => {
    const parBloc = {}
    const parNuance = {}
    for (let bloc of blocs) {
      parBloc[bloc.nom] = 0
    }
    for (let nuance of nuances) {
      parNuance[nuance.code] = 0
    }

    for (let liste of listes) {
      parBloc[liste.bloc] += siegesParListe[liste.numero] || 0
      parNuance[liste.nuance] += siegesParListe[liste.numero] || 0
    }

    setSiegesParBloc(parBloc)
    setSiegesParNuance(parNuance)
  }, [blocs, nuances, listes, siegesParListe])

  useEffect(() => {
    const data = []
    if (grouperParBloc) {
      for (let bloc of blocs) {
        data.push([bloc.nom, siegesParBloc[bloc.nom], bloc.couleur, bloc.nom])
      }
    }
    else {
      for (let nuance of nuances) {
        data.push([nuance.nom, siegesParNuance[nuance.code], nuance.couleur, nuance.nom])
      }
    }
    setDataSieges(data)
  }, [blocs, nuances, siegesParBloc, siegesParNuance, grouperParBloc])

  const compositonOptions = {
    chart: {
      type: 'item'
    },
    title: {
      text: 'Projection eurodéputé⋅es français⋅es 2024'
    },
    legend: {
      labelFormat: '{name} <span style="opacity: 0.4">{y}</span>'
    },
    series: [{
      name: 'Nombre de sièges',
      keys: ['name', 'y', 'color', 'label'],
      data: dataSieges,
      dataLabels: {
        enabled: false,
        format: '{point.label}'
      },
      // Circular options
      center: ['50%', '88%'],
      size: '170%',
      startAngle: -100,
      endAngle: 100
    }]
  }

  const scoreOptions = {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Résultats des élections européennes 2024 en France',
    },
    legend: {
      labelFormat: '{name} <span style="opacity: 0.4">{x}</span>'
    },
    xAxis: {
      categories: categoriesVoix,
    },
    series: [{
      name: "Nombre de voix",
      keys: ['name', 'y', 'color', 'label'],
      data: dataVoix,
    }]
  }

  return <>
    <FormGroup>
      <FormControlLabel control={<Switch checked={grouperParBloc} onChange={event => setGrouperParBloc(event.target.checked)} inputProps={{ 'aria-label': 'controlled' }} />}
                        label="Grouper par bloc plutôt que nuance politique" />
    </FormGroup>
    <FormGroup>
      <FormControlLabel control={<Switch checked={retirerSeuil} onChange={event => setRetirerSeuil(event.target.checked)} inputProps={{ 'aria-label': 'controlled' }} />}
                        label="Retirer le seuil des 5 %" />
    </FormGroup>
    <HighchartsReact
      id="composition-eurodeputees"
      highcharts={Highcharts}
      options={scoreOptions}
    />
    <HighchartsReact
      id="composition-eurodeputees"
      highcharts={Highcharts}
      options={compositonOptions}
    />
    <ResultatsTable blocs={blocs} nuances={nuances} listes={listes} resultats={resultats} siegesParListe={siegesParListe} />
    <ParticipationTable resultats={resultats} />
  </>
};