import { Meta, Story } from '@storybook/react';
import React from 'react';
import {
  CheckButton,
  ICheckItems,
  ICheckProps,
} from '../../../components/CheckButton';
import { CheckItem, ICheckItemProps } from '../../../components/CheckItem';
import {
  RPGUIContainer,
  RPGUIContainerTypes,
} from '../../../components/RPGUI/RPGUIContainer';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';

const meta: Meta = {
  title: 'UI/Buttons & Inputs/Check Input',
  component: CheckButton,
};

export default meta;

const Template: Story<ICheckProps> = args => (
  <RPGUIRoot>
    <RPGUIContainer type={RPGUIContainerTypes.Framed}>
      <CheckButton {...args} />
    </RPGUIContainer>
  </RPGUIRoot>
);

const TemplateCheckItems: Story<ICheckItemProps> = args => {
  return (
    <RPGUIRoot>
      <RPGUIContainer type={RPGUIContainerTypes.Framed}>
        <CheckItem {...args} />
      </RPGUIContainer>
    </RPGUIRoot>
  );
};

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

export const DefaultCheckItems = TemplateCheckItems.bind({});

const items: ICheckItems[] = [
  {
    label: 'label1',
    value: 'value1',
  },
  {
    label: 'label2',
    value: 'value2',
  },
  {
    label: 'label3',
    value: 'value3',
  },
];

Default.args = {
  items,
};

DefaultCheckItems.args = {
  label: 'label',
  onChange: (label, value) => {
    console.log(label, value);
  },
};
