<script>
import theme from "#build/b24ui/input-rating";
</script>

<script setup>
import { computed } from "vue";
import { RatingRoot, RatingItem, RatingItemIndicator } from "reka-ui";
import { reactivePick } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { useForwardProps } from "../composables/useForwardProps";
import { useFormField } from "../composables/useFormField";
import { tv } from "../utils/tv";
import icons from "../dictionary/icons";
defineOptions({ inheritAttrs: false });
const _props = defineProps({
  as: { type: null, required: false },
  id: { type: String, required: false },
  readonly: { type: Boolean, required: false, default: false },
  icon: { type: [Function, Object], required: false },
  emptyIcon: { type: [Function, Object], required: false },
  color: { type: null, required: false },
  size: { type: null, required: false },
  orientation: { type: null, required: false, default: "horizontal" },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false },
  length: { type: Number, required: false, default: 5 },
  step: { type: Number, required: false, default: 1 },
  name: { type: String, required: false },
  disabled: { type: Boolean, required: false },
  required: { type: Boolean, required: false },
  clearable: { type: Boolean, required: false, default: false },
  hoverable: { type: Boolean, required: false, default: false },
  modelValue: { type: Number, required: false },
  defaultValue: { type: Number, required: false, default: 0 }
});
const emits = defineEmits(["change", "update:modelValue"]);
defineSlots();
const props = useComponentProps("inputRating", _props);
const appConfig = useAppConfig();
const rootProps = useForwardProps(reactivePick(props, "as", "length", "step", "hoverable", "clearable", "required", "modelValue", "defaultValue"), emits);
const { id, emitFormChange, emitFormInput, size: formFieldSize, color: formFieldColor, name, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
const size = computed(() => formFieldSize.value ?? props.size);
const color = computed(() => formFieldColor.value ?? props.color);
const isDisabled = computed(() => formFieldDisabled.value ?? props.disabled);
const disabled = computed(() => isDisabled.value || props.readonly);
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.inputRating || {} })({
  size: size.value,
  color: color.value,
  orientation: props.orientation,
  readonly: props.readonly && !isDisabled.value,
  disabled: isDisabled.value
}));
const starIcon = computed(() => props.icon ?? icons.star);
function onUpdate(value) {
  const event = new Event("change", { target: { value } });
  emits("change", event);
  emitFormChange();
  emitFormInput();
}
</script>

<template>
  <RatingRoot
    :id="id"
    v-slot="{ items }"
    data-slot="root"
    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
    :name="name"
    :disabled="disabled"
    :aria-readonly="props.readonly || void 0"
    :orientation="props.orientation"
    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
    @update:model-value="onUpdate"
  >
    <RatingItem
      v-for="item in items"
      v-slot="{ steps }"
      :key="item"
      :item="item"
      data-slot="item"
      :class="b24ui.item({ class: props.b24ui?.item })"
    >
      <!-- Empty icon as background -->
      <slot name="item" :index="item" :filled="false">
        <Component
          :is="props.emptyIcon ?? starIcon"
          data-slot="emptyIcon"
          :class="b24ui.emptyIcon({ class: props.b24ui?.emptyIcon })"
        />
      </slot>

      <!-- Indicators overlaid for each step, clipped to the rated fraction -->
      <RatingItemIndicator
        v-for="step in steps"
        :key="step"
        :step="step"
        :aria-label="`Rate ${step} out of ${props.length}`"
        data-slot="indicator"
        :class="b24ui.indicator({ class: props.b24ui?.indicator })"
      >
        <slot name="item" :index="item" :filled="true">
          <Component
            :is="starIcon"
            data-slot="icon"
            :class="b24ui.icon({ class: props.b24ui?.icon })"
          />
        </slot>
      </RatingItemIndicator>
    </RatingItem>
  </RatingRoot>
</template>
