import React, { useState } from "react";
import type { ComponentProps } from "react";
import { Checkbox, CheckboxGroup } from "@jobber/components-native";

export function CheckboxGroupControlledExample(
  props: Partial<ComponentProps<typeof CheckboxGroup>>,
) {
  const [checkboxGroupState, setCheckboxGroupState] = useState<
    NonNullable<ComponentProps<typeof CheckboxGroup>["state"]>
  >({
    parentChecked: false,
    childrenChecked: {
      relish: true,
      ketchup: true,
      mustard: false,
    },
  });

  return (
    <CheckboxGroup
      name="testgroup"
      label="All"
      {...props}
      state={checkboxGroupState}
      onChange={state => setCheckboxGroupState(state)}
    >
      <Checkbox name="mustard" label="Mustard" />
      <Checkbox name="relish" label="Relish" />
      <Checkbox name="ketchup" label="Ketchup" />
    </CheckboxGroup>
  );
}