import React from "react";
import { Box } from "@mui/material";
import { Decorator, Meta, StoryFn } from "@storybook/react";

import { RadioButton, ThemeProviderWithStyledEngine } from "..";

const decorator: Decorator<unknown> = (Story) => (
  <ThemeProviderWithStyledEngine>{Story()}</ThemeProviderWithStyledEngine>
);

const meta = {
  title: "Components/Inputs/RadioButton",
  component: RadioButton,
  decorators: [decorator],
} satisfies Meta<typeof RadioButton>;

export default meta;

const name = "radio-group";
const disabledName = "radio-group-disabled";

const Template: StoryFn<typeof RadioButton> = () => {
  return (
    <Box display="flex" flexDirection="column" alignItems="flex-start">
      <RadioButton name={name} value="a" defaultChecked label="Click me!" />
      <RadioButton name={name} value="b" label="No, click me!" />
      <RadioButton
        name={disabledName}
        disabled
        value="c"
        label="Clicking me won't change anything"
      />
      <RadioButton
        name={disabledName}
        disabled
        defaultChecked
        value="d"
        label="Clicking me won't change anything either"
      />
    </Box>
  );
};

export const Default: StoryFn<typeof RadioButton> = Template.bind({});
