<script setup lang="ts">

const initState = () => ({
  size: 'sm',
  disabled: false,
  intermediate: false,
  side: null,
})
const sizeOptions = [
  {value: 'sm', label: 'Small'},
  {value: 'lg', label: 'Large'}
]
const sideOptions = [
  {value: 'right', label: 'Right'},
  {value: 'left', label: 'Left'}
]
const masterChecked = ref(false);
const checkedValues = ref([false, false])
const handleMasterCheckboxChange = () => {
  const isChecked = masterChecked.value; // Получаем состояние мастер-чекбокса

  // Обновляем состояния всех чекбоксов:
  checkedValues.value = checkedValues.value.map(() => isChecked);
};
</script>

<template>
  <Story
    title="Forms/Checkbox"
    :layout="{
      type: 'grid',
      width: 300
    }"
  >
    <Variant
      title="ACheckbox"
      :init-state="initState"
    >
      <template #default="{ state }">
        <div>
          <a-checkbox
            v-model="masterChecked"
            :intermediate="true"
            value="3"
            name="3"
            :size="state.size"
            @update:model-value="handleMasterCheckboxChange"
          >
            Content1
          </a-checkbox>
          <a-checkbox
            v-model="checkedValues[0]"
            :intermediate="state.intermediate"
            value="1"
            name="1"
            :size="state.size"
          >
            Content1
          </a-checkbox>
          <a-checkbox
            v-model="checkedValues[1]"
            view-type="chip"
            :intermediate="state.intermediate"
            value="2"
            name="2"
            :size="state.size"
          >
            <div>
              Content2
            </div>
          </a-checkbox>
          <div>{{ checkedValues }}</div>
        </div>
      </template>
      <template #controls="{ state }">
        <HstSelect
          v-model="state.size"
          title="Size"
          :options="sizeOptions"
        />
        <HstSelect
          v-model="state.side"
          title="Side"
          :options="sideOptions"
        />
        <HstCheckbox
          v-model="state.selected"
          title="selected"
        />
        <HstCheckbox
          v-model="state.disabled"
          title="disabled"
        />
        <HstCheckbox
          v-model="state.intermediate"
          title="intermediate"
        />
      </template>
    </Variant>
  </Story>
</template>

<style scoped></style>
