<script setup>
import { toast } from 'bulma-toast'

const router = useRouter()
const url = useRequestURL()
const tabs = useTabs()
const activeSave = useActiveSave()
const windowFrom = useWindowFrom()
const windowParam = useWindowParam()

const props = defineProps({
  modelValue: [String, Number],
  items: Array,
  info: Object,
  disabled: Boolean
})

const emit = defineEmits(['update:modelValue'])

const contextMenu = ref(false)
const contextMenuX = ref(0)
const contextMenuY = ref(0)
const contextMenuHandler = (e) => {
  if(!props?.disabled) {
    contextMenuX.value = e.pageX
    contextMenuY.value = e.pageY
    contextMenu.value = true
  }
}
const closeContextMenu = () => {
  contextMenuX.value = 0
  contextMenuY.value = 0
  contextMenu.value = false
}

const checkItem = (item) => {
  let newItems = props.items || []
  return newItems.includes(item)
}

const goTo = (toPath, pathName) => {
  if(activeSave.value) {
    toast({
      message: 'Save button is active, please submit the data before leaving!',
      type: 'is-warning',
      duration: 2000
    })
  } else {
    windowFrom.value = props.info.windowFrom
    if(windowParam.value) {
      windowParam.value[props.info.windowFrom] = {
        path: url.pathname,
        data: props.info
      }
    } else {
      windowParam.value = {
        [props.info.windowFrom]: {
          path: url.pathname,
          data: props.info
        }
      }
    }
    
    tabs.value.map(item => {
      item.active = false
      return item
    })
    if(tabs.value.filter(i => i.link === toPath).length >= 1) {
      const tabIndex = tabs.value.findIndex(i => i.link === toPath)
      tabs.value[tabIndex].active = true
      router.push(toPath)
    } else {
      tabs.value.push({link: toPath, text: pathName, active: true})
      localStorage.setItem('tabs', JSON.stringify(tabs.value))
      router.push(toPath)
    }
  }
}

const zoom = () => {
  if(props.info?.toPath && props.info?.pathName) {
    goTo(props.info.toPath, props.info.pathName)
  }
  closeContextMenu()
}
const clear = () => {
  emit('update:modelValue', '')
  closeContextMenu()
}
</script>

<template>
  <ClientOnly>
    <div @contextmenu.prevent="contextMenuHandler($event)">
      <slot></slot>
    </div>
  </ClientOnly>
  <teleport to="body">
    <div v-if="contextMenu" class="contextMenu" @click.self="contextMenu = false" @contextmenu.prevent="">
      <div class="contextMenuContent" :style="{left: contextMenuX + 'px', top: contextMenuY + 'px'}">
        <div v-if="checkItem('zoom') && props.info?.toPath && props.info?.pathName" class="contextMenuItem" @click="zoom">
          <i class="tf-icons ti ti-circle-arrow-up-right-filled fg-hex999 mr-2"></i>
          <span>Zoom</span>
        </div>
        <div v-if="checkItem('clear')" class="contextMenuItem" @click="clear">
          <i class="tf-icons ti ti-eraser fg-hex999 mr-2"></i>
          <span>Clear</span>
        </div>
      </div>
    </div>
  </teleport>
</template>

<style scoped>
@use contextMenu;
</style>