<script>
import theme from "#build/b24ui/checkbox-group";
</script>

<script setup>
import { computed, useId } from "vue";
import { CheckboxGroupRoot } 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 { get, omit } from "../utils";
import { tv } from "../utils/tv";
import B24Checkbox from "./Checkbox.vue";
const _props = defineProps({
  as: { type: null, required: false },
  legend: { type: String, required: false },
  valueKey: { type: null, required: false, default: "value" },
  labelKey: { type: null, required: false, default: "label" },
  descriptionKey: { type: null, required: false, default: "description" },
  items: { type: null, required: false },
  modelValue: { type: null, required: false },
  defaultValue: { type: null, required: false },
  size: { type: null, required: false },
  variant: { type: null, required: false },
  orientation: { type: null, required: false, default: "vertical" },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false },
  disabled: { type: Boolean, required: false },
  loop: { type: Boolean, required: false },
  name: { type: String, required: false },
  required: { type: Boolean, required: false },
  color: { type: null, required: false, default: "air-primary" },
  indicator: { type: null, required: false }
});
const emits = defineEmits(["change", "update:modelValue"]);
const slots = defineSlots();
const props = useComponentProps("checkboxGroup", _props);
const appConfig = useAppConfig();
const rootProps = useForwardProps(reactivePick(props, "as", "modelValue", "defaultValue", "orientation", "loop", "required"), emits);
const checkboxProps = useForwardProps(reactivePick(props, "variant", "indicator"));
const getProxySlots = () => omit(slots, ["legend"]);
const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled, ariaAttrs } = useFormField(_props, { bind: false });
const id = _id.value ?? useId();
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.checkboxGroup || {} })({
  size: size.value ?? props.size,
  required: props.required,
  orientation: props.orientation,
  color: color.value ?? props.color,
  variant: props.variant,
  disabled: disabled.value
}));
function normalizeItem(item) {
  if (item === null) {
    return {
      id: `${id}:null`,
      value: void 0,
      label: void 0
    };
  }
  if (typeof item === "string" || typeof item === "number") {
    return {
      id: `${id}:${item}`,
      value: String(item),
      label: String(item)
    };
  }
  const value = get(item, props.valueKey);
  const label = get(item, props.labelKey);
  const description = get(item, props.descriptionKey);
  return {
    ...item,
    value,
    label,
    description,
    id: `${id}:${value}`
  };
}
const normalizedItems = computed(() => {
  if (!props.items) {
    return [];
  }
  return props.items.map(normalizeItem);
});
function onUpdate(value) {
  const event = new Event("change", { target: { value } });
  emits("change", event);
  emitFormChange();
  emitFormInput();
}
</script>

<template>
  <CheckboxGroupRoot
    :id="id"
    v-bind="rootProps"
    :name="name"
    :disabled="disabled"
    data-slot="root"
    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
    @update:model-value="onUpdate"
  >
    <fieldset data-slot="fieldset" :class="b24ui.fieldset({ class: props.b24ui?.fieldset })" v-bind="ariaAttrs">
      <legend v-if="props.legend || !!slots.legend" data-slot="legend" :class="b24ui.legend({ class: props.b24ui?.legend })">
        <slot name="legend">
          {{ props.legend }}
        </slot>
      </legend>
      <B24Checkbox
        v-for="item in normalizedItems"
        :key="item.value"
        v-bind="{ ...item, ...checkboxProps }"
        :color="color"
        :size="size"
        :name="name"
        :disabled="item.disabled || disabled"
        :b24ui="{ ...props.b24ui ? omit(props.b24ui, ['root']) : void 0, ...item.b24ui || {} }"
        data-slot="item"
        :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class], disabled: item.disabled || disabled })"
      >
        <template v-for="(_, name) in getProxySlots()" #[name]>
          <slot :name="name" :item="item" />
        </template>
      </B24Checkbox>
    </fieldset>
  </CheckboxGroupRoot>
</template>
