<template>
  <section
    class="unnnic-form-element"
    :class="{ 'unnnic-form-element--disabled': disabled }"
  >
    <UnnnicLabel
      v-if="label"
      :label="label"
      :tooltip="tooltip"
      :class="[
        'unnnic-form-element__label',
        {
          'unnnic-form-element__label--fixed': fixedLabel,
        },
      ]"
    />

    <slot></slot>

    <section
      v-if="message || error || !!$slots.rightMessage"
      class="unnnic-form-element__hints-container"
    >
      <section class="unnnic-form-element__message-container">
        <p
          v-if="message"
          class="unnnic-form-element__message"
        >
          {{ fullySanitize(message) }}
        </p>
        <p
          v-if="!!error?.length"
          class="unnnic-form-element__message error"
        >
          {{ Array.isArray(error) ? error.join(', ') : error }}
        </p>
      </section>
      <p v-if="!!$slots.rightMessage">
        <slot name="rightMessage" />
      </p>
    </section>
  </section>
</template>

<script setup lang="ts">
import { fullySanitize } from '../../utils/sanitize';
import UnnnicLabel from '../Label/Label.vue';
import { type TooltipProps } from '../ToolTip/ToolTip.vue';

defineOptions({
  name: 'UnnnicFormElement',
});

export interface FormElementProps {
  size?: 'md' | 'sm';
  label?: string;
  fixedLabel?: boolean;
  error?: string;
  message?: string;
  disabled?: boolean;
  tooltip?: TooltipProps;
}

withDefaults(defineProps<FormElementProps>(), {
  size: 'md',
  label: '',
  fixedLabel: false,
  error: '',
  message: '',
  disabled: false,
  tooltip: undefined,
});
</script>

<style lang="scss" scoped>
@use '@/assets/scss/unnnic' as *;

* {
  margin: $unnnic-space-0;
  padding: $unnnic-space-0;
  box-sizing: border-box;
}

.unnnic-form-element {
  &__label {
    font: $unnnic-font-body;
    margin-bottom: $unnnic-space-1;
    display: flex;
    align-items: center;
    gap: $unnnic-space-2;

    &--fixed {
      margin-top: -$unnnic-font-size-body-gt - $unnnic-space-2 + $unnnic-space-1;
    }

    &--fixed {
      margin-bottom: $unnnic-space-0;
      position: absolute;
      padding: $unnnic-space-0 $unnnic-space-1;
      margin-left: $unnnic-space-2;

      &:after {
        content: ' ';
        position: absolute;
        left: $unnnic-space-0;
        bottom: $unnnic-space-1 - 1px;
        width: 100%;
        height: 1px;
        background-color: $unnnic-color-bg-base;
      }
    }
  }

  &__message {
    &.error {
      color: $unnnic-color-fg-critical;
    }
  }

  &__hints-container {
    display: flex;
    justify-content: space-between;
    margin-top: $unnnic-space-1;
    font: $unnnic-font-caption-2;
    color: $unnnic-color-fg-base;
  }

  &__message-container {
    display: flex;
    flex-direction: column;
    gap: $unnnic-space-1;
  }

  &--disabled .unnnic-form-element__label,
  &--disabled .unnnic-form-element__message {
    user-select: none;
  }
}
</style>
