import { InsightMetricCard } from "@/components/insights/InsightMetricCard";

import { useInsight } from "@/hooks/useInsights.queries";

import { Colors } from "@/constants/theme";

export const DailySleepWidget = () => {

  const { data: insight, isLoading } = useInsight("DAILY_SLEEP");

  const metadata = insight?.metadata;

  const diffMinutes = metadata?.diffMinutes ?? null;

  return (

    <InsightMetricCard

      icon="moon"

      title="Sono"

      iconColor={Colors.light.accentDarkPurple}

      iconBackground={Colors.light.accentPurple}

      isLoading={isLoading}

      emptyMessage="Não há dados disponíveis para o dia de hoje"

      value={

        metadata?.totalHours != null

          ? formatHours(metadata.totalHours)

          : undefined

      }

      windowLabel={metadata?.windowLabel}

      detail={metadata?.napStr || undefined}

      comparison={metadata?.diffStr || null}

      comparisonColor={

        diffMinutes != null && diffMinutes < 0

          ? Colors.light.danger

          : Colors.light.tint

      }

    />

  );

};

function formatHours(hours: number): string {

  const h = Math.floor(hours);

  const m = Math.round((hours - h) * 60);

  if (m === 0) return `${h}h`;

  return `${h}h ${m}min`;

}