"use client";
import { useEffect, useRef, useState } from "react";
import { useConfig } from "@/lib/config";
import { useLang } from "@/lib/lang";
import { useAccess } from "@/lib/access";
import { use } from "react";
import { Pic, useData } from "@/Theme/Midone/Utils";
import { Box, Button, ButtonContainer } from "@/Theme/Midone/Forms";
import { Select } from "@/Theme/Midone/Forms/Select";
import { Grid, Frame } from "@/Theme/Midone/Utils";
import { FeatherIcon } from "@/Theme/Midone/Utils/FeatherIcon";
import Link from 'next/link';

const CourseGrid = ({ info }) => {
  return (
    <div className="intro-y col-span-12">
      <Grid {...info} key={info.url} activeSearch={false} />
    </div>
  );
};

export default function Page({ params }) {
  const {laraAdmin,nextAdmin,mediaPath } = useConfig();
  const { Lang, local } = useLang();
  // Unwrap params با استفاده از use
  const { id } = use(params);
  // const formUrl = "/packages/courses";
  const formUrl = "/courses";
  const laraUrl = `${laraAdmin}/packages/${id}/courses`;
  const { componentPermission } = useAccess();
  componentPermission(`packages.courses`);

  const CourseActions = ({ item, Lang, formUrl, nextAdmin }) => (
    <div className="flex justify-center">
      <FeatherIcon name="Settings" url={`${nextAdmin + formUrl}/${item.code}/tools`} tooltip={Lang('public.tools')} />
    </div>
  );

  const info = {
    url: laraUrl,
    columns: [
      { label: "", minWidth:"70px", jsx:(item)=><Pic src={`${mediaPath}/courses/${item?.thumbnail}`} defaultImg={`${mediaPath}/public/default/course.jpg`} classImg="user-avatar" key={"img"+item?.thumbnail} />},
      { label: "course", minWidth:"180px", jsx:(item)=><Link href={`${nextAdmin + formUrl}/${item.code}/tools`}>{item.title}</Link> },
      { label: "course_code", field: "code" },
      { label: "teacher", minWidth:"180px", jsx:(item)=><span>{item?.presenteds?.[0]?.teacher?.firstname+" "+item?.presenteds?.[0]?.teacher?.lastname}</span> },
      // access ?{label: "creator", jsx: (item)=><span>{item.creator?.firstname+" "+item.creator?.lastname}</span>}:"",
      // access ?{label: "editor", jsx: (item)=><span>{item.editor?.firstname+" "+item.editor?.lastname}</span>}:"",
      { label: "status", jsx: (item) => <span className={`text-${item?.active_status?.color}`}>{item?.active_status?.[`title_${local}`]}</span> },
      { label: "", sort: false, width: "110px", jsx: (item) => <CourseActions item={item} Lang={Lang} formUrl={formUrl} nextAdmin={nextAdmin} /> },
    ],
  };
  console.log(nextAdmin);
  

  return (
    <Frame title={Lang(["public.courses"])}>
      <CourseGrid info={info} />
    </Frame>
  );
}