import * as React from 'react';
import { action } from '@storybook/addon-actions';
import type { Meta, Story } from '@storybook/react';

import { ASSETS_URL } from '../../../consts/common';
import { ToggleButton } from '../toggle-button';
import { ToggleButtonGroup } from './index';
import type { ToggleButtonGroupProps } from './index';

export default {
  component: ToggleButtonGroup,
  title: 'Forms/Toggle Button Group'
} as Meta;

const onStateChange = action('onChange');

const Template: Story<ToggleButtonGroupProps> = args => {
  const [value, setValue] = React.useState(args.value || null);

  const onChange: ToggleButtonGroupProps['onChange'] = (event, newValue) => {
    onStateChange(event, newValue);
    null !== newValue && setValue(newValue); // simulate radio-button group
  };

  return <ToggleButtonGroup {...args} onChange={onChange} value={value} />;
};

export const Primary = Template.bind({});
Primary.args = {
  children: [
    <ToggleButton value="1st">First</ToggleButton>,
    <ToggleButton value="2nd">Second</ToggleButton>,
    <ToggleButton value="3rd">Third</ToggleButton>,
    <ToggleButton value="4th" disabled>
      Fourth
    </ToggleButton>,
    <ToggleButton value="5th">Fifth</ToggleButton>
  ],
  disabled: false,
  multiple: false,
  value: '3rd'
};

export const WithIcons = Template.bind({});
WithIcons.args = {
  children: [
    <ToggleButton startIconUrl={`${ASSETS_URL}/icons2/icon_objects.svg`} value="objects">
      Objects
    </ToggleButton>,
    <ToggleButton startIconUrl={`${ASSETS_URL}/icons2/icon_key.svg`} value="key">
      Lock
    </ToggleButton>,
    <ToggleButton startIconUrl={`${ASSETS_URL}/icons2/icon_help.svg`} value="help">
      Help
    </ToggleButton>
  ],
  disabled: false,
  multiple: false,
  value: 'key'
};