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

const initState = (): Props => ({
  label: 'Проверка контрагентов Республики Казахстан онлайн на сервисе Adata.kz',
  content: 'test',
  defaultOpen: false,
  disabled: false,
  size: 'md',
  color: 'gray',
  slot: undefined,
  bodyClass: '',
  contentClass: ''
})
const sizeOptions = [
  {value: 'md', label: 'md'},
  {value: 'lg', label: 'lg'}
]
const colorOptions = [{value: 'gray', label: 'gray'}]

const test = (isOpen) => {
}
</script>

<template>
  <Story title="Elements/Accordion">
    <Variant
      title="default"
      :init-state="initState"
    >
      <template #default="{ state }">
        <a-accordion
          :label="state.label"
          :default-open="state.defaultOpen"
          :disabled="state.disabled"
          :size="state.size"
          :color="state.color"
          :content-class="state.contentClass"
          :body-class="state.bodyClass"
          @toggle="test"
          @close="test('close')"
          @open="test('open')"
        >
          <div>content</div>
        </a-accordion>
      </template>
      <template #controls="{ state }">
        <HstCheckbox
          v-model="state.defaultOpen"
          title="defaultOpen"
        />
        <HstCheckbox
          v-model="state.disabled"
          title="disabled"
        />
        <HstSelect
          v-model="state.size"
          title="Size"
          :options="sizeOptions"
        />
        <HstSelect
          v-model="state.color"
          title="Color"
          :options="colorOptions"
        />
        <HstText
          v-model="state.bodyClass"
          title="Body Class"
        />
        <HstText
          v-model="state.contentClass"
          title="Content Class"
        />
      </template>
    </Variant>
  </Story>
</template>

<style scoped></style>
