import React from "react";
import { useDrag, useDrop } from "react-dnd";
import { AuthContext } from "@/context/Auth";
import MkdSDK from "@/utils/MkdSDK";
import LIstItems from "./LIstItems";

const style = {
  border: "1px dashed gray",
  padding: "0.5rem 1rem",
  marginBottom: ".5rem",
  backgroundColor: "white",
  cursor: "move",
};

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

const Lists = ({
  list,
  getData,
  statuses,
  items,
  setItems,
  moveList,
  id,
  index,
}) => {
  const { dispatch } = React.useContext(AuthContext);
  const [cardItems, setCardItems] = React.useState([]);

  const ref = React.useRef(null);

  const [{ handlerId }, drop] = useDrop({
    accept: ItemTypes.CARD,
    collect(monitor) {
      return {
        handlerId: monitor.getHandlerId(),
      };
    },
    hover(item, monitor) {
      if (!ref.current) {
        return;
      }
      const dragIndex = item.index;
      const hoverIndex = index;
      if (dragIndex === hoverIndex) {
        return;
      }
      const hoveredRect = ref.current.getBoundingClientRect();
      const hoverMiddleY = (hoveredRect.bottom - hoveredRect.top) / 2;
      const mousePosition = monitor.getClientOffset();
      const hoverClientY = mousePosition.y - hoveredRect.top;

      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
        return;
      }

      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
        return;
      }
      moveList(dragIndex, hoverIndex);
      item.index = hoverIndex;
    },
  });
  const [{ isDragging }, drag] = useDrag({
    type: ItemTypes.CARD,
    item: { id, index },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });
  const opacity = isDragging ? 0 : 1;
  drag(drop(ref));

  const getCardsByList = async () => {
    let sdk = new MkdSDK();
    try {
      const result = await sdk.callRawAPI(
        `/v2/api/lambda/pm/lists/${list?.status}/cards`,
        {},
        "GET"
      );
      let cardsList = [];
      result.list.map((item) =>
        cardsList.push({
          id: item.id,
          icon: icons[item.list_id],
          // status: "open",
          status: item.list_id,
          title: "Human Interest Form",
          content: item.name,
        })
      );
      setCardItems(cardsList);
    } catch (error) {
      tokenExpireError(dispatch, error.message);
    }
  };

  React.useEffect(() => {
    (async function () {
      await getCardsByList();
    })();
  }, [list?.status]);

  return (
    <div
      className=""
      ref={ref}
      style={{ ...style, opacity }}
      data-handler-id={handlerId}
    >
      <LIstItems
        list={list}
        cardItems={cardItems}
        getData={getData}
        items={items}
        setItems={setItems}
        statuses={statuses}
      />
    </div>
  );
};

export default Lists;
