"use client";

import dynamic from "next/dynamic";
import { useEffect, useState } from "react";
import { ApexOptions } from "apexcharts";

const Chart = dynamic(
    () => import("react-apexcharts"),
    {
        ssr: false,
        loading: () => (
            <div>
                Loading chart...
            </div>
        ),
    }
);

interface MonitoringCharger {
    name: string
    legal_name: string
    tier: string
    join_date: string
    charger: number
    user: number
    member: string
    messaging: string
    distribution: Distribution
    charger_status: ChargerStatus[]
}

interface Distribution {
    available: number
    charging: number
    preparing: number
    finishing: number
    fault: number
    offline: number
}

interface ChargerStatus {}

interface DistributionChargeWidgetProps {
    monitoring: MonitoringCharger | null;
}

export default function DistributionChargeWidget({
    monitoring,
}: DistributionChargeWidgetProps) {
    if (!monitoring) {
        return null;
    }

    const series = [
        monitoring.distribution.available,
        monitoring.distribution.charging,
        monitoring.distribution.preparing,
        monitoring.distribution.finishing,
        monitoring.distribution.fault,
        monitoring.distribution.offline,
    ];

    const options: ApexOptions = {
        chart: {
            type: "donut",
            fontFamily: "inherit",
            height: 240,
            sparkline: {
                enabled: true,
            },
            animations: {
                enabled: false,
            },
        },

        labels: [
            "Available",
            "Charging",
            "Preparing",
            "Finishing",
            "Fault",
            "Offline",
        ],

        tooltip: {
            theme: "dark",
            fillSeriesColor: false,
        },

        legend: {
            show: true,
            position: "bottom",
            offsetY: 12,
            markers: {
                size: 10,
                shape: "circle",
            },
            itemMargin: {
                horizontal: 8,
                vertical: 8,
            },
        },

        colors: [
            "#206bc4", // Available
            "#008000", // Charging
            "#ae3ec9", // Preparing
            "#FFA500", // Finishing
            "#d63939", // Fault
            "#000000", // Offline
        ],
    };
    return (
        <>
            <div className="col-6">
                <div className="card h-100">
                    <div className="card-header">
                        <h3 className="card-title">Detail {monitoring.name}</h3>
                        <div className="card-actions">
                            <div className="badge bg-success-lt me-1 mb-1">{monitoring.tier}</div>
                        </div>
                    </div>
                    <div className="card-body">
                        <dl className="row">
                            <dt className="col-5">Legal Name</dt>
                            <dd className="col-7">: {monitoring.legal_name}</dd>
                            <dt className="col-5">Join Date</dt>
                            <dd className="col-7">: {monitoring.join_date}</dd>
                            <dt className="col-5">Total Charger</dt>
                            <dd className="col-7">: {monitoring.charger} Unit</dd>
                            <dt className="col-5">Total User</dt>
                            <dd className="col-7">: {monitoring.user} User Internal</dd>
                            <dt className="col-5">Total Member</dt>
                            <dd className="col-7">: {monitoring.member} User Member</dd>
                            <dt className="col-5">Total Messaging</dt>
                            <dd className="col-7">: {monitoring.messaging}</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div className="col-6">
                <div className="card">
                    <div className="ribbon bg-red-lt">Charger Distribution</div>
                    <div className="card-body">
                        {series.length > 0 && (
                            <Chart options={options} series={series} type="donut" height={240}/>
                        )}
                    </div>
                </div>
            </div>
        </>
    );
}