import { defineComponent } from 'vue'
import type { Block } from '../layout.types'
import { useMenuStore } from '../GlobalMenu'
import jump from '@/utils/jump'

export default defineComponent({
  props: {
    block: {
      type: Object as () => Block,
      required: true
    },
    brief: {
      type: Boolean,
      default: false
    },
    dock: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const menu = useMenuStore()
    if (props.block.w === 1 && props.block.h === 1) {
      return () => (
        <div
          class="w-full h-full flex justify-center items-center font-bold bg-cover bg-center bg-no-repeat"
          onContextmenu={() => {
            menu.open(props.block)
          }}
          onClick={() => {
            jump(props.block.link)
          }}
          style={{
            backgroundColor: props.block.background || 'white',
            color: props.block.color || 'black',
            backgroundImage: props.block.icon ? `url('${props.block.icon}')` : '',
            fontSize: props.dock ? '16px' : props.brief ? '12px' : 'calc(var(--block-size) / 5)'
          }}
        >
          <div>{props.brief ? props.block.text[0] : props.block.text}</div>
        </div>
      )
    } else {
      return () => (
        <div
          class="w-full h-full flex justify-between px-3 items-center font-bold bg-cover bg-center bg-no-repeat"
          onContextmenu={() => {
            menu.open(props.block)
          }}
          onClick={() => {
            window.open(props.block.link, '_blank')
          }}
          style={{
            backgroundImage: `url('/tab/bg/game.webp')`
          }}
        >
          <img src={props.block.icon} class={'w-[50px] h-[50px] rounded-lg'} alt="game icon" />
          <div class={'flex-1  text-white flex justify-center'}>
            <span class={'w-[70px] text-ellipsis overflow-hidden whitespace-nowrap'}>
              {props.block.label}
            </span>
          </div>
          <img
            src="/tab/icons/gameicon.webp"
            alt="game_icon"
            class={'absolute right-0 bottom-0 w-[36px]'}
          />
        </div>
      )
    }
  }
})