import { InteractiveButton } from "@/components/InteractiveButton";
import { Modal } from "@/components/Modal/Modal";
import MkdSDK from "@/utils/MkdSDK";
import React, { memo } from "react";

const classes = {
  modal: "string",
  modalDialog: "relative bg-white w-[43.75rem]",
  modalContent: "string",
  modalHeader: "string",
  modalTitle: "string",
  modalBody: "string",
  modalFooter: "string",
  closeButtonClass: "string",
  saveButtonClass: "string",
};

const sdk = new MkdSDK();

const AddBoardsModal = ({
  isOpen = false,
  modalCloseClick,
  modalHeader,
  setAddWorkspaceOpen,
  getData,
  workspaceId,
}) => {
  const [val, setVal] = React.useState("");
  const [desc, setDesc] = React.useState("");
  const [position, setPosition] = React.useState("");
  const [isFavourite, setIsFavourite] = React.useState(false);


  const handleClick = async () => {
    try {
      const obj = {
        name: val,
        description: desc,
        position,
        isFavourite,
      };
      const res = await sdk.createUserBoards(workspaceId, obj);
      if (res?.error === false) {
        setAddWorkspaceOpen(false);
        getData && getData();
      }
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <Modal
      modalCloseClick={modalCloseClick}
      isOpen={isOpen}
      modalHeader={modalHeader}
      title={`Add Boards`}
      classes={classes}
    >
      <div className={` h-[fit-content] w-full rounded`}>
        <div className="flex flex-wrap items-center justify-between gap-5">
          <input
            value={val}
            onChange={(e) => setVal(e.target.value)}
            type="text"
            className={`h-full grow rounded border-2 border-slate-600 outline-none`}
            placeholder="Name"
          />
          <input
            value={desc}
            onChange={(e) => setDesc(e.target.value)}
            type="text"
            className={`h-full grow rounded border-2 border-slate-600 outline-none`}
            placeholder="Description"
          />
          <input
            value={position}
            onChange={(e) => setPosition(e.target.value)}
            type="text"
            className={`h-full grow rounded border-2 border-slate-600 outline-none`}
            placeholder="position"
          />
        </div>

        <InteractiveButton
          loading={undefined}
          className={`mt-3 h-10 w-1/3 rounded text-xs text-white`}
          backgroundColor={undefined}
          onClick={handleClick}
        >
          Create
        </InteractiveButton>
      </div>
    </Modal>
  );
};

export default memo(AddBoardsModal);
