<!--
     This file is part of the happyDomain (R) project.
     Copyright (c) 2022-2024 happyDomain
     Authors: Pierre-Olivier Mercier, et al.

     This program is offered under a commercial and under the AGPL license.
     For commercial licensing, contact us at <contact@happydomain.org>.

     For AGPL licensing:
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU Affero General Public License as published by
     the Free Software Foundation, either version 3 of the License, or
     (at your option) any later version.

     This program is distributed in the hope that it will be useful,
     but WITHOUT ANY WARRANTY; without even the implied warranty of
     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     GNU Affero General Public License for more details.

     You should have received a copy of the GNU Affero General Public License
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
-->

<script lang="ts">
    import {
        Card,
        CardBody,
        CardText,
        CardTitle,
        CardSubtitle,
        Icon,
        Spinner,
        Progress,
    } from "@sveltestrap/sveltestrap";

    import ServiceBadges from "./ServiceBadges.svelte";
    import { controls as ctrlServiceDetails } from "../ServiceDetailsOffcanvas.svelte";
    import { controls as ctrlServicePath } from "$lib/components/services/NewServicePath.svelte";
    import type { Domain } from "$lib/model/domain";
    import type { ServiceWithValue } from "$lib/model/service.svelte";
    import { servicesSpecs, servicesSpecsLoaded } from "$lib/stores/services";
    import { thisZone } from "$lib/stores/thiszone";
    import { t } from "$lib/translations";
    import { getStatusColor, getStatusIcon } from "$lib/utils";
    import PropagationCountdown from "$lib/components/services/PropagationCountdown.svelte";

    interface Props {
        dn: string;
        origin: Domain;
        service?: ServiceWithValue;
        zoneId: string;
    }

    let { dn, origin, service, zoneId }: Props = $props();

    // Will be changed by PropagationCountdown
    let isPropagating = $state(true);

    function openService() {
        if (service) {
            const subdomainParam = dn === "" ? "@" : dn;
            ctrlServiceDetails.Open(service);
        } else {
            ctrlServicePath.Open(dn);
        }
    }
</script>

<Card
    class="card-hover h-100"
    style={"cursor: pointer; " + (!service ? "border-style: dashed; border-width: 2px" : "")}
    on:click={openService}
>
    {#if !$servicesSpecsLoaded}
        <div class="d-flex justify-content-center">
            <Spinner color="primary" />
        </div>
    {:else}
        <CardBody title={service && $servicesSpecs[service._svctype] ? $servicesSpecs[service._svctype].name : undefined}>
            <div class="d-flex justify-content-between gap-1 mb-2">
                <CardTitle class="text-truncate mb-0">
                    {#if service}
                        {$servicesSpecs[service._svctype]?.name ?? service._svctype}
                    {:else}
                        <Icon name="plus-circle" /> {$t("service.new")}
                    {/if}
                </CardTitle>
                {#if service?._id && $thisZone?.services_check_status?.[service._id] !== undefined}
                    <span class={"text-" + getStatusColor($thisZone.services_check_status![service._id])}>
                        <Icon name={getStatusIcon($thisZone.services_check_status![service._id])} />
                    </span>
                {:else if service?._propagated_at && isPropagating}
                    <Progress
                        class="rounded"
                        barClassName="px-2 text-end"
                        value={100}
                        color="primary"
                        striped
                        animated
                    >
                        <PropagationCountdown
                            bind:isPropagating
                            propagatedAt={service?._propagated_at}
                            localeString="service.propagating"
                        />
                    </Progress>
                {:else}
                    <ServiceBadges {service} />
                {/if}
            </div>
            <CardSubtitle class="mb-2 text-muted fst-italic">
                {#if service}
                    {$servicesSpecs[service._svctype]?.description ?? ""}
                {:else}
                    {$t("service.new-description")}
                {/if}
            </CardSubtitle>
            {#if service && service._comment}
                <CardText style="font-size: 90%" class="text-truncate">
                    {service._comment}
                </CardText>
            {/if}
        </CardBody>
    {/if}
</Card>
