"use client"

import Select from "react-select"
import { useEffect, useState } from "react"
import styles from "./Reporte.module.css"
import axios from "axios"

import Antiguedad from "./Graficas/Antiguedad"
import Uso from "./Graficas/Uso"

import Cookies from "js-cookie";
const api_url = process.env.NEXT_PUBLIC_API_URL;

type AdscripcionOption = {
    id_adscripcion: string
    adscripcion: string
}

type UsoOption = {
    id_uso: string
    tipo_uso: string
}

type AntiguedadOption = {
    antiguedad: string
}

export default function ReportePerifericos() {

    const [adscripciones, setAdscripciones] = useState<AdscripcionOption[]>([])
    const [adscripcionesSeleccionadas, setAdscripcionesSeleccionadas] = useState<AdscripcionOption[]>([])


    const [usos, setUsos] = useState<UsoOption[]>([{ id_uso: "0", tipo_uso: "Todos" }])
    const [usoSeleccionado, setUsoSeleccionado] = useState<UsoOption[]>([])

    const [antiguedad, setAntiguedad] = useState<AntiguedadOption[]>([{ antiguedad: "Todos" }, { antiguedad: "Menor a 2 años" }, { antiguedad: "Entre 2 y 3 años" }, { antiguedad: "Entre 4 y 5 años" }, { antiguedad: "Mayor a 6 años" }])
    const [antiguedadSeleccionada, setAntiguedadSeleccionada] = useState<AntiguedadOption[]>([])

    const [filtros, setFiltros] = useState<any>(null)
    const [filtrosTable, setFiltrosTable] = useState<any>(null)

    useEffect(() => {

        const cargarDatos = async () => {
            const token = Cookies.get("token");
            const headers = { Authorization: `Bearer ${token}` };
            const [
                adscripcionRes,
                procesadorRes,
                usoRes,
                soRes,
            ] = await Promise.all([
                axios.get(`${api_url}/equipos/adscripciones`, { headers }),
                axios.get(`${api_url}/equipos/procesador-tipo-equipos`, { headers }),
                axios.get(`${api_url}/equipos/usos`, { headers }),
                axios.get(`${api_url}/equipos/sistemas-operativos`, { headers }),
            ])

            setAdscripciones([
                { id_adscripcion: "0", adscripcion: "Todos" },
                ...adscripcionRes.data
            ])

            setUsos([
                { id_uso: "0", tipo_uso: "Todos" },
                ...usoRes.data
            ])
        }

        cargarDatos()

    }, [])

    function agregar<T>(option: T | null, lista: T[], setLista: (v: T[]) => void, key: keyof T) {

        if (!option) return

        const existe = lista.some((item) => item[key] === option[key])

        if (!existe) {
            setLista([...lista, option])
        }

    }

    function eliminar<T>(id: string, lista: T[], setLista: (v: T[]) => void, key: keyof T) {

        setLista(
            lista.filter((item) => item[key] !== id)
        )

    }

    const generarReporte = () => {

        const limpiar = (arr: string[]) => {
            if (arr.includes("0")) return []
            return arr
        }

        const filtrosTable = {
            adscripciones: adscripcionesSeleccionadas.map(a => String(a.id_adscripcion)),
            usos: usoSeleccionado.map(u => String(u.id_uso)),
            antiguedad: antiguedadSeleccionada.map(u => String(u.antiguedad))
        }

        const filtros = {
            adscripciones: limpiar(adscripcionesSeleccionadas.map(a => String(a.id_adscripcion))),
            usos: limpiar(usoSeleccionado.map(u => String(u.id_uso))),
            antiguedad: limpiar(antiguedadSeleccionada.map(a => String(a.antiguedad)))
        }

        setFiltros(filtros)
        setFiltrosTable(filtrosTable)

    }

    return (
        <>
            <div className={styles.container}>

                <section className={styles.filtro}>

                    {/* ADSCRIPCION */}

                    <div className={styles.containerSelection}>
                        <label className={styles.adscripcion}>Adscripción</label>

                        <Select
                            options={adscripciones}
                            getOptionLabel={(o) => o.adscripcion}
                            getOptionValue={(o) => o.id_adscripcion}
                            onChange={(o) => agregar(o, adscripcionesSeleccionadas, setAdscripcionesSeleccionadas, "id_adscripcion")}
                        />

                        <div className={styles.lista}>

                            {adscripcionesSeleccionadas.map((a) => (

                                <div key={a.id_adscripcion} className={styles.chip}>

                                    <span>{a.adscripcion}</span>

                                    <button
                                        className={styles.remove}
                                        onClick={() => eliminar(a.id_adscripcion, adscripcionesSeleccionadas, setAdscripcionesSeleccionadas, "id_adscripcion")}
                                    >
                                        ✕
                                    </button>

                                </div>

                            ))}

                        </div>

                    </div>

                    {/* USO */}

                    <div className={styles.containerSelection}>

                        <label className={styles.adscripcion}>Uso</label>

                        <Select
                            options={usos}
                            getOptionLabel={(o) => o.tipo_uso}
                            getOptionValue={(o) => o.id_uso}
                            onChange={(o) =>
                                agregar(o, usoSeleccionado, setUsoSeleccionado, "id_uso")
                            }
                        />

                        <div className={styles.lista}>

                            {usoSeleccionado.map((u) => (

                                <div key={u.id_uso} className={styles.chip}>

                                    <span>{u.tipo_uso}</span>

                                    <button
                                        className={styles.remove}
                                        onClick={() =>
                                            eliminar(u.id_uso, usoSeleccionado, setUsoSeleccionado, "id_uso")
                                        }
                                    >
                                        ✕
                                    </button>

                                </div>

                            ))}

                        </div>

                    </div>


                    <div className={styles.containerSelection}>

                        <label className={styles.adscripcion}>Antiguedad</label>

                        <Select
                            options={antiguedad}
                            getOptionLabel={(o) => o.antiguedad}
                            getOptionValue={(o) => o.antiguedad}
                            onChange={(o) =>
                                agregar(o, antiguedadSeleccionada, setAntiguedadSeleccionada, "antiguedad")
                            }
                        />

                        <div className={styles.lista}>

                            {antiguedadSeleccionada.map((p) => (

                                <div key={p.antiguedad} className={styles.chip}>

                                    <span>{p.antiguedad}</span>

                                    <button
                                        className={styles.remove}
                                        onClick={() =>
                                            eliminar(p.antiguedad, antiguedadSeleccionada, setAntiguedadSeleccionada, "antiguedad")
                                        }
                                    >
                                        ✕
                                    </button>

                                </div>

                            ))}

                        </div>

                    </div>


                </section>

                <button
                    className={styles.button}
                    onClick={generarReporte}
                >
                    Buscar
                </button>

            </div>


            <section className={styles.graficas}>

                <Antiguedad
                    filtros={filtros}
                />

                <Uso
                    filtros={filtros}
                />


            </section>


        </>
    )

}
