import React from "react";
import { AddBoardsModal } from "./AddBoardsModal";
import MkdSDK from "@/utils/MkdSDK";

const WorkspacesListCard = ({
  ws,
  handleWorkspaceListCardNavClick,
  handleWorkspaceBoardClick,
}) => {
  const [addWorkspaceOpen, setAddWorkspaceOpen] = React.useState(false);
  const [boards, setBoards] = React.useState([]);
  const sdk = new MkdSDK();

  const getBoards = async () => {
    try {
      const res = await sdk.getUserBoards(ws?.id);
      if (!res.error) {
        setBoards(res.list);
      }
    } catch (err) {
      console.log("error" + " " + err);
    }
  };

  React.useEffect(() => {
    getBoards();
  }, []);
  const onCloseAddWorkspaceModal = React.useCallback(() => {
    setAddWorkspaceOpen(false);
  }, [addWorkspaceOpen]);
  return (
    <>
      <div className="mb-12">
        <div className="workspace-properties mb-4 flex items-center  gap-x-[11rem]   border-b pb-2">
          <div className="flex">
            <div
              className={`mr-2 flex h-[1.7215rem] w-[1.7215rem] items-center justify-center rounded bg-gradient-to-tr from-[#006644] to-[#00875a] text-[1rem] font-semibold uppercase text-white`}
            >
              {ws?.name[0]}
            </div>
            <span className="text-[17px] font-bold text-[#172B4D]">
              {ws?.name}
            </span>
          </div>

          <div className="mr-14 flex gap-x-2">
            <div
              onClick={() =>
                handleWorkspaceListCardNavClick(ws?.id, "workspaceBoards")
              }
              className="cursor-pointer rounded-[3px] bg-[#091e420a] p-[6px_12px_6px_6px] text-sm"
            >
              Boards
            </div>
            <div
              onClick={() =>
                handleWorkspaceListCardNavClick(ws?.id, "workspaceMembers")
              }
              className="cursor-pointer rounded-[3px] bg-[#091e420a] p-[6px_12px_6px_6px] text-sm"
            >
              Members
            </div>
            <span className="rounded-[3px] bg-[#091e420a] p-[6px_12px_6px_6px] text-sm">
              settings
            </span>
          </div>
        </div>

        <div className="workspace-boards grid grid-cols-3 gap-3 ">
          {boards.length > 0
            ? boards?.map((board, _index) => {
                return (
                  <div
                    key={_index}
                    onClick={() => handleWorkspaceBoardClick(board?.id)}
                    className=" flex h-[100px] cursor-pointer items-center justify-center rounded bg-[#007A52] text-lg font-semibold text-white"
                    title={board?.description}
                  >
                    {board?.name}
                  </div>
                );
              })
            : null}
          <div
            onClick={() => setAddWorkspaceOpen(true)}
            className="flex h-[100px] w-[200px] cursor-pointer items-center justify-center bg-[#091e420a]"
          >
            <span className="text-sm"> Create new board</span>
          </div>
        </div>
      </div>
      <AddBoardsModal
        modalCloseClick={onCloseAddWorkspaceModal}
        modalHeader
        isOpen={addWorkspaceOpen}
        setAddWorkspaceOpen={setAddWorkspaceOpen}
        getData={getBoards}
        workspaceId={ws?.id}
      />
    </>
  );
};

export default WorkspacesListCard;
