import type { CSSProperties } from "react";
import React from "react";
import { CaretRightOutlined } from "@ant-design/icons";
import type { CollapseProps } from "antd";
import { Button, Collapse, Space, theme, Tooltip } from "antd";
import { MdOutlineEdit } from "react-icons/md";
import { RiDeleteBin6Fill } from "react-icons/ri";
import { useGetAllUnit } from "../../../../../api/unit";
import { Unit } from "../../../../../types/Item";
import AddUnitModalForm from "./Model/AddModel";
import EditUnitModalForm from "./Model/EditModel";
import DeleteUnitModalForm from "./Model/Delete";

import useModalHandler from "../../../../../utils/useModalHandler";
import { ModalEnum } from "../../../../../enums/Model";
import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
import Lessons from "./lesson/Lessons";
import { useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";

const genExtra = (
  item: Unit,
  setObjectToEdit: any,
  handel_open_model: any,
  t: any,
) => {
  const handelDelete = (event: any, item: Unit) => {
    handel_open_model(ModalEnum?.UNIT_DELETE);
    setObjectToEdit(item);
  };
  const handleEdit = (event: any, item: Unit) => {
    // console.log(item,"event");
    setObjectToEdit(item);
    handel_open_model(ModalEnum?.UNIT_EDIT);
  };

  return (
    <Space size="middle">
      <Tooltip placement="top" title={t("practical.edit")} color="#E0E0E0">
        <MdOutlineEdit
          size={22}
          style={{ color: "#A098AE" }}
          onClick={(event) => handleEdit(event, item)}
        />
      </Tooltip>
      <RiDeleteBin6Fill
        onClick={(event) => handelDelete(event, item)}
        size={22}
        style={{ color: "#C11313" }}
      />
    </Space>
  );
};

const App: React.FC = () => {
  const { token } = theme.useToken();
  const { handel_open_model } = useModalHandler();
  const { setObjectToEdit } = useObjectToEdit();
  const { subject_id } = useParams();

  const panelStyle: React.CSSProperties = {
    marginBottom: 24,
    background: token.colorFillAlter,
    borderRadius: token.borderRadiusLG,
    border: "none",
  };
  const { data } = useGetAllUnit({
    sub_id: subject_id,
  });
  const [t] = useTranslation();

  const units: Unit[] = data?.data || [];
  const unitsArray: (panelStyle: CSSProperties) => CollapseProps["items"] = (
    panelStyle,
  ) =>
    units?.map((item: Unit) => ({
      key: String(item?.id),
      label: item?.name,
      children: <Lessons unit_id={item?.id} data={item?.lessons} />,
      style: panelStyle,
      extra: genExtra(item, setObjectToEdit, handel_open_model, t),
    })) || [];

  // console.log(units,"units");

  return (
    <div className="Unit_Page">
      <Collapse
        bordered={false}
        expandIcon={({ isActive }) => (
          <CaretRightOutlined rotate={isActive ? 90 : 0} />
        )}
        style={{ background: token.colorBgContainer }}
        items={unitsArray(panelStyle)}
      />
      <Button
        type="dashed"
        onClick={() => handel_open_model(ModalEnum?.UNIT_ADD)}
      >
        {t("header.add_new_unit")}
      </Button>
      <AddUnitModalForm />
      <EditUnitModalForm />
      <DeleteUnitModalForm />
    </div>
  );
};

export default App;