import React from "react";
import { HTML5Backend } from "react-dnd-html5-backend";
import { DndProvider } from "react-dnd";
import BoardCardsPage from "./BoardCardsPage";
import { AuthContext, tokenExpireError } from "@/context/Auth";
import MkdSDK from "@/utils/MkdSDK";

const icons = { 1: "⭕️", 2: "🔆️", 3: "📝", 4: "✅" };

const MkdTrelloColumns = () => {
  const { dispatch } = React.useContext(AuthContext);
  const [currentTableData, setCurrentTableData] = React.useState([]);

  async function getData() {
    let sdk = new MkdSDK();
    try {
      const result = await sdk.callRawAPI(
        `/v2/api/lambda/pm/boards/${0}/lists?order_by=id&direction=asc`,
        {},
        "GET"
      );

      const { list } = result;
      let lists = [];
      list.map((item) =>
        lists.push({
          status: item.id,
          title: item.name,
          icon: icons[item.id],
          color: "#EB5A46",
          position: item.position,
        })
      );
      setCurrentTableData(lists);
    } catch (error) {
      tokenExpireError(dispatch, error.message);
    }
  }

  React.useEffect(() => {
    (async function () {
      await getData();
    })();
  }, []);

  return (
    <div>
      <DndProvider backend={HTML5Backend}>
        <BoardCardsPage
          currentTableData={currentTableData}
          setCurrentTableData={setCurrentTableData}
          getData={getData}
        />
      </DndProvider>
    </div>
  );
};

export default MkdTrelloColumns;
