data_france = get_france(selectedlevel, "topojson", year, drom_rapproches, simplification_percent)

button_france = html`
  ${download_button(
    create_url_france(selectedlevel, format, year, drom_rapproches, simplification_percent)
  )}
`

departement_shape = get_departement(
      departement,
      arrondissement ? "COMMUNE_ARRONDISSEMENT" : "COMMUNE",
      "topojson",
      year
    )

data_multiple_departement_combined = {
    if (selected_departements.length == 1){
        return data_multiple_departement
    }
    return mergeGeoJSONs(data_multiple_departement)
}

map_multiple_departement = topohelper.fromGeojson(
    data_multiple_departement_combined,
    {deep: true}
    )
    .project({ proj: l93 })
    .view({
        tooltip: true,
        zoom: true,
        size: [
            availableWidth > smallScreen ? availableWidth*0.4 : availableWidth*0.95, availableHeight * 0.6
    ]})

data_multiple_departement = {

    let topos ;
    
    if (selected_departements.length == 1){
        topos = get_departement(
            selected_departements,
            arrondissement ? "COMMUNE_ARRONDISSEMENT" : "COMMUNE",
            "geojson",
            year,
            simplification_percent
        )
        return topos
    }

    topos = get_multiple_departement(
            selected_departements,
            arrondissement ? "COMMUNE_ARRONDISSEMENT" : "COMMUNE",
            "geojson",
            year,
            simplification_percent
        )
    
    return topos
}

// Function to merge multiple GeoJSON FeatureCollections
function mergeGeoJSONs(geojsonList) {
    // Initialize an empty FeatureCollection
    const mergedGeoJSON = {
        type: "FeatureCollection",
        features: []
    };

    // Loop through all GeoJSON objects in the list
    geojsonList.forEach(geojson => {
        if (geojson.type === "Feature") {
            // If it's a Feature, add directly to the features array
            mergedGeoJSON.features.push(geojson);
        } else if (geojson.type === "FeatureCollection") {
            // If it's a FeatureCollection, add all its features to the features array
            mergedGeoJSON.features = mergedGeoJSON.features.concat(geojson.features);
        }
    });

    return mergedGeoJSON;
}

availableHeight = window.innerHeight
screenHeight = 0.9*(availableHeight - document.getElementById("quarto-header").offsetHeight)
availableWidth = window.innerWidth
mapWidth = (width > 400) ? 0.4*width : 0.95*width 
mapHeight = (width > 400) ? 0.85*screenHeight : 0.5*screenHeight
smallScreen = 500

// Projection Lambert 93 (EPSG: 2154)
l93 = "+proj=lcc +lat_0=46.5 +lon_0=3 +lat_1=49 +lat_2=44 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs"

topohelper = import("https://cdn.jsdelivr.net/npm/topohelper@0.4.3/+esm")

import {download_vectorfile} from "@linogaliana/cartiflette-js"

import {
  button, url_file_available,
  get_france, get_departement, liste_departements,
  get_multiple_departement, create_url_departement, create_url_france,
  to_single_geojson} from "@linogaliana/cartiflette-js"

import {create_projection2154, map_multiple_2154, map_multiple_4326, make_map, print_program_france, print_program_departement_single} from "@linogaliana/cartiflette-doc-utils"

import {
  download_button
  } from "@linogaliana/cartiflette-demo"

import {multiAutoSelect} from "@linogaliana/multi-auto-select"

viewof year = Inputs.select(["2022", "2021"], {label: "Année de la géographie de référence"})

viewof drom_rapproches = Inputs.toggle({label: "Rapprocher les DROM ?", value: true})

viewof selectedlevel = Inputs.select(['DEPARTEMENT', 'REGION', 'BASSIN_VIE', 'AIRE_ATTRACTION_VILLES'], {label: "Zonage désiré:"})

viewof format = Inputs.select(
  ["topojson", "geojson"],
  {label: "Format désiré:"})

viewof simplification_percent = Inputs.range([0, 50], {step: 50, value: 50, label: "Degré de simplification (%)"})

viewof arrondissement = Inputs.toggle({label: "Arrondissement dans les grandes villes ?", value: true})
level_arrondissement = arrondissement ? "COMMUNE_ARRONDISSEMENT" : "COMMUNE"

viewof departement = Inputs.select(liste_departements, {label: "Département à représenter"})

viewof simplification_percent_departement = Inputs.bind(
  Inputs.range([0, 50], {step: 50, value: 50, label: "Degré de simplification (%)"}),
  viewof simplification_percent
  )

viewof langage_requete = Inputs.radio(
  ["Python", "Javascript" ,"R"], {label: "Langage de programmation pour les exemples de code"},
  {value: null, format: x => x ?? "Python"}
)

viewof selected_departements = multiAutoSelect({
    options: liste_departements,
    placeholder: "Liste des départements",
    value: ["75", "92", "93", "94"]
})

language_emprise = Inputs.bind(
    Inputs.radio(
        ["Python", "Javascript" ,"R"], {label: "Langage de programmation pour les exemples de code"},
        {value: null, format: x => x ?? "Python"}
    ),
    viewof langage_requete
)

year_emprise = Inputs.bind(
    Inputs.select(
        ["2022", "2021"], {label: "Année de la géographie de référence"}
    ),
    viewof year
)

format_emprise = Inputs.bind(
    Inputs.select(
        ["topojson", "geojson"],{label: "Format désiré:"}
    ),
    viewof format
)

simplification_percent_emprise = Inputs.bind(
    Inputs.range(
        [0, 50], {step: 50, value: 50, label: "Degré de simplification (%)"}
    ),
    viewof simplification_percent
)

langage = langage_requete == null ? "Python" : langage_requete

logo = ({
  "python": `${fab`python`}`,
  "javascript": `${fab`js`}`,
  "r": `${fab`r-project`}`
})

import { style as faStyle, fa, fab, fas } from "@airbornemint/fontawesome"

Récupérer un fond de carte France entière

html`<div>${grid}</div>`

Récupérer un fond de carte sur une emprise limitée

html`<div>${grid_departements}</div>`

grid_departements =  {
    let grid ;

    if (availableWidth>smallScreen){
        grid = html`
        <div style="
            background: #fff;
            margin: 0;
            border: none;
            display: grid;
            width: ${availableWidth};
            grid-template-areas: 
                'selectors map choice-code'
                'selectors map code'
                'selectors map code'
                'selectors map code'
                'download map code';
            grid-template-columns: 30% 40% 30%;
            grid-gap: 10px;
            ">
            
            <div name="selectors" style="grid-area: selectors; position: relative;">
                ${viewof selected_departements}
                ${year_emprise}
                ${format_emprise}
                ${simplification_percent_emprise}
                ${viewof arrondissement}
            </div>
            
            <div name="map" style="grid-area: map; position: relative;">
                ${map_multiple_departement}
            </div>

            <div name="choice-code" style="grid-area: choice-code; position: relative;">
                ${language_emprise}
            </div>


            <div name="code" style="grid-area: code; position: relative;">
                Comment faire en <code>${langage}</code> ${logo[langage.toLowerCase()]}
                ${print_program_france(langage, selectedlevel, format, year, drom_rapproches, simplification_percent)}
            </div>

            <div name="download-button" style="grid-area: download; position: relative;">
                
            </div>

        </div>
        `
        return grid
    }

    grid = html`
    <div style="
        background: #fff;
        margin: 0;
        border: none;
        display: grid;
        width: ${availableWidth};
        grid-template-areas: 
            'selectors'
            'map'
            'download'
            'choice-code'
            'code';
        grid-template-rows: auto auto auto auto;
        grid-gap: 10px;
        ">

        <div name="selectors" style="grid-area: selectors; position: relative;">
                ${viewof selected_departements}
                ${year_emprise}
                ${format_emprise}
                ${simplification_percent_emprise}
                ${viewof arrondissement}
        </div>
        
        <div name="map" style="grid-area: map; position: relative;">
            ${map_multiple_departement}
        </div>

        <div name="download-button" style="grid-area: download; position: relative;">
        </div>

        <div name="choice-code" style="grid-area: choice-code; position: relative;">
            ${language_emprise}
        </div>

        <div name="code" style="grid-area: code; position: relative;">
            Comment faire en <code>${langage}</code> ${logo[langage.toLowerCase()]}
            ${print_program_france(langage, selectedlevel, format, year, drom_rapproches, simplification_percent)}
        </div>

    </div>
    `

    return grid
}

// Source: https://observablehq.com/@mbostock/dashboard
grid = {

    let grid ;

    if (availableWidth>smallScreen){
        grid = html`
        <div style="
            background: #fff;
            margin: 0;
            border: none;
            display: grid;
            width: ${availableWidth};
            grid-template-areas: 
                'selectors map choice-code'
                'selectors map code'
                'selectors map code'
                'selectors map code'
                'download map code';
            grid-template-columns: 30% 40% 30%;
            grid-gap: 10px;
            ">
            
            <div name="selectors" style="grid-area: selectors; position: relative;">
                ${viewof year}
                ${viewof selectedlevel}
                ${viewof format}
                ${viewof simplification_percent}
                ${viewof drom_rapproches}
            </div>
            
            <div name="map" style="grid-area: map; position: relative;">
                ${map_france}
            </div>

            <div name="choice-code" style="grid-area: choice-code; position: relative;">
                ${viewof langage_requete}
            </div>


            <div name="code" style="grid-area: code; position: relative;">
                Comment faire en <code>${langage}</code> ${logo[langage.toLowerCase()]}
                ${print_program_france(langage, selectedlevel, format, year, drom_rapproches, simplification_percent)}
            </div>

            <div name="download-button" style="grid-area: download; position: relative;">
                ${button_france}
            </div>

        </div>
        `
        return grid
    }

    grid = html`
    <div style="
        background: #fff;
        margin: 0;
        border: none;
        display: grid;
        width: ${availableWidth};
        grid-template-areas: 
            'selectors'
            'map'
            'download'
            'choice-code'
            'code';
        grid-template-rows: auto auto auto auto;
        grid-gap: 10px;
        ">

        <div name="selectors" style="grid-area: selectors; position: relative;">
            ${viewof year}
            ${viewof selectedlevel}
            ${viewof format}
            ${viewof simplification_percent}
            ${viewof drom_rapproches}
        </div>
        
        <div name="map" style="grid-area: map; position: relative;">
            ${map_france}
        </div>

        <div name="download-button" style="grid-area: download; position: relative;">
            ${button_france}
        </div>

        <div name="choice-code" style="grid-area: choice-code; position: relative;">
            ${viewof langage_requete}
        </div>

        <div name="code" style="grid-area: code; position: relative;">
            Comment faire en <code>${langage}</code> ${logo[langage.toLowerCase()]}
            ${print_program_france(langage, selectedlevel, format, year, drom_rapproches, simplification_percent)}
        </div>

    </div>
    `
    return grid
}

map_france = topohelper
  .from(
    await data_france
  )
  .project({ proj: l93 })
  .view({
    tooltip: true,
    zoom: true,
    size: [
        availableWidth > smallScreen ? availableWidth*0.4 : availableWidth*0.95, availableHeight * 0.6
    ]})