<script setup lang="ts">
import { computed } from 'vue'

import { type RouterLinkProps, RouterLink } from 'vue-router'
import { type ColorProps, type DefaultProps, type PastelProps, type RaisedProps, type VariantProps, color } from '~/composables/color'
import { type WidthProps, width } from '~/composables/width'

import TagsList from '~/components/tags/List.vue'
import Alert from './Alert.vue'
import { type Props as AlertProps } from './Alert.vue'
import Layout from './Layout.vue'
import Spacer from './Spacer.vue'

const props = defineProps<{
  title: string
  category?: true | 'h1' | 'h2' | 'h3' | 'h4' | 'h5'

  tags?: string[]
  image?: string | { src: string, style?: 'withPadding' }
  icon?: string

  alertProps?: AlertProps
} & Partial<RouterLinkProps>
  &(PastelProps | ColorProps | DefaultProps)
  & RaisedProps
  & VariantProps
  & WidthProps
  >()

const tags = computed(() => {
  return props.tags?.slice(0, 2)
})

const image = typeof props.image === 'string' ? { src: props.image } : props.image

const isExternalLink = computed(() => {
  return typeof props.to === 'string' && props.to.startsWith('http')
})

const attributes = computed(() =>
  color(props, props.to ? ['interactive', 'solid'] : [])(
    width(props, ['medium'])()
  ))
</script>

<template>
  <Layout
    stack
    no-gap
    :class="[{ [$style.card]: true, [$style['is-category']]: category }, 'card']"
    v-bind="attributes"
  >
    <!-- Link -->

    <a
      v-if="props.to && isExternalLink"
      :class="$style.covering"
      :href="to?.toString()"
      target="_blank"
    />
    <RouterLink
      v-if="props.to && !isExternalLink"
      :class="$style.covering"
      :to="props.to"
    />

    <!-- Image -->

    <div
      v-if="$slots.image"
      :class="[$style.image, 'card-image']"
    >
      <slot
        name="image"
        :src="image"
      />
    </div>
    <img
      v-else-if="image"
      :src="image?.src"
      :class="[{ [$style.image]: true, [$style['with-padding']]: image?.style === 'withPadding' }, 'card-image']"
    >
    <Spacer
      v-else
      :size="'small' in props ? 20 : 28"
    />

    <!-- Icon -->

    <i
      v-if="props.icon"
      :class="[$style.icon, 'bi', icon]"
    />

    <!-- Title -->

    <component
      :is="typeof category === 'string' ? category : 'h6'"
      :class="$style.title"
    >
      {{ title }}
    </component>

    <!-- Topright action -->

    <div
      v-if="$slots.topright"
      :class="$style.topright"
    >
      <slot name="topright" />
    </div>

    <!-- Content -->

    <Alert
      v-if="$slots.alert"
      v-bind="alertProps"
      :class="$style.alert"
    >
      <slot name="alert" />
    </Alert>

    <Layout
      v-if="tags"
      flex
      gap-4
      :class="$style.tags"
    >
      <TagsList
        label-classes="tiny"
        :truncate-size="8"
        :limit="2"
        :show-more="false"
        :tags="tags"
      />
    </Layout>

    <Layout
      v-if="$slots.default"
      no-gap
      :class="$style.content"
    >
      <slot />
    </Layout>

    <Spacer
      grow
      no-size
    />

    <!-- Footer and Action -->

    <div
      v-if="$slots.footer"
      :class="$style.footer"
    >
      <slot name="footer" />
    </div>

    <div
      v-if="$slots.action"
      :class="$style.action"
    >
      <slot name="action" />
    </div>

    <Spacer
      v-if="!$slots.footer && !$slots.action"
      :size="'small' in props? 24 : 32"
    />
  </Layout>
</template>

<style module lang="scss">
.card {
  --fw-card-padding: v-bind("'small' in props ? '16px' : '24px'");

  position: relative;

  color: var(--fw-text-color);
  background-color: var(--fw-bg-color);
  box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 20%);

  border-radius: var(--fw-border-radius);
  font-size: 1rem;
  overflow: hidden;

  >.covering {
    position: absolute;
    inset: 0;

    &~:is(.title, .content:not(:has(:is(button, input, a, select)))) {
      pointer-events:none;
    }
    &:hover~:is(.content:not(:has(:is(button, input, a, select)))) {
      text-decoration: underline
    }
  }

  >.image {
    overflow: hidden;
    border-radius: var(--fw-border-radius) var(--fw-border-radius) 0 0;
    object-fit: cover;
    width: 100%;
    aspect-ratio: 1;
    position:relative;
    pointer-events: none;

    &.with-padding {
      margin: var(--fw-card-padding) var(--fw-card-padding) calc(var(--fw-card-padding) / 2) var(--fw-card-padding);
      width: calc(100% - 2 * var(--fw-card-padding));
      border-radius: var(--fw-border-radius);
    }
  }

  >.icon {
    position: absolute;
    top: 20px;
    right: 20px;

    font-size: 1rem;

    pointer-events: none;

    &:global(.large) {
      font-size: 32px;
      margin: -8px;
    }
  }
  &:has(>.image)>.icon {
    top: var(--fw-card-padding);
    right: var(--fw-card-padding);

    font-size: 1.2rem;
  }

  >.title {
    margin: 0;
    padding: 0 var(--fw-card-padding);
    line-height: 1.3em;
    font-size: 1.125em;
    font-weight: bold;

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
  }
  &:has(>.icon):not(:has(.image))>.title {
    padding-right:calc(var(--fw-card-padding) + 22px);
  }
  &.is-category>.title {
    font-size: 1.75em;
    padding-bottom: .125em;
  }
  &:has(>.image:not(.with-padding))>.title {
    margin-top:16px;
  }

  >.topright {
    position: absolute;
    top: 0;
    right: 0;
  }

  >.alert {
    padding-left: var(--fw-card-padding);
    padding-right: var(--fw-card-padding);
    margin-top: 8px;
  }

  >.tags {
    padding: 0 var(--fw-card-padding);
    margin-top: 8px;
  }

  >.content {
    padding: 0 var(--fw-card-padding);
    /* Consider making all line height, vertical paddings, margins and borders,
    a multiple of a global vertical rhythm so that side-by-side lines coincide */
    line-height: 24px;
    margin-top: 8px;
  }

  >.footer {
    padding: calc(var(--fw-card-padding) - 4px);
    display: flex;
    gap: 4px;
    align-items: end;
    font-size: 0.8125rem;
    margin-top: 16px;

    >.options-button {
      margin-left: auto;
    }
  }

  >.action {
    display: flex;
    background: color-mix(in oklab, var(--fw-bg-color) 80%, var(--fw-gray-500));
    border-bottom-left-radius: var(--fw-border-radius);
    border-bottom-right-radius: var(--fw-border-radius);
    margin-top:16px;

    >*:not(.with-padding) {
      margin: 0;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border: 8px solid transparent;
      &:not(:first-child) {
        border-bottom-left-radius: 0;
      }
      &:not(:last-child) {
        border-bottom-right-radius: 0;
      }
    }
  }
}
</style>
