"use client";
import { useEffect, useRef, useState } from "react";
import { useConfig } from "@/lib/config";
import { useLang } from "@/lib/lang";
import { useAccess } from "@/lib/access";
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 CourseFilters = ({ params, setParams, needles, local, Lang }) => {
  const handleFilterChange = (e, filter) => {
    setParams((prevParams) => ({ ...prevParams, [filter]: e.target.value }));
  };

  const clearFilter = () => {
    setParams({ category: "", status: "",system:"" });
  };

  return (
    <Box shadow={false} minIcon={true} min={true} cols={"grid-cols-10"}>
      <Select
        defaultValue={params.category}
        onChange={(e) => handleFilterChange(e, "category")}
        className="col-span-5 md:col-span-3"
        label="lesson_group"
        data={needles?.coursecategory}
        titleKey={"title_" + local}
      />
      <Select
        defaultValue={params.system}
        onChange={(e) => handleFilterChange(e, "system")}
        className="col-span-5 md:col-span-3"
        label="system"
        data={needles?.system}
      />
      <Select
        defaultValue={params.status}
        onChange={(e) => handleFilterChange(e, "status")}
        className="col-span-5 md:col-span-3"
        label="status"
      >
        <option key={1} value={1}> {Lang(["public.active"])} </option>
        <option key={0} value={0}> {Lang(["public.inactive"])} </option>
      </Select>
      <ButtonContainer className="mt-7 md:mt-6 text-right ">
        <Button label="clear_filter" className="btn btn-secondary w-20" onClick={clearFilter} />
      </ButtonContainer>
    </Box>
  );
};

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

const CourseActions = ({ item, Lang, laraPath, formUrl, nextPath, destroy }) => (
  <div className="flex justify-center">
    {item.type_id==1?
      <>
        <FeatherIcon permission="packages.update" name="Edit" url={`${nextPath + formUrl}/${item.id}/edit?type=oneCourse`} tooltip={Lang('public.edit')} />
        <FeatherIcon permission="packages.tools" name="Settings" url={`${nextPath}/courses/${item.presenteds?.[0]?.code}/tools`} tooltip={Lang('public.tools')} />
      </>
    :
      <>
        <FeatherIcon permission="packages.update" name="Edit" url={`${nextPath + formUrl}/${item.id}/edit`} tooltip={Lang('public.edit')} />
        <FeatherIcon permission="packages.courses" name="Book" url={`${nextPath}/packages/${item.id}/courses`} tooltip={Lang('public.courses')} />
      </>
    }
    <FeatherIcon permission="packages.showInfo" name="Eye" url={`${nextPath + formUrl}/${item.id}`} tooltip={Lang('public.view')} />
    <FeatherIcon permission="packages.students" name="Users" url={`${nextPath}/packages/${item.id}/students`} tooltip={Lang('public.students')} />
    <FeatherIcon permission="packages.destroy" displayIf={!(item?.count_presented > 0)} name="XOctagon"  tooltip={Lang('public.delete')} color="darkred" onClick={() => destroy(`${laraPath + formUrl}/${item.code}`)} />
    {/* <FeatherIcon permission="packages.update" name="Edit" url={`${nextPath + formUrl}/${item.code}/edit`} tooltip={Lang('public.edit')} />
    <FeatherIcon name="Eye" url={`${nextPath + formUrl}/${item.code}`} tooltip={Lang('public.view')} />
    <FeatherIcon permission="packages.destroy" displayIf={!(item?.count_presented > 0)} name="XOctagon"  tooltip={Lang('public.delete')} color="darkred" onClick={() => destroy(`${laraPath + formUrl}/${item.code}`)} /> */}
  </div>
);

export function Page({ laraPath, nextPath }) {
  const { mediaPath } = useConfig();
  const { Lang, local } = useLang();
  const { destroy, getNeedles } = useData();
  const [ needles, setNeedles ] = useState();
  const [ params, setParams ] = useState({ category: "", status: "",system:"" });
  const [ url, setUrl ] = useState(`${laraPath}/packages`);
  const effectRan = useRef(false);
  const formUrl = "/packages"; // تعریف formUrl
  const { componentPermission,checkPermission } = useAccess();
  componentPermission(`packages.index`);
  const accessStroe = checkPermission("packages.store");
  const accessOneCourse = checkPermission("packages.storeOneCourse");

  useEffect(() => {
    if (!effectRan.current) {
      getNeedles(`${laraPath}${formUrl}/get-needles`, setNeedles);
      effectRan.current = true;
    }
  }, [getNeedles, laraPath, formUrl]);

  useEffect(() => {
    const urlItems = Object.keys(params)
      .filter(key => params[key] !== "")
      .map(key => `${key}=${params[key]}`)
      .join("&");
    setUrl(`${laraPath}/packages?${urlItems}`);
  }, [params, laraPath]);
  
  const badge = {
    'publicPrice':'bg-blue-100 w-32 text-xs font-medium me-2 px-2.5 py-0.5 rounded ',
    'mainPrice':'text-blue-800 dark:bg-blue-900 dark:text-blue-300',
    'price':'text-blue-800 dark:bg-blue-900 dark:text-blue-300',
    'publicCategory':'bg-blue-100 w-42 text-xs font-medium me-2 px-2.5 py-0.5 rounded ',
    'category':'text-blue-800 dark:bg-blue-900 dark:text-blue-300',
    'level':'text-blue-800 dark:bg-blue-900 dark:text-blue-300',
    'publicStatus':'bg-blue-100 w-32 text-xs font-medium me-2 px-2.5 py-0.5 rounded ',
    'type':'text-blue-800 dark:bg-blue-900 dark:text-blue-300',
    'method':'text-blue-800 dark:bg-blue-900 dark:text-blue-300',
  }

  const info = {
    insertLabel: Lang("public.insert_multi_course"),
    insertLink: accessStroe? `${nextPath}${formUrl}/new` : "",
    headerJSX:<>
        {accessOneCourse &&
          <Link className="absolute top-14 left-2 sm:relative sm:float-left sm:mt-2 sm:top-0 mb-1 btn btn-primary mr-5 mb-2"
            href={`${nextPath}${formUrl}/new?type=oneCourse`}>{Lang(["public.insert_one_course"])}
          </Link>
        }
    </>,
    perPage: 50,
    url: url,
    columns: [
      { label: "", minWidth:"70px", jsx:(item)=><Pic src={`${mediaPath}/packages/${item?.thumbnail}`} defaultImg={`${mediaPath}/public/default/course.jpg`} classImg="user-avatar" key={"img"+item?.thumbnail} />},
      { label: "package", minWidth:"180px", jsx:(item)=><Link href={`${nextPath + formUrl}/${item.id}/edit`}>{item.title}</Link> },
      {label: "price", jsx: (item)=>
        <span>
            <div className={badge["publicPrice"]+badge["mainPrice"]}>{Lang("main_price")+":"}{item?.main_price}</div>
            <div className={badge["publicPrice"]+badge["price"]}>{Lang("price")+":"}{item?.price}</div>
        </span>
      },
      {label: "category", jsx: (item)=>
        <span>
            <div className={badge["publicCategory"]+badge["category"]}>{Lang("category")+":"}{item?.category?.title_fa}</div>
            <div className={badge["publicCategory"]+badge["level"]}>{Lang("level")+":"}{item?.level?.title_fa}</div>
        </span>
      },
      {label: "package_status", jsx: (item)=>
        <span>
            <div className={badge["publicStatus"]+badge["type"]}>{Lang("type")+":"}{item?.type?.title_fa}</div>
            <div className={badge["publicStatus"]+badge["method"]}>{Lang("method")+":"}{item?.method?.title_fa}</div>
        </span>
      },
      // { label: "system", minWidth:"110px", field: "system.title" },
      { label: "status", jsx: (item) => 
          <span>
            <div className={`text-${item?.publish_status?.color}`}>{item?.publish_status?.[`title_${local}`]}</div>
            {/* <div className={`text-${item?.active_status?.color}`}>{item?.active_status?.[`title_${local}`]}</div> */}
          </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} laraPath={laraPath} formUrl={formUrl} nextPath={nextPath} destroy={destroy} /> },
    ],
  };

  return (
    <Frame title={Lang(["public.packages"])}>
      {/* <CourseFilters key={params} params={params} setParams={setParams} needles={needles} local={local} Lang={Lang} /> */}
      <CourseGrid info={info} />
    </Frame>
  );
}