'use client'

import axios from "axios";
import { useEffect, useState } from "react";
import {
    Bar,
    BarChart,
    CartesianGrid,
    Legend,
    ResponsiveContainer,
    Tooltip,
    XAxis,
    YAxis
} from "recharts";
import Cookies from "js-cookie";

interface Props {
    filtros: any
}

interface AntiguedadData {
    adscripcion: string
    antiguedad: string
    total: number
}

const colores = [
    "#818CF8",
    "#34D399",
    "#FBBF24",
    "#F87171",
    "#67E8F9",
    "#C084FC"
]

const api_url = process.env.NEXT_PUBLIC_API_URL;

export default function Antiguedad({ filtros }: Props) {

    const [data, setData] = useState<AntiguedadData[]>([])

    useEffect(() => {
        const token = Cookies.get("token");
        const headers = { Authorization: `Bearer ${token}` };

        const getAntiguedad = async () => {

            const response = await axios.post(
                `${api_url}/equipos/grafica/antiguedad`,
                filtros,
                { headers }
            )

            setData(response.data)

        }

        getAntiguedad()

    }, [filtros])

    const tieneAdscripciones = data.some(d => d.adscripcion)

    let dataTransformada = data
    let adscripciones: string[] = []

    if (tieneAdscripciones) {

        adscripciones = [...new Set(data.map(d => d.adscripcion))]

        dataTransformada = Object.values(
            data.reduce((acc: any, item: any) => {

                if (!acc[item.antiguedad]) {
                    acc[item.antiguedad] = { antiguedad: item.antiguedad }
                }

                acc[item.antiguedad][item.adscripcion] = Number(item.total)

                return acc

            }, {})
        )

    }

    return (
        <div
            style={{
                minWidth: "570px",
                background: "white",
                borderRadius: "10px",
                padding: "1rem",
                maxWidth: "100%"
            }}
        >

            <h1 style={{ margin: "0" }}>Antigüedad por equipo</h1>

            <ResponsiveContainer width="100%" aspect={2.5}>

                <BarChart
                    data={dataTransformada}
                    margin={{ top: 20 }}
                >
                    <CartesianGrid strokeDasharray="3 3" />

                    <XAxis dataKey="antiguedad" fontSize={12} />

                    <YAxis />
                    <Tooltip
                        formatter={(value) => [`${value}`]}
                    />
                    <Legend />
                    {tieneAdscripciones ? (

                        adscripciones.map((ads, i) => (
                            <Bar
                                key={ads}
                                dataKey={ads}
                                fill={colores[i % colores.length]}
                            />
                        ))

                    ) : (

                        <Bar
                            dataKey="total"
                            fill="#095bd6"
                        />

                    )}

                </BarChart>
            </ResponsiveContainer>
        </div>
    )
}