<script setup lang="ts">
import AAccordionGroup from './AAccordionGroup.vue'
import type {Props} from './types'

const initState = (): Props => (
  {
    defaultOpen: true,
    multiple: true,
    size: 'md',
    color: 'gray',
    items: [
      {
        label: 'test',
        content: 'flkdkjf lsl jsld jflsd jfljsl djfdsl jflsj flsj lsd lfsj l',
        defaultOpen: false,
        slot: 'first'
      },
      {
        label: 'test',
        content: 'flkdkjf lsl jsld jflsd jfljsl djfdsl jflsj flsj lsd lfsj l'
      },
      {
        label: 'test',
        content: 'flkdkjf lsl jsld jflsd jfljsl djfdsl jflsj flsj lsd lfsj l'
      },
      {
        label: 'test',
        content: 'flkdkjf lsl jsld jflsd jfljsl djfdsl jflsj flsj lsd lfsj l'
      },
      {
        label: 'test',
        content: 'flkdkjf lsl jsld jflsd jfljsl djfdsl jflsj flsj lsd lfsj l'
      },
    ],
  }
)
const sizeOptions = [
  {value: 'md', label: 'md'},
  {value: 'lg', label: 'lg'}
]
const colorOptions = [
  {value: 'gray', label: 'gray'},
]
</script>

<template>
  <Story title="Elements/AccordionGroup" >
    <Variant
      title="default"
      :init-state="initState"
    >
      <template #default="{state}">
        <a-accordion-group
          :items="state.items"
          wrapper-class="flex gap-4"
          :default-open="state.defaultOpen"
          :multiple="state.multiple"
          :size="state.size"
          :color="state.color"
        />
      </template>
      <template #controls="{ state }">
        <HstCheckbox
          v-model="state.defaultOpen"
          title="defaultOpen"
        />
        <HstCheckbox
          v-model="state.multiple"
          title="multiple"
        />
        <HstSelect
          v-model="state.size"
          title="Size"
          :options="sizeOptions"
        />
        <HstSelect
          v-model="state.color"
          title="Color"
          :options="colorOptions"
        />
      </template>
    </Variant>
    <Variant
      title="template button"
      :init-state="initState"
    >
      <template #default="{state}">
        <a-accordion-group
          :items="state.items"
          :default-open="state.defaultOpen"
          :multiple="state.multiple"
          :size="state.size"
          :color="state.color"
          wrapper-class="flex gap-4"
        >
          <template #default="{item}">
            <button>
              <span>{{ item }}</span>
            </button>
          </template>
        </a-accordion-group>
      </template>
      <template #controls="{ state }">
        <HstCheckbox
          v-model="state.defaultOpen"
          title="defaultOpen"
        />
        <HstCheckbox
          v-model="state.multiple"
          title="multiple"
        />
        <HstSelect
          v-model="state.size"
          title="Size"
          :options="sizeOptions"
        />
        <HstSelect
          v-model="state.color"
          title="Color"
          :options="colorOptions"
        />
      </template>
    </Variant>
    <Variant
      title="template content and template content by id"
      :init-state="initState"
    >
      <template #default="{state}">
        <a-accordion-group
          :items="state.items"
          :default-open="state.defaultOpen"
          :multiple="state.multiple"
          :size="state.size"
          :color="state.color"
          wrapper-class="flex gap-4"
        >
          <template #first="{item}">
            <span class="bg-blue-700">first</span>
          </template>
          <template #item="{item}">
            <span class="bg-red">{{ item }}</span>
          </template>
        </a-accordion-group>
      </template>
      <template #controls="{ state }">
        <HstCheckbox
          v-model="state.defaultOpen"
          title="defaultOpen"
        />
        <HstCheckbox
          v-model="state.multiple"
          title="multiple"
        />
        <HstSelect
          v-model="state.size"
          title="Size"
          :options="sizeOptions"
        />
        <HstSelect
          v-model="state.color"
          title="Color"
          :options="colorOptions"
        />
      </template>
    </Variant>
  </Story>
</template>

<style scoped>

</style>
