import { computed } from 'vue'
import fallbackImage from '../assets/fallback.svg';

export const Tiles = (props: {
  allowHScroll?: boolean,
  tileSize?: number,
  twoRows?: boolean,
}) => {
  const
    classes = computed(() => ({
      'scroll': props.allowHScroll ?? false,
      'two-rows': props.twoRows ?? false,
    })),
    styles = computed(() => ({
      '--tile-size': (props.tileSize ?? 150)+'px',
      '--tile-size-mobile': (Math.round((props.tileSize ?? 150) * 0.85))+'px',
    }))

  return vine`
    <div class="tiles" :class="classes" :style="styles">
      <slot />
    </div>
  `
}

export const Tile = ({
  to, title, text, image = fallbackImage
}: {
  to?: object,
  title?: string,
  text?: string,
  image?: string,
}) => {
  return vine`
    <div class="tile">
      <div class="image">
        <component :is="to ? 'router-link' : 'template'" :to="to ? to : undefined">
          <img :src="image" loading="lazy">
        </component>
      </div>
      <div class="body text-truncate">
        <div class="title text-truncate">
          <slot name="title">
            <component :is="to ? 'router-link' : 'span'" :to="to ? to : undefined">{{ title }}</component>
          </slot>
        </div>
        <slot name="text">{{ text }}</slot>
        <ContextMenu :enabled="!!$slots['context-menu']">
          <template #context-menu>
            <slot name="context-menu" />
          </template>
        </ContextMenu>
      </div>
    </div>
  `
}