import React, { useState } from 'react';

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

import { SegmentButton } from 'components/SegmentButton';
import { Icon, Typography, TYPOGRAPHY_TYPE, ICON_SIZE } from 'components';
import { bem } from 'utils/bem';

import { SegmentedButtonGroup } from './SegmentedButtonGroup';
import { SegmentedButtonGroupProps } from './types';
import { THEME } from '../../constants';

import styles from './segmented-button-group.stories.scss';

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

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

const buttonsManagerClassName = bem(styles, 'buttons-manager');

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

  const onChange = (newValue: T[]): void => {
    if (newValue.length) {
      setValue(newValue);
    }
  };

  const isSelected = (val: T): boolean => value.includes(val);

  return (
    <SegmentedButtonGroup
      {...props}
      value={value}
      onChange={onChange}
    >
      {props.buttonConfigs.map((config) => (
        <SegmentButton
          key={config.value}
          value={config.value}
          disabled={config.disabled}
          className={buttonsManagerClassName('segment', {
            [props.theme ?? THEME.light]: true,
            disabled: Boolean(config.disabled),
            selected: isSelected(config.value),
          })}
          theme={props.theme}
        >
          {config.icon && (
            <Icon
              size={ICON_SIZE.medium}
              name={config.icon}
            />
          )}
          {config.text && (
            <Typography
              type={TYPOGRAPHY_TYPE.subtitle3}
              className={buttonsManagerClassName('text', {
                disabled: Boolean(config.disabled),
                selected: isSelected(config.value),
              })}
            >
              {config.text}
            </Typography>
          )}
        </SegmentButton>
      ))}
    </SegmentedButtonGroup>
  );
};

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

const defaultOptions = [
  {
    value: 'left',
    icon: 'home',
    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 })),
};