import React from 'react';

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

import { bem } from 'utils/bem';
import { Typography, TYPOGRAPHY_TYPE } from 'components';

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

import styles from './radio-button.stories.scss';

const className = bem(styles, 'radio-button-stories');

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

const Template: ComponentStory<typeof RadioButton> = (args) => {
  const label = (
    <Typography
      type={TYPOGRAPHY_TYPE.body2}
      theme={args.theme}
    >
      Radio button label
    </Typography>
  );

  return (
    <div className={className('container')}>
      <div className={className('group')}>
        <RadioButton
          {...args}
          checked
        />
        <RadioButton
          {...args}
          label={label}
          checked
        />
      </div>

      <div className={className('group')}>
        <RadioButton
          {...args}
          checked
          hasError
        />
        <RadioButton
          {...args}
          label={label}
          checked
          hasError
        />
      </div>

      <div className={className('group')}>
        <RadioButton
          {...args}
          disabled
          checked
        />
        <RadioButton
          {...args}
          label={label}
          disabled
          checked
        />
      </div>

      <div className={className('group')}>
        <RadioButton {...args} />
        <RadioButton
          {...args}
          label={label}
        />
      </div>

      <div className={className('group')}>
        <RadioButton
          {...args}
          disabled
        />
        <RadioButton
          {...args}
          label={label}
          disabled
        />
      </div>

      <div className={className('group')}>
        <RadioButton
          {...args}
          hasError
        />
        <RadioButton
          {...args}
          label={label}
          hasError
        />
      </div>
    </div>
  );
};

export const LightDefaultRadioButton = Template.bind({});
LightDefaultRadioButton.args = {
  value: 'test',
  name: 'test',
  theme: THEME.light,
};

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