"use client";

import  {GeneralReport}  from "@/Components/Dashboard/GeneralReport";
import { useConfig } from "@/lib/config";
import { Button, useFormRefs } from "@/Theme/Midone";
import { useData } from "@/Theme/Midone/Utils/Data";
import { useEffect } from "react";
import { useLang } from "@/lib/lang";
import { useAuth } from "@/lib/auth";
import { Package } from "@/Components/Dashboard/Package";
import { PackageUsers } from "@/Components/Dashboard/PackageUsers";
import * as Icon from 'react-feather';

export default function Manager({ siteTheme }) {
    const { user } = useAuth({ guard: "admin" });
    const { Lang } = useLang();
    const {laraAdmin,nextAdmin} = useConfig();
    let {get} = useData();
    let component = useFormRefs();

    useEffect(() => {
        get(laraAdmin+"/home?theme=2", component, "info");
    }, []);

    const saveItem = ()=>get(laraAdmin+"/refresh_count", component, "info",()=>{get(laraAdmin+"/home", component, "info");});

    let info  = component?.state?.info;
    return(
        <>
            <div className="grid grid-cols-12 gap-6">
                <div className="col-span-12 mt-4 sm:mt-6 -mb-4 sm:-mb-6 intro-y">
                    <div className="alert justify-between alert-dismissible show box bg-theme-26 text-white flex flex-col sm:flex-row items-center p-2 sm:p-4 mb-4 sm:mb-6" role="alert">
                        <span className="flex items-center mb-2 sm:mb-0">
                            <Icon.User className="ml-1" size={16} />
                            {Lang(["public.wellcome", "public.to", "public.main_title"])}
                        </span>
                        <span className="flex items-center mb-2 sm:mb-0">
                            <Icon.Circle className="ml-1" size={16} />
                            {info?.online_users} {Lang(["public.users_online"])}
                        </span>
                        <span className="flex items-center">
                            <Icon.RefreshCw className="ml-1" size={16} />
                            <Button className="w-full sm:w-auto border-white text-xs sm:text-base" label="refresh_count" onClick={saveItem} />
                        </span>
                    </div>
                    <GeneralReport data={info?.counts} siteTheme = {siteTheme} />
                </div>
                {user?.role_id != 1 && user?.role_id != 3 ?<>
                    <div className="col-span-12 mt-6">
                        <Package data={info?.packages} title="last_packages" rel="courses" href={nextAdmin+"/courses"} />
                    </div>
                    <div className="col-span-6 mt-6">
                        <PackageUsers data={info?.package_users} title="last_registers" rel="teachers" href={nextAdmin+"/teachers"} />
                    </div>
                </> : "" }
            </div>
        </>
    );
}