import { Comment } from "./api/label/typing"
import { create } from "zustand"
import { persist } from "zustand/middleware"
import { useLabelStore } from "./store"
import { useTopToolsStore } from "./useTopToolsStore"

interface OtherToolsState {
  showContextMenu: boolean
  position: {
    top: number
    right: number
    bottom: number
    left: number
  }
  imageId: string
  operationId: string
  id: number
  setContextMenuId: (id: number) => void
  setContextMenuOperationId: (operationId: string) => void
  setShowContextMenu: (props: {
    showContextMenu: boolean
    position: {
      top: number
      left: number
    }
    imageId: string
    operationId: string
    id: number
  }) => void
}

const initOtherToolsState = {
  showContextMenu: false,
  position: {
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  imageId: "",
  operationId: "",
  id: 0,
}

export const useOtherToolsStore = create(
  persist<OtherToolsState>(
    (set) => ({
      showContextMenu: initOtherToolsState.showContextMenu,
      position: initOtherToolsState.position,
      imageId: initOtherToolsState.imageId,
      operationId: initOtherToolsState.operationId,
      id: initOtherToolsState.id,
      setContextMenuId: (id) =>
        set((state: OtherToolsState) => ({
          ...state,
          id,
        })),
      setContextMenuOperationId: (operationId) =>
        set((state: OtherToolsState) => ({
          ...state,
          operationId,
        })),
      setShowContextMenu: ({
        showContextMenu,
        position,
        imageId,
        operationId,
        id,
      }) => {
        if (
          showContextMenu &&
          useTopToolsStore.getState().currentTimeKey !== "label"
        ) {
          // 打开子属性及批注弹窗时，更新当前标注对象detail
          const currentDetail = useLabelStore
            .getState()
            .getLabelDetailDataByKeys(imageId, operationId, id)
          const { comment } = currentDetail
          const updatedComment = comment.map((item: Comment, index: number) =>
            index < comment.length - 1
              ? item
              : {
                  ...item,
                  comment_type: item.comment_type || 1,
                }
          )
          useLabelStore
            .getState()
            .updateLabelDetailDataByKeys(imageId, operationId, id, {
              ...currentDetail,
              comment: updatedComment,
            })
        }
        return set((state: OtherToolsState) => ({
          ...state,
          showContextMenu,
          position: { ...position, bottom: 0, right: 0 },
          imageId,
          operationId,
          id,
        }))
      },
    }),
    {
      name: "other-tools",
    }
  )
)