/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import { useEffect, useState } from "react";
import { usePage } from "@inertiajs/react";
import { BiStats } from "react-icons/bi";

import styles from "./analytics-card.module.scss";

import currencyData from "../../../../data/countries-currencies.json";

interface AdminAnalyticsCardProps {
  title: string;
  description?: string;
  value: number;
  type?: "balance" | "count" | "save" | "invest";
}

const SkeletonCard = () => (
  <div className={styles.card}>
    <div className={styles.skeletonHeader}>
      <div className={styles.skeletonTitle} />
      <div className={styles.skeletonIcon} />
    </div>

    <div className={styles.skeletonDescription} />

    <div className={styles.skeletonValue} />
  </div>
);

const AdminAnalyticsCard: React.FC<
  AdminAnalyticsCardProps
> = ({
  title,
  description,
  value,
  type = "balance",
}) => {
  const [loading, setLoading] =
    useState(true);

  const { appSettings } =
    usePage().props as any;

  const currency = currencyData.find(
    (item) => item.currency_code === appSettings?.base_currency
  )

  useEffect(() => {
    const timeout =
      setTimeout(
        () =>
          setLoading(false),
        900
      );

    return () =>
      clearTimeout(timeout);
  }, []);

  const formattedValue =
    type === "balance" ||
    type === "save" ||
    type === "invest"
      ? Number(
          value || 0
        ).toLocaleString(
          "en-US",
          {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
          }
        )
      : Number(
          value || 0
        ).toLocaleString(
          "en-US"
        );

  if (loading) {
    return <SkeletonCard />;
  }

  console.log("Currency code", currency?.currency_symbol)

  return (
    <div className={styles.card}>
      <div
        className={
          styles.card__header
        }
      >
        <div
          className={
            styles.card__header__content
          }
        >
          <h4>{title}</h4>

          {description && (
            <p>
              {
                description
              }
            </p>
          )}
        </div>

        <div
          className={
            styles.card__header__icon
          }
        >
          <BiStats />
        </div>
      </div>

      <div
        className={
          styles.card__body
        }
      >
        <h2>
          {(type ===
            "balance" ||
            type ===
              "save" ||
            type ===
              "invest") &&
            currency?.currency_symbol}

          {
            formattedValue
          }
        </h2>
      </div>
    </div>
  );
};

export default AdminAnalyticsCard;