import React, { useState } from 'react';

import { ComponentStory, ComponentMeta } from '@storybook/react';

import { Typography, TYPOGRAPHY_TYPE, RadioButton } from 'components';

import { RadioButtonGroup } from './RadioButtonGroup';
import { THEME } from '../../constants';

export default {
  title: 'ReactComponentLibrary/RadioButtonGroup',
  component: RadioButtonGroup,
  decorators: [
    (Story): JSX.Element => (
      <div className="centered-layout">
        <Story />
      </div>
    ),
  ],
} as ComponentMeta<typeof RadioButtonGroup>;

interface RadioButtonManagerProps {
  theme?: THEME;
}

const RadioButtonManager = ({ theme = THEME.light }: RadioButtonManagerProps): JSX.Element => {
  const values = ['First', 'Second', 'Third'];

  const FIRST = 0;
  const [value, setValue] = useState(values[FIRST]);

  return (
    <RadioButtonGroup
      value={value}
      label="Radio Group"
      theme={theme}
      onChange={setValue}
    >
      {values.map((val) => (
        <RadioButton
          key={val}
          value={val}
          label={
            <Typography
              type={TYPOGRAPHY_TYPE.body2}
              theme={theme}
            >
              {val}
            </Typography>
          }
          theme={theme}
        />
      ))}
    </RadioButtonGroup>
  );
};

const Template: ComponentStory<typeof RadioButtonManager> = (args: RadioButtonManagerProps) => {
  return <RadioButtonManager {...args} />;
};

export const LightDefaultRadioButtonGroup = Template.bind({});

export const DarkDefaultRadioButtonGroup = Template.bind({});
DarkDefaultRadioButtonGroup.args = {
  theme: THEME.dark,
};
DarkDefaultRadioButtonGroup.parameters = {
  backgrounds: { default: 'dark' },
};