<script setup lang="ts">
const props = defineProps<{
  class?: string
  ux?: any
  btnProps?: any
  noClose?: boolean
}>()

const { g } = useContentInjected()
const isMenuOpen = useMobileMenuOpen()

let ignore = false

function down() {
  if (props.noClose && isMenuOpen.value) {
    ignore = true
  }
}

function cancel() {
  if (props.noClose) {
    ignore = false
  }
}

function toggle() {
  if (ignore) {
    ignore = false
    return
  }

  isMenuOpen.value = !isMenuOpen.value
}

const icon = computed(() =>
  isMenuOpen.value ? g.value.scaffold.mobile.close.icon : g.value.scaffold.mobile.open.icon
)

const classes = useStyling(
  'scaffoldMenuToggleButton',
  {
    slots: {
      base: 'p-0 cursor-pointer',
    },
  },
  props
)
</script>

<template>
  <UButton
    :class="classes.base"
    :icon="icon"
    variant="link"
    @pointerdown="down"
    @pointerleave="cancel"
    @pointercancel="cancel"
    @click="toggle"
    v-bind="props.btnProps"
  />
</template>
