import React from 'react';
import { Meta, StoryFn } from "@storybook/react-webpack5";
import { useArgs, useCallback, useState } from "storybook/preview-api";
import CheckboxGroup from '@molecules/CheckboxGroup/CheckboxGroup';
import { CheckboxGroupProps } from '@molecules/CheckboxGroup/CheckboxGroup';

export default {
  title: 'molecules/Checkbox Group',
  component: CheckboxGroup,
  argTypes: {},
} as Meta<typeof CheckboxGroup>;

const data = [
  {
    id: '1',
    name: 'item 1'
  },
  {
    id: '2',
    name: 'item 2'
  },
  {
    id: '3',
    name: 'item 3'
  },
  {
    id: '4',
    name: 'item 4'
  },
  {
    id: '5',
    name: 'item 5',
    disabled: true
  },
];

const Template: StoryFn<CheckboxGroupProps> = ({value, onChange, ...args}) => {
  const [_, updateArgs] = useArgs();
  const [internalValue, setInternalValue] = useState(['1', '2']);

  const handleChange = useCallback((newValue: string[]) => {
    setInternalValue(newValue);
    updateArgs({value: newValue});
  }, []);

  return <React.Fragment>
    <CheckboxGroup {...args} value={internalValue} onChange={handleChange} />
    <div>{JSON.stringify(internalValue, undefined, 2)}</div>
  </React.Fragment>;
};

export const _CheckboxGroupList = Template.bind({});
_CheckboxGroupList.args = {
  data,
  type: 'list',
  value: [],
  flush: false,
};

export const _CheckboxGroupStacked = Template.bind({});
_CheckboxGroupStacked.args = {
  data,
  type: 'stack',
  value: [],
};

export const _CheckboxGroupInline = Template.bind({});
_CheckboxGroupInline.args = {
  data,
  type: 'inline',
  value: [],
};