"use client";

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

import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib/config";

import { Frame, Grid, useData } 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 [url, setUrl] = useState(
        `${laraAdmin}/userActivity`
    );

    useEffect(() => {
        if (effectRan.current) return;

        getNeedles(
            `${laraAdmin}/userActivity/get-needles`,
            setNeedles
        );

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

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

        if (filters.user) {
            query.append("user", filters.user);
        }

        if (filters.status) {
            query.append("status", filters.status);
        }

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

    const handleFilterChange = (value, key) => {
        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: "codemeli",
                jsx: (item) => (
                    <span className="ltr">
                        {item?.user?.codemeli}
                    </span>
                ),
            },
            {
                label: "mobile",
                jsx: (item) => (
                    <span className="ltr">
                        {item?.user?.mobile}
                    </span>
                ),
            },
            {
                label: "role",
                jsx: (item) =>
                    item?.user?.role?.[
                        `title_${local}`
                    ],
            },
            {
                label: "course",
                jsx: (item) => item?.course?.title,
            },
            {
                label: "activity_type",
                minWidth: "150px",
                jsx: (item) => (
                    <span
                        className={`rounded-full px-2 py-1 text-white bg-${item?.type?.color}`}
                    >
                        {
                            item?.type?.[
                                `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
                min
                cols="grid-cols-12"
            >
                <Input
                    className="col-span-12 md:col-span-4"
                    label="user"
                    defaultValue={filters.user}
                    note={Lang(
                        "public.filter_report_user"
                    )}
                    onEnter={(e) =>
                        handleFilterChange(
                            e?.target?.value,
                            "user"
                        )
                    }
                />

                <Select
                    className="col-span-12 md:col-span-3"
                    label="activity_type"
                    defaultValue={filters.status}
                    data={
                        needles?.status?.filter(
                            (item) =>
                                item.group_id == 21
                        ) || []
                    }
                    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>
    );
}