"use client";
import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib/config";
// import { useUtility } from "@/lib/utility";
import { useAccess } from "@/lib/access";
import { useData } from "@/Theme/Midone/Utils/Data";
import { Grid, Frame, FeatherIcon, Pic } from "@/Theme/Midone/Utils";
import Link from "next/link";
import { ButtonContainer } from "@/Theme/Midone";
import * as Icon from 'react-feather';
import { useCallback } from "react";

export default function List({link="/users", displayRole=true, view=false, resume=false, title="users", menuPath="users"}){
    const {Lang, local} = useLang();
    const {mediaPath,laraAdmin,nextAdmin,useCity} = useConfig();
    const {destroy,get} = useData();
    // const { flagCity } = useUtility();
    const { componentPermission,checkPermission } = useAccess();
    componentPermission(title+".index");
    const loginAsUserAccess = checkPermission(title+".loginAsUser");

    const formUrl = menuPath == "users" ? nextAdmin+link : nextAdmin+"/"+menuPath+link;
    const loginAsUser = useCallback((e, userId) => {
        e.preventDefault();
    
        get(`${laraAdmin}/login-as-user/${userId}`, "", "", (data) => {
            // اگه لاگین موفق بود
            if (data?.status === 200) {
                const panelUrl = `${nextAdmin}`; // آدرس پنل کاربر
                const a = document.createElement("a");
                const id = "a-" + Math.random();
                a.href = panelUrl;
                a.target = "_blank";
                a.rel = "noopener noreferrer";
                a.id = id;
                document.body.appendChild(a);
                document.getElementById(id).click();
                a.remove();
            } else {
                // نمایش ارور
                alert("Login as user failed");
            }
        });
    }, [get, laraAdmin, nextAdmin]);
    

    let info = {
        ...(menuPath != "/myCourses" ? { insertLink: formUrl + "/new" } : ""),
        // headerJSX: link == "/students" ? <>
        //             <Link className="btn btn-success mr-1 ml-1" href={`${nextAdmin}/${link}/import_excel`}>{Lang(["public.enter_excel"])}</Link>
        //         </> : '',
        exportExcel: link != "/users" ? true : false,
        // insertLink: formUrl + "/new",
        perPage:5,
        url: laraAdmin+link,
        columns: [
            {
                label: "",
                jsx: (item) => (
                    <Pic 
                    src={ mediaPath + "/users/" + item?.photo}
                    defaultImg={`${mediaPath}/public/default/avatar.png`} 
                        classImg="user-avatar rounded-full" 
                        key={"img" + item?.photo} 
                        style={{width: "auto", maxWidth: "100px"}}
                        // width={"auto"}
                    />
                ),
            },
            {
                label: "name", 
                jsx: (item) => <span>{item?.firstname + " " + item?.lastname}</span>,
            },
            ...(menuPath !== 'myCourses' ? [
                { label: "mobile", field: "mobile" },
                { label: "codemeli", field: "codemeli" },
                { label: "username", field: "username" },
                (displayRole)? {label: "role", sort:false, field: "role.title_"+local} : "",
                {label: "gender", sort:false, field: "gender.title_"+local},
                {label: "status", jsx: (item)=><span className={"text-"+item?.active_status?.color}>{item?.active_status?.["title_"+local]}</span>},
                { label: "last_login", field: "last_login" },
            ] : [
                { label: "email", field: "email" },
            ]),
            (useCity=="true")? {label: "location", jsx: (item) =>
                <>
                    <div>{item?.city?.["name_"+local]}</div>
                    <div>{item?.city?.province?.["name_"+local]}</div>
                </>
            }:"",
            {label: "", sort:false, 
                jsx:(item)=><>
                    <div className='flex justify-center '>
                        <FeatherIcon permission={title+".update"} displayIf={menuPath !== 'myCourses'} name="Edit" url={formUrl+"/"+item?.id+"/edit"} tooltip={Lang('public.edit')} />
                        <FeatherIcon name="Lock" url={nextAdmin+"/changePassword/"+item?.id} tooltip={Lang('public.change_password')} />
                        {["/students", "/teachers", "/assistants"].includes(link) &&loginAsUserAccess && (
                            <span className="simple-tooltip mr-1">
                                <a
                                    tooltip={Lang('public.login_as_user')}
                                    href="#"
                                    onClick={(e) => loginAsUser(e, item?.id)}
                                >
                                    <Icon.LogIn />
                                </a>
                                <span className="tooltiptext">{Lang('public.login_as_user')}</span>
                            </span>
                        )}

                        {(menuPath !== 'myCourses'&&view)? <FeatherIcon name="Eye" url={formUrl+"/"+item?.id} tooltip={Lang('public.view')} />:""}
                        {<FeatherIcon displayIf={resume} name="Feather" url={formUrl+"/"+item?.id+"/viewResume"} tooltip={Lang('public.resume')} />}
                        <FeatherIcon displayIf={menuPath !== 'myCourses' && !(item?.count_presented > 0)} permission={title+".destroy"} name="XOctagon" tooltip={Lang('public.delete')} color="darkred" onClick={()=>destroy(laraAdmin+link+"/"+item?.id)} />
                    </div>
                </>
            }, 
        ],
    }

    return(
        <>
            <Frame title={Lang(["public."+title])}>
                <div className="intro-y col-span-12">
                    <Grid {...info} />
                    {title=="students" && 
                        <ButtonContainer>
                            <Link className="btn btn-primary mr-1 ml-1" target="_blanket" href={`${mediaPath}/public/example_students.xlsx`}>{Lang(["public.example_excel"])}</Link>
                            <Link className="btn btn-success mr-1 ml-1" href={`${nextAdmin}/students/excel`}>{Lang(["public.enter_excel"])}</Link>
                        </ButtonContainer>
                    }
                    {title=="teachers" && 
                        <ButtonContainer>
                            <Link className="btn btn-primary mr-1 ml-1" target="_blanket" href={`${mediaPath}/public/example_teachers.xlsx`}>{Lang(["public.example_excel"])}</Link>
                            <Link className="btn btn-success mr-1 ml-1" href={`${nextAdmin}/teachers/excel`}>{Lang(["public.enter_excel"])}</Link>
                        </ButtonContainer>
                    }
                </div>
            </Frame>
        </>
    );
}