import {trierCandidats, regrouperVoix} from "../utils"
import TableContainer from "@mui/material/TableContainer"
import Paper from "@mui/material/Paper"
import Table from "@mui/material/Table"
import TableHead from "@mui/material/TableHead"
import TableRow from "@mui/material/TableRow"
import TableCell from "@mui/material/TableCell"
import TableBody from "@mui/material/TableBody"
import {useEffect, useMemo, useState} from "react"
import {GeoJSON, MapContainer, Popup, TileLayer, useMap} from "react-leaflet"
import bbox from "geojson-bbox"
import {FormControl, InputLabel, MenuItem, Select} from "@mui/material"
import * as Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import Switch from "@mui/material/Switch";
import FormControlLabel from "@mui/material/FormControlLabel";


export function HistogrammeVoix({titre, nomCategories, valeurParCategorie, totalExprimes, couleurParCategorie}) {
  const [categoriesVoix, dataVoix] = useMemo(() => {
    const categories = []
    const data = []

    for (let categorie of Object.keys(nomCategories)) {
      if (valeurParCategorie[categorie] !== 0) {
        categories.push(nomCategories[categorie])
        data.push([nomCategories[categorie], valeurParCategorie[categorie], couleurParCategorie[categorie],
          nomCategories[categorie]])
      }
    }

    return [categories, data]
  }, [nomCategories, valeurParCategorie, couleurParCategorie])

  const scoreOptions = {
    chart: {
      type: 'column'
    },
    title: {
      text: titre,
    },
    tooltip: {
      formatter: function () {
        return `<span>${this.x}</span> : <strong>${this.y}</strong> voix (${(100 * this.y / totalExprimes).toFixed(2)} %)<br>`
      }
    },
    xAxis: {
      categories: categoriesVoix,
    },
    series: [{
      name: "Nombre de voix",
      keys: ['name', 'y', 'color', 'label'],
      data: dataVoix,
    }]
  }

  return <HighchartsReact
    highcharts={Highcharts}
    options={scoreOptions}
  />
}

export function CompositionHemicycle({titre, blocs, nuances, siegesParBloc, siegesParNuance, grouperParBloc}) {
  const dataSieges = useMemo(() => {
    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])
      }
    }

    return data
  }, [blocs, nuances, siegesParBloc, siegesParNuance, grouperParBloc])

  const compositonOptions = {
    chart: {
      type: 'item'
    },
    title: {
      text: titre,
    },
    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
    }]
  }

  return <HighchartsReact
    highcharts={Highcharts}
    options={compositonOptions}
  />
}

/**
 * Tableau de participation de l'élection dans la zone concernée
 * @param donnees_t1
 * @param donnees_t2
 * @return {JSX.Element}
 * @constructor
 */
export function TableauParticipation({donnees_t1, donnees_t2 = null}) {
  const headerRow = useMemo(() => {
    if (donnees_t2 && donnees_t2.inscrits) {
      return <TableRow>
        <TableCell></TableCell>
        <TableCell>Nombre tour 1</TableCell>
        <TableCell>% Inscrit⋅es tour 1</TableCell>
        <TableCell>% Votant⋅es tour 1</TableCell>
        <TableCell>Nombre tour 2</TableCell>
        <TableCell>% Inscrit⋅es tour 2</TableCell>
        <TableCell>% Votant⋅es tour 2</TableCell>
      </TableRow>
    }
    else {
      return <TableRow>
        <TableCell></TableCell>
        <TableCell>Nombre</TableCell>
        <TableCell>% Inscrit⋅es</TableCell>
        <TableCell>% Votant⋅es</TableCell>
      </TableRow>
    }
  }, [donnees_t2])

  const bodyRows = useMemo(() => {
    if (donnees_t2 && donnees_t2.inscrits) {
      return <>
        <TableRow key={"Inscrit⋅es"}>
          <TableCell>Inscrit⋅es</TableCell>
          <TableCell>{donnees_t1.inscrits}</TableCell>
          <TableCell></TableCell>
          <TableCell></TableCell>
          <TableCell>{donnees_t2.inscrits}</TableCell>
          <TableCell></TableCell>
          <TableCell></TableCell>
        </TableRow>
        <TableRow key={"Abstentions"}>
          <TableCell>Abstention</TableCell>
          <TableCell>{donnees_t1.abstentions}</TableCell>
          <TableCell>{(100 * donnees_t1.abstentions / donnees_t1.inscrits).toFixed(2)} %</TableCell>
          <TableCell></TableCell>
          <TableCell>{donnees_t2.abstentions}</TableCell>
          <TableCell>{(100 * donnees_t2.abstentions / donnees_t2.inscrits).toFixed(2)} %</TableCell>
          <TableCell></TableCell>
        </TableRow>
        <TableRow key={"Votant⋅es"}>
          <TableCell>Votant⋅es</TableCell>
          <TableCell>{donnees_t1.votants}</TableCell>
          <TableCell>{(100 * donnees_t1.votants / donnees_t1.inscrits).toFixed(2)} %</TableCell>
          <TableCell></TableCell>
          <TableCell>{donnees_t2.votants}</TableCell>
          <TableCell>{(100 * donnees_t2.votants / donnees_t2.inscrits).toFixed(2)} %</TableCell>
          <TableCell></TableCell>
        </TableRow>
        <TableRow key={"Blancs"}>
          <TableCell>Blancs</TableCell>
          <TableCell>{donnees_t1.blancs}</TableCell>
          <TableCell>{(100 * donnees_t1.blancs / donnees_t1.inscrits).toFixed(2)} %</TableCell>
          <TableCell>{(100 * donnees_t1.blancs / donnees_t1.votants).toFixed(2)} %</TableCell>
          <TableCell>{donnees_t2.blancs}</TableCell>
          <TableCell>{(100 * donnees_t2.blancs / donnees_t2.inscrits).toFixed(2)} %</TableCell>
          <TableCell>{(100 * donnees_t2.blancs / donnees_t2.votants).toFixed(2)} %</TableCell>
        </TableRow>
        <TableRow key={"Nuls"}>
          <TableCell>Nuls</TableCell>
          <TableCell>{donnees_t1.nuls}</TableCell>
          <TableCell>{(100 * donnees_t1.nuls / donnees_t1.inscrits).toFixed(2)} %</TableCell>
          <TableCell>{(100 * donnees_t1.nuls / donnees_t1.votants).toFixed(2)} %</TableCell>
          <TableCell>{donnees_t2.nuls}</TableCell>
          <TableCell>{(100 * donnees_t2.nuls / donnees_t2.inscrits).toFixed(2)} %</TableCell>
          <TableCell>{(100 * donnees_t2.nuls / donnees_t2.votants).toFixed(2)} %</TableCell>
        </TableRow>
        <TableRow key={"Exprimés"}>
          <TableCell>Exprimés</TableCell>
          <TableCell>{donnees_t1.exprimes}</TableCell>
          <TableCell>{(100 * donnees_t1.exprimes / donnees_t1.inscrits).toFixed(2)} %</TableCell>
          <TableCell>{(100 * donnees_t1.exprimes / donnees_t1.votants).toFixed(2)} %</TableCell>
          <TableCell>{donnees_t2.exprimes}</TableCell>
          <TableCell>{(100 * donnees_t2.exprimes / donnees_t2.inscrits).toFixed(2)} %</TableCell>
          <TableCell>{(100 * donnees_t2.exprimes / donnees_t2.votants).toFixed(2)} %</TableCell>
        </TableRow>
      </>
    } else {
      return <>
        <TableRow key={"Inscrit⋅es"}>
          <TableCell>Inscrit⋅es</TableCell>
          <TableCell>{donnees_t1.inscrits}</TableCell>
          <TableCell></TableCell>
          <TableCell></TableCell>
        </TableRow>
        <TableRow key={"Abstentions"}>
          <TableCell>Abstention</TableCell>
          <TableCell>{donnees_t1.abstentions}</TableCell>
          <TableCell>{(100 * donnees_t1.abstentions / donnees_t1.inscrits).toFixed(2)} %</TableCell>
          <TableCell></TableCell>
        </TableRow>
        <TableRow key={"Votant⋅es"}>
          <TableCell>Votant⋅es</TableCell>
          <TableCell>{donnees_t1.votants}</TableCell>
          <TableCell>{(100 * donnees_t1.votants / donnees_t1.inscrits).toFixed(2)} %</TableCell>
          <TableCell></TableCell>
        </TableRow>
        <TableRow key={"Blancs"}>
          <TableCell>Blancs</TableCell>
          <TableCell>{donnees_t1.blancs}</TableCell>
          <TableCell>{(100 * donnees_t1.blancs / donnees_t1.inscrits).toFixed(2)} %</TableCell>
          <TableCell>{(100 * donnees_t1.blancs / donnees_t1.votants).toFixed(2)} %</TableCell>
        </TableRow>
        <TableRow key={"Nuls"}>
          <TableCell>Nuls</TableCell>
          <TableCell>{donnees_t1.nuls}</TableCell>
          <TableCell>{(100 * donnees_t1.nuls / donnees_t1.inscrits).toFixed(2)} %</TableCell>
          <TableCell>{(100 * donnees_t1.nuls / donnees_t1.votants).toFixed(2)} %</TableCell>
        </TableRow>
        <TableRow key={"Exprimés"}>
          <TableCell>Exprimés</TableCell>
          <TableCell>{donnees_t1.exprimes}</TableCell>
          <TableCell>{(100 * donnees_t1.exprimes / donnees_t1.inscrits).toFixed(2)} %</TableCell>
          <TableCell>{(100 * donnees_t1.exprimes / donnees_t1.votants).toFixed(2)} %</TableCell>
        </TableRow>
      </>
    }
  }, [donnees_t1, donnees_t2])

  return <>
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          {headerRow}
        </TableHead>
        <TableBody>
          {bodyRows}
        </TableBody>
      </Table>
    </TableContainer>
  </>
}

export function GroupementParBloc({grouperParBloc, setGrouperParBloc}) {
  return <FormControlLabel control={<Switch checked={grouperParBloc} onChange={event => setGrouperParBloc(event.target.checked)} inputProps={{ 'aria-label': 'controlled' }} />}
                          label="Grouper par bloc plutôt que nuance politique" />
}

export function RetirerSeuil({retirerSeuil, setRetirerSeuil}) {
  return <FormControlLabel control={<Switch checked={retirerSeuil} onChange={event => setRetirerSeuil(event.target.checked)} inputProps={{ 'aria-label': 'controlled' }} />}
                           label="Retirer le seuil des 5 %" />
}

export function SelectionTour({tour, setTour}) {
  return <FormControl>
    <InputLabel>
      Zone à afficher
  </InputLabel>
    <Select value={tour}
            onChange={event => setTour(parseInt(event.target.value.toString()))}
            label="Tour">
      <MenuItem value="1">Tour 1</MenuItem>
      <MenuItem value="2">Tour 2</MenuItem>
    </Select>
  </FormControl>
}

export function SelectionAffichage({typeResultats, typeSousZone, setTypeSousZone}) {
  const items = useMemo(() => {
    const items = []
    if (typeResultats === "france") {
      setTypeSousZone("region")
      items.push(<MenuItem value="region">Région</MenuItem>)
    }

    if (typeResultats === "france" || typeResultats === "region") {
      if (typeResultats !== "france")
        setTypeSousZone("departement")
      items.push(<MenuItem value="departement">Département</MenuItem>)
    }

    if (typeResultats === "france" || typeResultats === "region" || typeResultats === "departement") {
      if (typeResultats !== "france" && typeResultats !== "region")
        setTypeSousZone("circonscription")
      items.push(<MenuItem value="circonscription">Circonscription</MenuItem>)
    }

    if (typeResultats === "departement") {
      items.push(<MenuItem value="commune">Communes</MenuItem>)
    }

    if (typeResultats === "circonscription" || typeResultats === "commune" || typeResultats === "bureau_vote") {
      setTypeSousZone("bureau_vote")
      items.push(<MenuItem value="bureau_vote">Bureau de vote</MenuItem>)
    }

    return items
  }, [typeResultats, setTypeSousZone])

  return <FormControl>
    <InputLabel>
      Zone à afficher
  </InputLabel>
    <Select value={typeSousZone}
            onChange={event => setTypeSousZone(event.target.value)}
            label="Zone à afficher">
      {items}
    </Select>
  </FormControl>
}


function ZoneGeoJSON({typeElection, anneeElection, resultatsZone, typeSousZone,
                       candidats, blocs, nuances, tour, grouperParBloc = false, candidatKey = "numero"}) {
  const sousZoneInfo = resultatsZone.zone
  const donnees = useMemo(() => {
    return resultatsZone ? (tour === 1 ? resultatsZone.tour1 : resultatsZone.tour2) : {}
  }, [resultatsZone, tour])

  const [idZone, nomZone] = useMemo(() => {
    if (!sousZoneInfo)
      return ["", ""]

    if (typeSousZone === "region" || typeSousZone === "departement" || typeSousZone === "commune")
      return [sousZoneInfo.code_insee, sousZoneInfo.nom]
    else if (typeSousZone === "circonscription")
      return [sousZoneInfo.id, `Circonscription ${sousZoneInfo.id}`]
    else if (typeSousZone === "bureau_vote")
      return [sousZoneInfo.id, sousZoneInfo.libelle]
    else
      return ["", ""]
  }, [typeSousZone, sousZoneInfo])

  const [candidatsZone, setCandidatsZone] = useState(candidats)
  useEffect(() => {
    if (typeElection === "legislatives" && (typeSousZone === "circonscription" || typeSousZone === "bureau_vote") && sousZoneInfo.id) {
      const circo_id = typeSousZone === "circonscription" ? sousZoneInfo.id : sousZoneInfo.circonscription
      fetch(`/data/resultats/${typeElection}/${anneeElection}/candidats/${circo_id}.json`)
        .then(response => response.json())
        .then(data => setCandidatsZone(data))
    }
  }, [typeElection, anneeElection, typeSousZone, sousZoneInfo])

  const voixCandidats = useMemo(() => donnees?.voix ?? {}, [donnees])
  const candidatsTries = trierCandidats(candidatsZone, voixCandidats, candidatKey)

  const dejaGroupesParNuance = typeElection === "legislatives"
    && (typeSousZone !== "circonscription" && typeSousZone !== "bureau_vote")
  const [voixParBloc, voixParNuance] = regrouperVoix(voixCandidats, candidatsZone, blocs, nuances,
    dejaGroupesParNuance)

  let couleur = 'grey'
  if (grouperParBloc) {
    let maxVoix = 0
    for (let bloc of blocs) {
      if (voixParBloc[bloc.nom] > maxVoix) {
        maxVoix = voixParBloc[bloc.nom]
        couleur = bloc.couleur
      }
    }
  }
  else {
    let maxVoix = 0
    for (let nuance of nuances) {
      if (voixParNuance[nuance.code] > maxVoix) {
        maxVoix = voixParNuance[nuance.code]
        couleur = nuance.couleur
      }
    }
  }

  return <GeoJSON
    data={{'type': "Feature", 'geometry': resultatsZone.zone.geometry}}
    style={{fillColor: couleur, fillOpacity: 0.5, color: 'white', weight: 1}}>
    <Popup>
      <strong><a href={`/elections/${typeElection}/${anneeElection}/${typeSousZone}/${idZone}/`}>{nomZone}</a></strong>
      <ul>
        {candidatsTries.slice(0, 5).map(candidat =>
          <li key={candidat[candidatKey]}>
            {candidat.nom} : {voixCandidats[candidat[candidatKey]]} ({(100 * voixCandidats[candidat[candidatKey]] / donnees.exprimes).toFixed(2)} %)
          </li>)}
      </ul>
    </Popup>
  </GeoJSON>
}

function ContenuCarte({typeElection, anneeElection, zoneInfo, typeSousZone, candidats, blocs, nuances, tour,
                        grouperParBloc = false, candidatKey = "numero"}) {
  const map = useMap()
  const [resultatsZones, setResultatsZones] = useState([])

  const zones = useMemo(() => {
    if (!zoneInfo)
      return []

    if (typeSousZone === "region")
      return zoneInfo?.regions ?? []
    else if (typeSousZone === "departement")
      return zoneInfo?.departements ?? []
    else if (typeSousZone === "circonscription")
      return zoneInfo?.circonscriptions ?? []
    else if (typeSousZone === "commune")
      return zoneInfo?.communes ?? []
    else if (typeSousZone === "bureau_vote") {
      if (zoneInfo.type === "bureau_vote")
        return zoneInfo ? [zoneInfo.id] : []
      else
        return zoneInfo?.bureaux_vote ?? []
    }
    else
      return []
  }, [zoneInfo, typeSousZone])

  useEffect(() => {
    if (zoneInfo.type === "france")
      return

    const geometry = zoneInfo.geometry
    if (geometry) {
      // On centre la carte sur la zone
      const geometry_bbox = bbox(geometry)
      map.fitBounds([[geometry_bbox[1], geometry_bbox[0]], [geometry_bbox[3], geometry_bbox[2]]])
    }
  }, [zoneInfo, map])

  useEffect(() => {
    if (!zones)
      return

    setResultatsZones(resultatsZones => [])

    zones.forEach(zoneId => {
      fetch(`/data/resultats/${typeElection}/${anneeElection}/${typeSousZone}/${zoneId}.json`)
        .then(response => response.json())
        .then(resultatsZone => setResultatsZones(resultatsZones => [...resultatsZones, resultatsZone]))
    })
  }, [typeElection, anneeElection, typeSousZone, zones])

  function getZoneIdentifier(typeSousZone, zone) {
    if (typeSousZone === "region" || typeSousZone === "departement" || typeSousZone === "commune")
      return zone.code_insee
    else if (typeSousZone === "circonscription" || typeSousZone === "bureau_vote")
      return zone.id
    else
      return ""
  }

  return <>
    {resultatsZones.filter(resultatsZone => resultatsZone.zone.geometry['type'])
      .map(resultatsZone =>
      <ZoneGeoJSON key={getZoneIdentifier(typeSousZone, resultatsZone.zone)}
                   typeElection={typeElection} anneeElection={anneeElection}
                   resultatsZone={resultatsZone} typeSousZone={typeSousZone} candidats={candidats}
                   blocs={blocs} nuances={nuances} tour={tour} grouperParBloc={grouperParBloc} candidatKey={candidatKey} />)}
  </>
}

export function CarteResultats({typeElection, anneeElection, typeResultats, zoneInfo, typeSousZone, candidats,
                                 blocs, nuances, tour, grouperParBloc = false, candidatKey = "numero"}) {
  const center = typeResultats === "france" ? [46.603354, 1.888334] : [0, 0]

  return <>
    <MapContainer center={center} zoom={6} style={{height: "90vh"}}>
      <TileLayer
        attribution='&copy; Les contributeur⋅rices <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <ContenuCarte typeElection={typeElection} anneeElection={anneeElection}
                    zoneInfo={zoneInfo} typeSousZone={typeSousZone} candidats={candidats}
                    blocs={blocs} nuances={nuances} tour={tour} grouperParBloc={grouperParBloc} candidatKey={candidatKey} />
  </MapContainer>
  </>
}