import React, { useState } from 'react';

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

import { SingleToggle } from './SingleToggle';
import { SINGLE_TOGGLE_TYPE } from './types';
import { SingleToggleGroup, SingleToggleGroupProps } from './components';

export default {
  title: 'ReactComponentLibrary/SingleToggle',
  component: SingleToggleGroup,
  decorators: [(Story): JSX.Element => <Story />],
} as ComponentMeta<typeof SingleToggleGroup>;

interface ButtonConfig<T> {
  value: T;
  text: string;
  disabled?: boolean;
}

const SegmentedButtonManager = <T extends number | string>(
  props: Omit<SingleToggleGroupProps<T>, 'value' | 'onValueChange'> & {
    buttonConfigs: Array<ButtonConfig<T>>;
  },
): JSX.Element => {
  const FIRST = 0;
  const [value, setValue] = useState(props.buttonConfigs[FIRST]?.value);

  const onChange = (newValue: T): void => {
    setValue(newValue);
  };

  return (
    <SingleToggleGroup
      {...props}
      value={value}
      onValueChange={onChange}
    >
      {props.buttonConfigs.map((config) => (
        <SingleToggle
          key={config.value}
          value={config.value}
          toggleType={SINGLE_TOGGLE_TYPE.textOnly}
          text={config.text}
          disabled={config.disabled}
          theme={props.theme}
        />
      ))}
    </SingleToggleGroup>
  );
};

const Template: ComponentStory<typeof SegmentedButtonManager> = (args) => <SegmentedButtonManager {...args} />;

const defaultOptions = [
  {
    value: 'left',
    text: 'Left',
  },
  {
    value: 'middle',
    text: 'Middle',
  },
  {
    value: 'right',
    text: 'Right',
  },
];

export const LightDefault = Template.bind({});
LightDefault.args = {
  buttonConfigs: defaultOptions,
};

export const LightDefaultDisabled = Template.bind({});
LightDefaultDisabled.args = {
  buttonConfigs: defaultOptions.map((option) => ({ ...option, disabled: true })),
};