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 AddWorkspaceModal = ({
  isOpen = false,
  modalCloseClick,
  modalHeader,
  setWorkspaces,
  setAddWorkspaceOpen,
}) => {
  const [val, setVal] = React.useState("");
  const [desc, setDesc] = React.useState("");
  const [website, setWebsite] = React.useState("");
  const [slug, setSlug] = React.useState("");

  const handleClick = async () => {
    try {
      const obj = {
        name: val,
        description: desc,
        website,
        slug,
      };
      const res = await sdk.createWorkspace(obj);
      if (res?.error === false) {
        setWorkspaces((prev) => [...prev, obj]);
        setAddWorkspaceOpen(false);
      }
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <Modal
      modalCloseClick={modalCloseClick}
      isOpen={isOpen}
      modalHeader={modalHeader}
      title={`Add Workspace`}
      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={website}
            onChange={(e) => setWebsite(e.target.value)}
            type="text"
            className={`h-full grow rounded border-2 border-slate-600 outline-none`}
            placeholder="website"
          />
          <input
            value={slug}
            onChange={(e) => setSlug(e.target.value)}
            type="text"
            className={`h-full grow rounded border-2 border-slate-600 outline-none`}
            placeholder="slug"
          />
        </div>

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

export default memo(AddWorkspaceModal);
