<script setup>
import {NButton, NP, NFlex, NTag, NIcon} from "naive-ui";
import {TbLock} from "vue-icons-plus/tb"
import {Link} from "@inertiajs/vue3";
import {computed, h} from "vue";
import { useThemeVars } from "naive-ui";

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  lock: {
    type: Boolean,
    default: false
  },
  lockMessage: {
    type: String,
    default: null
  },
  description: {
    type: String,
    default: ''
  },
  href: {
    type: String,
    default: '/'
  },
  icon: {
    type: [Object, Function],
    default: null
  },
  tag: {
    type: [Object, Function, String],
    default: Link
  },
  click: {
    type: [Function, Object],
  }
})
const emits = defineEmits(['click'])

const buttonThemeOverride = {
  heightLarge: '64px',
  borderRadiusLarge: '8px'
}

const pThemeOverride = {
  pMargin: '',
  pLineHeight: '1.4'
}

const themeVars = useThemeVars()
const hasIcon = computed(() => props.icon !== null)

const isLink = computed(() => props.tag === 'link')

const onClick = () => {
    if (isLink.value || props.lock) return

    emits('click')
}

const lockTag = computed(() => {
  if (props.lock) return 'button'
  return props.tag
})
</script>

<template>
  <div class="relative overflow-hidden w-full rounded-md" :style="`background: ${themeVars.cardColor};`">
      <NButton :tag="lockTag"
           :href="href"
           :theme-overrides="buttonThemeOverride"
           @click="onClick"
           size="large"
           block
           class="justify-start! text-left!"
           :disabled="lock"
    >
      <template v-if="hasIcon" #icon>
        <component :is="icon" v-if="icon" />
      </template>
      <NFlex justify="space-between" align="center">
        <NFlex vertical :size="2" :class="hasIcon ? 'ml-2' : ''">
          {{ title }}
          <NP :theme-overrides="pThemeOverride" depth="3">
            {{ description }}
          </NP>
        </NFlex>
      </NFlex>
    </NButton>

    <div v-if="lock" class="absolute inset-0 flex items-center justify-center backdrop-blur-[1.5px]" style="background-color: var(--n-scrollbar-color);"></div>

    <div v-if="lock" class="absolute inset-0 flex items-center justify-center">
      <NFlex>
        <NTag :bordered="false" round>
          <template #icon>
            <NIcon :component="TbLock" size="16" />
          </template>
          {{ lockMessage }}
        </NTag>
      </NFlex>
    </div>
  </div>
</template>

<style scoped>
:deep(.n-button) {
  @apply justify-start!;
}
</style>
