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)
  )}
`

button_departements = html`
  ${download_button(
    create_url_departement(selected_departements, selectedlevel, format, year, 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_departement_single} from "@linogaliana/cartiflette-doc-utils"

function download_button(url) {
  return `
    <form method="get" action="${url}" target="_blank" rel="noopener noreferrer">
      <button class="btn btn-download" type="submit">
        <i class="fa-solid fa-download"></i> Download !
      </button>
    </form>
  `;
}

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

viewof year = Inputs.select(["2022",], {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 langage_requete_departements = 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
)

language_emprise_departements = 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_departements
)

year_emprise = Inputs.bind(
    Inputs.select(
        ["2022",], {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

langage_departements = langage_requete_departements == null ? "Python" : langage_requete_departements

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

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

// Function to display the code bloc to use Cartiflette for whole France
function print_program_france(langage, selectedlevel, format, year, rapproche_drom, simplification){
    const filter_by = rapproche_drom ? "FRANCE_ENTIERE_DROM_RAPPROCHES" : "FRANCE_ENTIERE"
    if (langage == "Python"){
        return md`
        from cartiflette import carti_download
        shp_communes = carti_download(
            values = ["France"],
            crs = 4326,
            borders = "${selectedlevel}",
            vectorfile_format="${format}",
            simplification=${simplification},
            filter_by="${filter_by}",
            source="EXPRESS-COG-CARTO-TERRITOIRE",
            year=${year})
        `
    } else{
        return md`
        import {carti_download} from "@linogaliana/cartiflette-js"
        carti_download({
            value: "France",
            crs: 4326,
            borders: "${selectedlevel}",
            vectorfile_format: "${format}",
            simplification=${simplification},
            filter_by: ${filter_by}",
            source: "EXPRESS-COG-CARTO-TERRITOIRE",
            year:${year}
        })
        `
    }
}

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_departements map_departements choice-code_departements'
                '. map_departements code_departements'
                '. map_departements .'
                '. map_departements .'
                'download_departements map_departements .';
            grid-template-columns: 23% 45% 32%;
            ">
            
            <div name="selectors_departements" style="grid-area: selectors_departements; position: relative;">
                ${viewof selected_departements}
                ${year_emprise}
                ${format_emprise}
                ${simplification_percent_emprise}
                ${viewof arrondissement}
            </div>
            
            <div name="map_departements" style="grid-area: map_departements; position: relative;">
                ${map_multiple_departement}
            </div>

            <div name="code-bloc-departement" class="code-bloc">
                <div name="choice-code_departements" style="grid-area: choice-code_departements; position: relative;">
                    ${language_emprise_departements}
                </div>

                <div name="code_departements" style="grid-area: code_departements; position: relative;" class="code">
                    <span class="code-bloc-title">
                        Comment faire en <code>${langage_departements}</code> ${logo[langage_departements.toLowerCase()]}
                    </span> 
                    ${print_program_departement_single(langage_departements, selected_departements, selectedlevel, format, year)}
                </div>
            </div>

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

        </div>
        `
        return grid
    }

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

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

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

        <div name="code-bloc-departement" class="code-bloc">
            <div name="choice-code_departements" style="grid-area: choice-code_departements; position: relative;">
                ${language_emprise_departements}
            </div>

            <div name="code_departements" style="grid-area: code_departements; position: relative;" class="code">
                <span class="code-bloc-title">
                    Comment faire en <code>${langage_departements}</code> ${logo[langage_departements.toLowerCase()]}
                </span>
                ${print_program_departement_single(langage_departements, selected_departements, selectedlevel, format, year)}
            </div>
        </div>

    </div>
    `

    return grid
}

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

    let grid ;

    if (availableWidth>smallScreen){
        grid = html`
        <div class="cartiflette-example" style="
            background: #fff;
            margin: 0;
            border: none;
            display: grid;
            width: ${availableWidth};
            grid-template-areas: 
                'selectors map choice-code'
                '. map code'
                '. map .'
                '. map .'
                'download map .';
            grid-template-columns: 23% 45% 32%;
            ">
            
            <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="code-bloc" class="code-bloc">
                <div name="choice-code" style="grid-area: choice-code; position: relative;">
                    ${viewof langage_requete}
                </div>

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

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

        </div>
        `
        return grid
    }

    grid = html`
    <div class="cartiflette-example" 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 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="code-bloc" class="code-bloc">
            <div name="choice-code" style="grid-area: choice-code; position: relative;">
                ${viewof langage_requete}
            </div>

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