"use client";
import { useLang } from "@/lib/lang";
import { useAccess } from "@/lib/access";
import { BackBtn, Button, ButtonContainer, CourseToolsBtn } from "@/Theme/Midone/Forms";
import { Grid, Frame,useData} from "@/Theme/Midone/Utils";
import { FeatherIcon} from "@/Theme/Midone/Utils/FeatherIcon";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useState } from "react";

export function Page({laraPath, nextPath ,course}){

    const router = useRouter();
    const { componentPermission,checkPermission } = useAccess();
    // componentPermission(`educationalProcess.educationalProcess-list`);
    // ==================================================== این دسترسی لحاظ شده بود و نمیدونم چرا باید دسترسی خط سیر باشد
    // const accessStroe = checkPermission("contents.store");
    // const accessReport = checkPermission("contents.store");
    // ==================================================== این دسترسی لحاظ شده بود و نمیدونم چرا باید دسترسی خط سیر باشد
    const accessStroe = checkPermission("educationalProcess.store");
    const accessReport = checkPermission("educationalProcess.store");
    const accessDestroy = "educationalProcess.destroy";
    
    const back = ()=>router.back();
    const {Lang,local} = useLang();
    const {destroy} = useData();
    const menuPath = usePathname().split('/').includes('myCourses') ? 'myCourses' : 'courses';
    let formUrl = "/"+menuPath+"/"+course+"/tools/educational_process";
    const toolsConfig = {
        t1: {
            label: "learnpath",
            class: "bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded",
            href: "learnpath",
            // getInfo: (item) => item?.tools?.duration
        },
        // t2: {
        //     label: "onlineClassroom",
        //     class: "bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded",
        //     href: "onlineClassroom",
        //     // getInfo: (item) => `${item?.tools?.date || ''} ${item?.tools?.start_hour || ''}`
        // },
        t5: {
            label: "quiz",
            class: "bg-orange-100 text-orange-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded",
            href: "quiz",
            // getInfo: (item) => `${item?.tools?.start_date || ''} ${item?.tools?.start_time || ''}`
        },
        t6: {
            label: "assignments",
            class: "bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded",
            href: "assignment",
            // getInfo: (item) => item?.tools?.start_date
        }
    };

    const getToolProperty = (tool, key) => toolsConfig[tool]?.[key] || tool;

    const getInfo = (item) => {
        const tool = item?.toolsname;
        return toolsConfig[tool]?.getInfo?.(item) || "";
    };

    const info = {
    ...(menuPath === "courses" || menuPath === "myCourses") && accessStroe
        ? { insertLink: nextPath + formUrl + "/new" }
        : {},
    insertLabel: "edit_educational_process",
    activeSearch: false,
    perPage: 100,
    url: `${laraPath}/educationalProcess-list?course=${course}`,
    headerJSX:<>
            <Link className="btn btn-success mr-1 ml-1" href={`${nextPath}/courses/${course}/chapters`}>{Lang(["public.chapters"])}</Link>
        </>,
    columns: [
        {
            label: "chapter", field:"chapter.title"
        },
        {
            label: "tools",
            jsx: (item) => (
                <span className={getToolProperty(item?.toolsname, "class")}>
                    {Lang(`public.${getToolProperty(item?.toolsname, "label")}`)}
                </span>
            )
        },
        {
            label: "title",
            jsx: (item) => (
                <span>{item?.tools?.title}</span>
            )
        },
        ...(menuPath === "courses"
            ? [
                  {
                      label: "need_to_complete_title",
                      jsx: (item) => (
                          <span>
                              {item?.need_to_complete === 1
                                  ? Lang("public.yes")
                                  : Lang("public.no")}
                          </span>
                      )
                  }
              ]
            : []),
        // {
        //     label: "progress_percentage",
        //     jsx: (item) => {
        //     //   const progress = Math.floor(Math.random() * 101);
        //         const progress = item?.userDuration;
        //         return (
        //             <div className="w-full bg-gray-200 rounded-full h-3">
        //                 <div
        //                     className="bg-green-500 h-3 rounded-full"
        //                     style={{ width: `${progress}%` }}
        //                     title={`${progress}%`}
        //                 ></div>
        //             </div>
        //         );
        //     }
        // },
        ...(menuPath === "myCourses"
            ? [
                  {
                      label: "progress_percentage",
                      jsx: (item) => {
                        //   const progress = Math.floor(Math.random() * 101);
                          const progress = item?.userDuration;
                          return (
                              <div className="w-full bg-gray-200 rounded-full h-3">
                                  <div
                                      className="bg-green-500 h-3 rounded-full"
                                      style={{ width: `${progress}%` }}
                                      title={`${progress}%`}
                                  ></div>
                              </div>
                          );
                      }
                  }
              ]
            : []),
        {
            label: "",
            sort: false,
            width: "110px",
            jsx: (item) => (
                <div className="flex justify-center">
                    <FeatherIcon
                        displayIf={accessReport || item?.display_record == 1}
                        name="Eye"
                        url={`${nextPath}/${menuPath}/${course}/tools/${getToolProperty(item?.toolsname, "href")}/${item?.tools_id}`}
                        tooltip={Lang("public.view")}
                    />
                    <FeatherIcon
                        // permission="contents.destroy" // در ابتدا این بود چرا نمیدونم؟
                        permission={accessDestroy}
                        name="XOctagon"
                        tooltip={Lang("public.delete")}
                        color="darkred"
                        onClick={() =>
                            destroy(`${laraPath}/educationalProcess/${item.id}`)
                        }
                    />
                </div>
            )
        }
    ]
    };    

    return(
        <Frame title={Lang(["public.educational_process"])}>
            <div className="intro-y col-span-12">
                <Grid className={"table-report"} {...info} key={"table key"} />
                <ButtonContainer>
                    <CourseToolsBtn href={`${nextPath}/${menuPath}/${course}/tools`} />
                    <BackBtn onClick={back} />
                </ButtonContainer>
            </div>
        </Frame>
        
    );
}