import React from 'react';
import { Meta, StoryFn } from "@storybook/react-webpack5";
import { useArgs, useCallback, useState } from "storybook/preview-api";
import ToggleButtonGroup from '@molecules/ToggleButtonGroup/ToggleButtonGroup';
import { ToggleButtonGroupProps } from '@molecules/ToggleButtonGroup/ToggleButtonGroup';
import { Icon } from '@/index';

export default {
  title: 'molecules/Toggle Button Group',
  component: ToggleButtonGroup,
  argTypes: {},
} as Meta<typeof ToggleButtonGroup>;

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

  const handleChange = useCallback((newValue: string | any[]) => {
    setInternalValue(newValue);
    // control value does not update when value is not an array for some reason.
    updateArgs({ value: Array.isArray(newValue) ? newValue : [newValue] });
  }, []);

  return (
    <React.Fragment>
      {type === 'checkbox' && <ToggleButtonGroup type="checkbox" value={internalValue as string[]} onChange={handleChange} {...args} />}
      {type === 'radio' && <ToggleButtonGroup type="radio" value={internalValue as string} onChange={handleChange} {...args} />}
      <div>{JSON.stringify(internalValue)}</div>
    </React.Fragment>
  )
};

export const _ToggleButtonGroup = Template.bind({});
_ToggleButtonGroup.args = {
  options: [
    { name: 'Active', value: '1' },
    { name: 'Radio', value: '2' },
    { name: 'Radio', value: '3' },
  ],
  type: 'radio',
  name: 'toggle-button-group',
  value: '1',
};

export const _ToggleButtonGroupIcons = Template.bind({});
_ToggleButtonGroupIcons.args = {
  options: [
    { name: 'Sort Down', value: 'desc', icon: <Icon name="sort-down" /> },
    { name: 'Sort Up', value: 'asc', icon: <Icon name="sort-up" /> },
  ],
  labelKey: 'icon',
  type: 'radio',
  name: 'toggle-button-group-icons',
  value: 'desc',
};