import type React from "react";
import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
import { Checkbox, CheckboxGroup } from "@jobber/components-native";
import {
  CheckboxBasicExample,
  CheckboxControlledExample,
  CheckboxGroupBasicExample,
  CheckboxGroupControlledExample,
  CheckboxGroupLabelledExample,
} from "./docs";

const meta = {
  title: "Components/Selections/Checkbox",
  component: Checkbox,
  subcomponents: { CheckboxGroup },
  parameters: {
    viewport: { defaultViewport: "mobile1" },
  },
} satisfies Meta<typeof Checkbox>;
export default meta;
type Story = StoryObj<typeof meta>;
type CheckboxGroupStory = StoryObj<React.ComponentProps<typeof CheckboxGroup>>;

export const Basic: Story = {
  render: CheckboxBasicExample,
  args: {
    label: "Check me out",
    name: "storyCheckbox",
  },
};

export const Controlled: Story = {
  render: CheckboxControlledExample,
  args: {
    label: "Check me out",
  },
};

export const Indeterminate: Story = {
  render: CheckboxBasicExample,
  args: {
    label: "Label",
    name: "storyCheckbox",
    indeterminate: true,
  },
};

export const Disabled: Story = {
  render: CheckboxBasicExample,
  args: {
    label: "Label",
    name: "storyCheckbox",
    disabled: true,
  },
};

export const CheckboxGroupExample: CheckboxGroupStory = {
  render: CheckboxGroupBasicExample,
  args: {
    name: "testgroup",
  },
};

export const LabelledCheckboxGroup: CheckboxGroupStory = {
  render: CheckboxGroupLabelledExample,
  args: {
    name: "testgroup",
    label: "Select all",
  },
};

export const ControlledCheckboxGroup: CheckboxGroupStory = {
  render: CheckboxGroupControlledExample,
  args: {
    name: "testgroup",
    label: "All",
  },
};

export const DisabledCheckboxGroup: CheckboxGroupStory = {
  render: CheckboxGroupBasicExample,
  args: {
    name: "testgroup",
    label: "Label",
    disabled: true,
  },
};