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

export default defineComponent({
  props: {
    block: {
      type: Object as () => Block,
      required: true
    },
    brief: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const menu = useMenuStore()
    return () => (
      <div
        class="w-full h-full flex justify-center items-center font-bold bg-cover bg-center bg-no-repeat"
        onContextmenu={(e) => {
          e.preventDefault()
          menu.open(props.block)
        }}
        style={{
          backgroundColor: props.block.background || 'white',
          color: props.block.color || 'black',
          backgroundImage: props.block.icon ? `url('${props.block.icon}')` : '',
          fontSize: props.brief ? '12px' : 'calc(var(--block-size) / 5)'
        }}
      >
        <div>{props.brief ? props.block.text[0] : props.block.text}</div>
      </div>
    )
  }
})