import React from "react";
import { Lesson } from "../../../../../../types/Item";
import { Button, Space, Tooltip } from "antd";
import useModalHandler from "../../../../../../utils/useModalHandler";
import { ModalEnum } from "../../../../../../enums/Model";
import AddUnitModalForm from "./Model/AddModel";
import EditUnitModalForm from "./Model/EditModel";
import DeleteUnitModalForm from "./Model/Delete";

import { MdOutlineEdit } from "react-icons/md";
import { RiDeleteBin6Fill } from "react-icons/ri";
import { useObjectToEdit } from "../../../../../../zustand/ObjectToEditState";
import { useTranslation } from "react-i18next";

const Lessons = ({ data, unit_id }: { data: Lesson[]; unit_id: number }) => {
  const { handel_open_model } = useModalHandler();
  const { setObjectToEdit } = useObjectToEdit();

  const handelDelete = (item: Lesson) => {
    handel_open_model(ModalEnum?.LESSON_DELETE);
    setObjectToEdit(item);
  };
  const handleEdit = (item: Lesson) => {
    // console.log(item,"event");
    setObjectToEdit(item);
    handel_open_model(ModalEnum?.LESSON_EDIT);
  };
  const handleAdd = () => {
    setObjectToEdit({ unit_id: unit_id });
    handel_open_model(ModalEnum?.LESSON_ADD);
  };
  const [t] = useTranslation();
  return (
    <div className="Lessons">
      {data.map((lesson) => (
        <div className="Lesson" key={lesson.id}>
          <div>{lesson?.name}</div>
          <Space size="middle">
            <Tooltip
              placement="top"
              title={t("practical.edit")}
              color="#E0E0E0"
            >
              <MdOutlineEdit
                size={22}
                style={{ color: "#A098AE" }}
                onClick={(event) => handleEdit(lesson)}
              />
            </Tooltip>
            <RiDeleteBin6Fill
              onClick={(event) => handelDelete(lesson)}
              size={22}
              style={{ color: "#C11313" }}
            />
          </Space>
        </div>
      ))}
      <Button type="dashed" onClick={handleAdd}>
        {t("header.add_new_lessons")}
      </Button>
      <AddUnitModalForm />
      <EditUnitModalForm />
      <DeleteUnitModalForm />
    </div>
  );
};

export default Lessons;