<script>
import {
    onMount
} from "svelte";
import {
    querystring,
    push
} from "svelte-spa-router";
import {
    Col,
    Row,
    Container,
    Icon,
    Card,
    CardBody,
    Button,
} from "sveltestrap";

import {
    storeConfig,
    storeLang,
    storeLocalesViews,
} from "@/stores/config.store";
import {
    user
} from "@/stores/app.store";
import helpers from "@/libs/helpers/index.js";

let projects = [];
let userActiveProjects = [];
let userInactiveProjects = [];

$: isReady = localesView;

const view = "home";

$: href = {
    // form: $querystring ? "/form?" + $querystring : "/form",
    formdata: $querystring ? "/formdata?" + $querystring : "/formdata",
    login: $storeConfig.api.login,
    list: $querystring ? "/list?" + $querystring : "/list",
    simpleformdata: $querystring ?
        "/simpleformdata?" + $querystring : "/simpleformdata",
    geoserver: $storeConfig.api.geoserver,
    data4citizen: $storeConfig.api.data4citizen,
    newuser: $storeConfig.api.newuser,
    account: $storeConfig.api.account,
    contact: $storeConfig.api.contact,
    newsletter: $storeConfig.api.newsletter,
};

$: localesView = $storeLocalesViews[view];

$: getProjects($user);
$: isNewsletter = $user.roles ?
    $user.roles.includes("ROLE_NEWSLETTER") :
    false;

function getProjects(user) {
    if (user.editor) {
        helpers.getFile("config/locales/fr/projects.json").then((response) => {
            projects = response.data;
            userActiveProjects = projects.length ?
                projects.filter((project) => user.roles.includes(project.role)) : [];
            userInactiveProjects = projects.length ?
                projects.filter((project) => !user.roles.includes(project.role)) : [];
        });
    }
}

function redirectToPage(url) {
    // window.top.location.href = url;
    window.open(url, "_blank");
}

function goTo(href) {
    console.log(href);
    push(href);
}

onMount(() => {
    const file = $storeConfig.views[view].locales[$storeLang];
    storeLocalesViews.setLocalesView(view, file);
});
</script>

{#if isReady}
<Container class="my-5">
    {#if $user.editor}
    <!-- {JSON.stringify($user)} -->
    <Row class="mt-3">
        <Col class="mt-3" md="12">
        <p class="h3 text-center">
            Bonjour {$user.firstname}
            {$user.lastname}
        </p>
        </Col>
        <Col class="mt-3" md={{ size: 8, offset: 2 }}>
        <p class="h5 fw-normal text-muted text-center">
            Bienvenu sur DataGrandEst
        </p>
        </Col>
    </Row>
    <Row class="mt-3">
        <Col class="mt-1">
        <div class="mt-3 p-2 border border-dark rounded h5">Mon compte</div>
        </Col>
    </Row>

    <Row class="mt-3 text-center">
        <!-- <Col class="mt-1" md={{ size: "3", offset: 3 }}> -->
        <Col class="mt-1" md="3">
        <a href={href.account} class="text-decoration-none" target="_blank">
            <Card color="primary" inverse class="w-100 white link">
                <CardBody class="text-center">
                    <div>
                        <Icon
                            name="person-circle"
                            class=""
                            style="font-size: 3rem;"
                            ></Icon>
                    </div>
                    <p class="mt-2"><u>Gérer mon compte</u></p>
                </CardBody>
            </Card>
        </a>
        </Col>
    </Row>

    <Row class="mt-3">
        <Col class="mt-1">
        <div class="mt-3 p-2 border border-dark rounded h5">Publier des données</div>
        </Col>
    </Row>
    <Row class="mt-3 text-center">
        <Col md=4>
            <Card class="w-100 mb-3" >
                <CardBody class="text-center">
                    <p><strong>Publication "CLE EN MAIN"</strong></p>
                    <p><i>Ce formulaire est réservé aux personnes souhaitant publier une donnée mais ne disposant pas des connaissances nécessaire pour le faire. Transmettez nous les ins essentielles et les données. On se charge du reste.</i></p>
                    <Card
                        color="primary"
                        inverse
                        class="w-100 white link"
                        on:click={(e) => goTo(href.simpleformdata)}
                        >
                        <CardBody class="text-center">
                            <div>
                                <Icon name="card-text" class="" style="font-size: 3rem;" />
                            </div>
                            <p class="mt-2"><u>Soumettre une donnée</u></p>
                        </CardBody>
                    </Card>
                </CardBody>
            </Card>

            <Card class="w-100" >
                <CardBody class="text-center">
                    <p><strong>Publication par "MOISSONNAGE"</strong></p>
                    <p><i>Vous disposez d'un catalogue avec des données ouvertes (CSW/DCAT), n'hésitez pas à nous contacter sur <a href="emailto:contact@datagrandest.fr">contact@datagrandest.fr</a> et nous transmettre son URL</i></p>
                </CardBody>
            </Card>
        </Col>

        <Col md=8>
            <Card class="w-100" >
                <CardBody class="text-center">
                    <p><strong>Publication "AUTONOME"</strong></p>
                    <p><i>Vous êtes datascientist, géomaticien ou autre spécialiste de la donnée. Vous vous y connaissez suffisamment pour décrire et publier une donnée de façon autonome avec un peu d'accompagnement et de formation. Vous trouverez ci-dessous l'ensemble des outils proposés par DataGrandEst pour mettre en ligne et valoriser vos données quelles soient géographiques ou non.</i></p>
                    <Row class="mb-3">
                        <Col>
                            <Card
                        color="primary"
                        inverse
                        class="w-100 white link"
                        on:click={(e) => goTo(href.formdata)}
                        >
                        <CardBody class="text-center">
                            <div>
                                <Icon name="pencil" class="" style="font-size: 3rem;" />
                            </div>
                            <p class="mt-2">
                                <u>Publier une donnée</u><br />
                                (formulaire de saisie)
                            </p>
                        </CardBody>
                    </Card>
                        </Col>
                        <Col>
                            <Card
                        color="primary"
                        inverse
                        class="w-100 white link"
                        on:click={(e) => goTo(href.list)}
                        >
                        <CardBody class="text-center">
                            <div>
                                <Icon name="list-check" class="" style="font-size: 3rem;" />
                            </div>
                            <p class="mt-2"><u>Gérer mes données</u><br />(liste des données)</p>
                        </CardBody>
                    </Card>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <Card
                        color="primary"
                        inverse
                        class="w-100 white link"
                        on:click={(e) => redirectToPage(href.data4citizen)}
                        >
                        <CardBody class="text-center">
                            <div>
                                <Icon name="graph-up" class="" style="font-size: 3rem;" />
                            </div>
                            <p class="mt-2">
                                <u>Mettre en forme mes données (tableaux/graphiques)</u><br />
                                (Data4Citizen)
                            </p>
                        </CardBody>
                    </Card>
                        </Col>
                        <Col>
                            <Card
                        color="primary"
                        inverse
                        class="w-100 white link"
                        on:click={(e) => redirectToPage(href.geoserver)}
                        >
                        <CardBody class="text-center">
                            <div>
                                <Icon name="map" class="" style="font-size: 3rem;" />
                            </div>
                            <p class="mt-2">
                                <u>Générer et mettre en forme des flux cartographiques</u><br />
                                (GeoServer)
                            </p>
                        </CardBody>
                    </Card>
                        </Col>
                    </Row>
                </CardBody>
            </Card>
        </Col>
    </Row>
    <div class="d-none">
        <Row class="mt-3">
            <Col class="mt-1">
            <div class="mt-3 p-2 border border-dark rounded h5">
                Mes projets
            </div>
            </Col>
        </Row>
        <Row class="mt-1">
            {#if userActiveProjects.length}
            {#each userActiveProjects as project}
            <Col class="mt-1" md="4">
            <a
                href={project.url}
                class="text-decoration-none"
                target="_blank"
                >
                <Card color="success" inverse class="white link">
                    <CardBody class="text-center">
                        <!-- <div>
                                    <Icon name="list-check" class="" style="font-size: 3rem;" />
                        </div> -->
                        <p class="mt-2">{project.name}</p>
                        <Button color="light" class="">Consulter</Button>
                        <Button color="light" class="">Se désabonner</Button>
                    </CardBody>
                </Card>
            </a>
            </Col>
            {/each}
            {/if}
            {#if userInactiveProjects.length}
            {#each userInactiveProjects as project}
            <Col class="mt-1" md="4">
            <a
                href={project.url}
                class="text-decoration-none"
                target="_blank"
                >
                <Card class="link border-warning text-warning">
                    <CardBody class="text-center">
                        <p class="mt-2">{project.name}</p>
                        <Button outline color="warning" class="">Consulter</Button>
                        <Button outline color="warning" class="">S'abonner</Button>
                    </CardBody>
                </Card>
            </a>
            </Col>
            {/each}
            {/if}
        </Row>
    </div>
    <div class="">
        <Row class="mt-3">
            <Col class="mt-1">
            <div class="mt-3 p-2 border border-dark rounded h5">Newsletter</div>
            </Col>
        </Row>
        <Row class="mt-3 text-center">
            <Col class="mt-1" md="3">
            <Card
                color="primary"
                inverse
                class="w-100 white link"
                on:click={(e) => redirectToPage(href.newsletter)}
                >
                <CardBody class="text-center">
                    <div>
                        <Icon name="newspaper" class="" style="font-size: 3rem;" />
                    </div>
                    <p class="mt-2"><u>S'abonner à l'infolettre</u></p>
                    <!-- {#if isNewsletter}
                    <Button color="light" class="">Se désabonner</Button>
                    {:else}
                    <Button color="light" class="">S'abonner</Button>
                    {/if} -->
                </CardBody>
            </Card>
            </Col>
        </Row>
    </div>
    <div class="">
        <Row class="mt-3">
            <Col class="mt-1">
            <div class="mt-3 p-2 border border-dark rounded h5">Nous contacter</div>
            </Col>
        </Row>
        <Row class="mt-3 text-center">
            <Col class="mt-1" md="3">
            <Card
                color="primary"
                inverse
                class="w-100 white link"
                on:click={(e) => redirectToPage(href.contact)}
                >
                <CardBody class="text-center">
                    <div>
                        <Icon name="envelope" class="" style="font-size: 3rem;" />
                    </div>
                    <p class="mt-2"><u>Formulaire de contact</u></p>
                </CardBody>
            </Card>
            </Col>
        </Row>
    </div>
    {:else}
    <Row class="mt-3">
        <Col class="mt-3" md="12">
        <p class="h3 text-center">Vous n'êtes pas authentifié</p>
        </Col>
        <Col class="mt-5" md={{ size: 8, offset: 2 }}>
        <p>
            Vous pouvez décrire des données et sauvegarder la fiche résultante
            sur votre ordinateur, mais vous ne pouvez pas publier de données
            directement sur la plateforme GéoGrandEst.<br />
            Nous vous invitons à créer un compte ou vous authentifier si vous en
            avez déjà un.
        </p>
        </Col>
    </Row>
    <Row class="mt-5 text-center">
        <Col class="mt-5" md={{ size: "3", offset: 1 }}>
        <Card
            color="primary"
            inverse
            class="w-100 text-white link"
            on:click={() => redirectToPage(href.newuser)}
            >
            <CardBody class="text-center">
                <div>
                    <Icon name="person-plus" class="" style="font-size: 3rem;" />
                </div>
                <p class="mt-2">Créer un compte</p>
            </CardBody>
        </Card>
        </Col>
        <Col class="mt-5" md={{ size: "3" }}>
        <Card
            color="primary"
            inverse
            class="w-100 text-white link"
            on:click={() => redirectToPage(href.login)}
            >
            <CardBody class="text-center">
                <div>
                    <Icon name="lock" class="" style="font-size: 3rem;" />
                </div>
                <p class="mt-2">S'authentifier</p>
            </CardBody>
        </Card>
        </Col>
        <Col class="mt-5" md={{ size: "3" }}>
        <Card
            color="primary"
            inverse
            class="w-100 text-white link"
            on:click={(e) => goTo(href.formdata)}
            >
            <CardBody class="text-center">
                <div>
                    <Icon name="pencil" class="" style="font-size: 3rem;" />
                </div>
                <p class="mt-2">Décrire une donnée</p>
            </CardBody>
        </Card>
        </Col>
    </Row>
    {/if}
</Container>
{/if}
