"use client";

import { useState, useEffect, useRef } from "react";

import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib/config";
import { useData } from "@/Theme/Midone/Utils";

import { Frame, Grid } from "@/Theme/Midone/Utils";
import { DisplayDate } from "@/Theme/Midone/Utils/DisplayDate";

import { Input,Box } from "@/Theme/Midone/Forms";
import { Select } from "@/Theme/Midone/Forms/Select";

export default function List({ params: initialParams = {} }) {
    const { Lang, local } = useLang();
    const { laraAdmin } = useConfig();
    const { getNeedles } = useData();

    const effectRan = useRef(false);

    const [needles, setNeedles] = useState();

    const [filters, setFilters] = useState({
        user: initialParams.user ?? "",
        status: initialParams.status ?? "",
    });

    const formUrl = "/personnelActivity";

    const [url, setUrl] = useState(
        `${laraAdmin}${formUrl}`
    );

    useEffect(() => {
        if (!effectRan.current) {
            getNeedles(
                `${laraAdmin}/userActivity/get-needles`,
                setNeedles
            );

            effectRan.current = true;
        }
    }, []);

    useEffect(() => {
        const query = new URLSearchParams();

        Object.entries(filters).forEach(([key, value]) => {
            if (value !== "") {
                query.append(key, value);
            }
        });

        setUrl(
            `${laraAdmin}${formUrl}${
                query.toString() ? `?${query.toString()}` : ""
            }`
        );
    }, [filters, laraAdmin]);

    const handleFilterChange = (e, key) => {
        const value = e?.target?.value ?? e;

        setFilters((prev) => ({
            ...prev,
            [key]: value,
        }));
    };

    const clearFilter = () => {
        setFilters({
            user: "",
            status: "",
        });
    };

    const info = {
        url,
        activeSearch: false,
        perPage: 30,
        columns: [
            {
                label: "user",
                jsx: (item) => (
                    <>
                        {item?.user?.firstname}{" "}
                        {item?.user?.lastname}
                    </>
                ),
            },
            {
                label: "role",
                jsx: (item) =>
                    item?.user?.role?.[`title_${local}`],
            },
            {
                label: "subject",
                jsx: (item) => (
                    <>
                        {Lang(
                            "public." + item?.entity_type
                        )}{" "}
                        {item?.title}
                    </>
                ),
            },
            {
                label: "operation_type",
                jsx: (item) => (
                    <span
                        className={`rounded-full px-2 py-1 text-white bg-${item?.type?.color}`}
                    >
                        {item?.type?.[`title_${local}`]}
                    </span>
                ),
            },
            {
                label: "operation_result",
                jsx: (item) => (
                    <span
                        className={`rounded-full px-2 py-1 text-white bg-${item?.result?.color}`}
                    >
                        {item?.result?.[`title_${local}`]}
                    </span>
                ),
            },
            {
                label: "ip",
                field: "ip_address",
            },
            {
                label: "created_at",
                jsx: (item) => (
                    <DisplayDate
                        date={item?.created_at}
                    />
                ),
            },
        ],
    };

    return (
        <Frame title={Lang(["public.user_activity"])}>
            <Box
                shadow={false}
                minIcon={true}
                min={true}
                cols="grid-cols-12"
            >
                <Input
                    className="col-span-12 md:col-span-4"
                    label="user"
                    defaultValue={filters.user}
                    onEnter={(e) =>
                        handleFilterChange(e, "user")
                    }
                    note={Lang(
                        "public.filter_report_user"
                    )}
                />

                
                <Select
                    className="col-span-12 md:col-span-3"
                    label="activity_type"
                    defaultValue={filters.status}
                    data={
                        needles?.status?.filter(
                            (item) =>
                                item.group_id == 15
                        ) || []
                    }
                    titleKey={`title_${local}`}
                    valueKey="code"
                    onChange={(e) =>
                        handleFilterChange(
                            e?.target?.value ?? e,
                            "status"
                        )
                    }
                />

                <div className="col-span-12 md:col-span-2 flex items-end">
                    <button
                        type="button"
                        className="btn btn-secondary mb-5"
                        onClick={clearFilter}
                    >
                        {Lang("public.clear_filter")}
                    </button>
                </div>
            </Box>

            <div className="intro-y col-span-12">
                <Grid {...info} key={url} />
            </div>
        </Frame>
    );
}