<script>
    import api from "$lib/axios";
    import { onMount } from "svelte";

    let chart = {};

    const handleGenerateChart = async (series, labels) => {
        const options = {
            chart: {
                type: "area",
                fontFamily: "inherit",
                height: 100,
                sparkline: {
                    enabled: true,
                },
                animations: {
                    enabled: false,
                },
            },
            dataLabels: {
                enabled: false,
            },
            series: [
                {
                    name: "Pasien",
                    data: series,
                },
            ],
            grid: {
                strokeDashArray: 4,
            },
            xaxis: {
                labels: {
                    padding: 0,
                },
                tooltip: {
                    enabled: false,
                },
                axisBorder: {
                    show: false,
                },
                type: "datetime",
            },
            stroke: {
                width: 2,
                lineCap: "round",
                curve: "smooth",
            },
            yaxis: {
                labels: {
                    padding: 4,
                },
            },
            labels,
            colors: ["#066fd1"],
            legend: {
                show: false,
            },
        };

        const chart = new window.ApexCharts(document.querySelector("#patient-growth-chart"), options);
        chart.render();
    };

    const handleGetPatientGrowth = async () => {
        try {
            const response = await api.get("/charts/patient-growth");
            chart = response.data?.data;

            handleGenerateChart(
                chart.stats.map((g) => g.size),
                chart.stats.map((g) => g.date),
            );
        } catch (err) {
            console.error(err);
        }
    };

    onMount(() => {
        handleGetPatientGrowth();
    });
</script>

<div class="col-12 col-lg-6">
    <div class="card">
        <div class="card-body">
            <div class="d-flex">
                <div class="subheader">Pertumbuhan Pasien</div>
                <div class="ms-auto lh-1">
                    <div class="dropdown">
                        <a
                            class="dropdown-toggle text-secondary"
                            id="new-clients-dropdown"
                            href={"#"}
                            data-bs-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                            aria-label="Select time range for new clients"
                        >
                            30 hari terakhir
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a class="dropdown-item active" href={"#"}>30 hari terakhir</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex align-items-baseline">
                <div class="h1 mb-3 me-2">
                    {Intl.NumberFormat("en").format(chart?.size || 0)}
                </div>
                <div class="me-auto">
                    <span class="text-green d-inline-flex align-items-center lh-1">
                        {chart?.percentage || 0}%
                        <!-- Download SVG icon from http://tabler.io/icons/icon/trending-up -->
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            class="icon ms-1 icon-2"
                        >
                            <path d="M3 17l6 -6l4 4l8 -8" />
                            <path d="M14 7l7 0l0 7" />
                        </svg>
                    </span>
                </div>
            </div>
        </div>
        <div id="patient-growth-chart" class="position-relative chart-sm"></div>
    </div>
</div>
