<template>
  <component
    :is="as"
    :class="[
      'ds-text',
      `ds-text--${props.font}`,
      `ds-text--${props.size || resolvedsize}`,
      `ds-text--${props.weight || resolvedWeight}`, //si la classe weight n'est pas donné dans la classe on prend la mapping par défaut
      `ds-text--${props.spacing || resolvedspacing}`,
      `ds-text--${props.tone}`,
      `ds-text--${props.align}`,
      props.clamp ? `ds-text--clamp_${props.clamp}` : '',
    ]"
  >
    <slot />
  </component>
</template>

<script setup>
  import { computed } from 'vue'

  const props = defineProps({
    as: { type: String, default: 'p' },                 // p/span/div
    font: { type: String, default: 'roboto' },        // barlow | brandon
    size: { type: String, default: '' },              // xs/sm/md/lg
    spacing: { type: String, default: '' },
    tone: { type: String, default: 'default' },         // default/muted/invert
    weight: { type: String, default: 'regular' },       // regular/medium
    align: { type: String, default: '' },
    clamp: { type: Number, default: undefined },                // nombre de lignes du contenu
  })

  const resolvedsize = computed(() => {
    switch (props.as) {
      case 'p':
        return 'md'
      default:
        return 'md'
    }
  })

  const resolvedWeight = computed(() => {
    switch (props.as) {
      case 'p':
        return 'regular'
      default:
        return 'regular'
    }
  })

  const resolvedspacing = computed(() => {
    switch (props.as) {
      case 'p':
        return 'space-6'
      case 'ul':
        return 'space-6'
      case 'ol':
        return 'space-6'
      case 'li':
        return 'space-6'
      case 'pre':
        return 'space-6'
      case 'blockquote':
        return 'space-6'
      default:
        return 'space-6'
    }
  })

</script>

<style lang="scss">
  .ds-text {
    &--roboto { font-family: var(--font-roboto); }
    &--barlow { font-family: var(--font-barlow); }
    &--brandon { font-family: var(--font-brandon); }

    font-optical-sizing: auto; /* laisser le navigateur gérer opsz */
    font-variation-settings: "opsz" var(--opsz-title); /* optionnel pour le forcer */

    line-height: var(--lh-base);
    letter-spacing: var(--ls-normal);
    margin: 0;

    &--xs { font-size: var(--text-xs); }
    &--sm { font-size: var(--text-sm); }
    &--md { font-size: var(--text-md); }
    &--lg { font-size: var(--text-lg); }

    &--light { font-weight: var(--fw-light); } 
    &--regular { font-weight: var(--fw-regular); }  
    &--medium { font-weight: var(--fw-medium); }  
    &--semibold { font-weight: var(--fw-semibold); }
    &--bold { font-weight: var(--fw-bold); }
    &--extrabold { font-weight: var(--fw-extrabold); }
    &--black { font-weight: var(--fw-black); }

    &--space-48 { margin-bottom: var(--sp-48); }
    &--space-40 { margin-bottom: var(--sp-40); }
    &--space-32 { margin-bottom: var(--sp-32); }
    &--space-24 { margin-bottom: var(--sp-24); }
    &--space-20 { margin-bottom: var(--sp-20); }
    &--space-16 { margin-bottom: var(--sp-16); }
    &--space-6 { margin-bottom: var(--sp-6); }
    &--space-0 { margin-bottom: 0px; }

    &--default { color: var(--c-text, #111); }
    &--muted { color: var(--c-text-muted, #555); }
    &--invert { color: var(--c-text-invert, #fff); }
    &--brand_rouge { color: var(--c-brand_rouge); }
    &--brand_rouge-weak { color: var(--c-brand_rouge-weak); }
    &--success { color: var(--c-success); }
    &--warning { color: var(--c-warning); }
    &--danger { color: var(--c-danger); }
    &--bleu_fonce { color: var(--c-bleu_fonce); }
    &--bleu_clair { color: var(--c-bleu_clair); }

    &--justify {
      text-align: justify;
    }
    &--left {
      text-align: right;
    }
    &--right {
      text-align: left;
    }

    // clampé sur 2 lignes pour les cartes (résumé, programme, etc.).
    // Si ça dépasse, ça coupe proprement. Pour du texte de description qui doit tenir dans un cadre, mais qui a été écrit trop long, pour ne pas casser le design du site, on va limiter l'affichage à 2 lignes. c'est pour des espace réduit. Pour ne pas casser le design de la page. J'ai presque écrit 2 lignes, je vais bientôt être censurée.
    &--clamp_3 {
      display: -webkit-box;
      line-clamp: 3;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

  }
</style>

