<script setup lang="ts">
import AStarRating from '#adata-ui/components/elements/star-rating/AStarRating.vue'

const initState = () => ({
  max: 5,
  increment: 1,
  readonly: false,
  starSize: 16,
  gap: 4,
  ratingPlacement: 'left',
  fontSize: 14,
  error: false,
  errorSize: 'sm'
})

const rating = ref<number>(3)
</script>

<template>
  <Story
    title="Elements/Star Rating"
    :layout="{
      type: 'grid',
      width: 500
    }"
  >
    <Variant
      title="AStarRating"
      :init-state="initState"
    >
      <template #default="{ state }">
        <div class="flex items-center">
          <a-star-rating
            v-model="rating"
            v-bind="state"
          />
        </div>
      </template>

      <template #controls="{ state }">
        <HstCheckbox
          v-model="state.readonly"
          title="Read Only"
        />
        <HstNumber
          v-model="state.max"
          title="Max Rating"
        />
        <HstNumber
          v-model="state.increment"
          title="Increment"
        />
        <HstNumber
          v-model="state.starSize"
          title="Star Size"
        />
        <HstNumber
          v-model="state.gap"
          title="Gap"
        />
        <HstSelect
          v-model="state.ratingPlacement"
          title="Rating Placement"
          :options="['left', 'right']"
        />
        <HstNumber
          v-model="state.fontSize"
          title="Font Size"
        />
        <HstText
          v-model="state.error"
          title="Error"
        />
        <HstSelect
          v-model="state.errorSize"
          title="Error Size"
          :options="['sm', 'lg']"
        />
      </template>
    </Variant>
  </Story>
</template>

<style scoped></style>
