"use client";

import useSWR from "swr";
import {fetcher} from "@/app/utils";
import {useEffect, useState} from "react";
import {Card, DonutChart, Metric, Text, Title} from "@tremor/react";
import * as R from "ramda";

export function SubjectOverviewCard({
                                        projectId,
                                        title
                                    }: {
    projectId: number,
    title?: string
}) {
    const {
        data: _project
    } = useSWR<any>(`/api/project?select=raw_json&toggl_id=eq.${projectId}`, fetcher);
    const [project, setProject] = useState({
        name: '',
        color: '',
    });

    useEffect(() => {
        if (_project) {
            setProject(_project[0].raw_json);
        }
    }, [_project]);

    const {
        data,
        error,
        isLoading,
    } = useSWR<any[]>(`/api/time_entry?select=raw_json&project_id=eq.${projectId}&start=gt.2023-12-15T00:00:00.000Z`, fetcher);
    const [a, setA] = useState(0)

    useEffect(() => {
        if (data) {
            setA(data
                .map((entry) => entry.raw_json.seconds)
                .reduce((a, b) => a + b, 0));
        }
    }, [data]);

    return (
        <Card style={{ borderColor: project?.color }} decoration={'left'}>
            <Title>{title ?? project?.name}</Title>
            <Text>Total</Text>
            <Metric>{(a / (60 * 60)).toFixed(2)} hours</Metric>
        </Card>
    )
}

export function SubjectComparisonCard({projectIds}: {
    projectIds: number[]
}) {
    const {
        data,
        error,
        isLoading,
    } = useSWR<any[]>(`/api/time_entry?select=raw_json,project:project_id(name,raw_json)&project_id=in.(${projectIds.join(',')})`, fetcher, {});

    const [a, setA] = useState<{ name: string, value: number }[]>([]);
    const [colours, setColours] = useState<string[]>([]);

    useEffect(() => {
        const a = R.toPairs(R.groupBy((entry) => entry.project.name, data ?? []))
            .map(([name, entries]) => ({
                name,
                value: (entries ?? []).map((entry) => entry.raw_json.seconds).reduce((a, b) => a + b, 0),
                colour: entries?.[0].project.raw_json.color
            }))

        setA(a);

        setColours(a.map((entry) => entry.colour));
    }, [data]);

    const valueFormatter = (number: number) => `${(number / (60 * 60)).toFixed(2)} hours`;

    return (
        <Card className="col">
            <Title>Relative Breakdown</Title>
            <DonutChart
                className="mt-6"
                data={a ?? []}
                category="value"
                index="name"
                valueFormatter={valueFormatter}
                colors={colours}
            />
        </Card>
    )
}