import React, {ComponentProps} from 'react';
import {View} from 'react-native';
import {Meta, StoryObj} from '@storybook/react';
import {SPACING} from '@shared/theme';

import {VerticalButtonGroup, VerticalButtonGroupItem} from './index';

type VerticalButtonGroupStoryArgs = ComponentProps<
  typeof VerticalButtonGroup
> & {
  buttonActive: number;
  withTertiary: boolean;
};

const meta: Meta<VerticalButtonGroupStoryArgs> = {
  title: 'HuGo/ButtonGroup/Vertical',
  component: VerticalButtonGroup,
  argTypes: {
    buttonActive: {
      control: 'radio',
      options: [0, 1, 2],
    },
    withTertiary: {control: 'boolean'},
    withTick: {control: 'boolean'},
  },
  render: ({
    buttonActive,
    withTertiary,
    withTick,
  }: VerticalButtonGroupStoryArgs) => {
    const options: VerticalButtonGroupItem[] = [
      {id: 0, label: 'Button 1'},
      {id: 1, label: 'Button 2'},
      ...(withTertiary ? [{id: 2, label: 'Button 3'}] : []),
    ];

    return (
      <VerticalButtonGroup
        options={options}
        selected={buttonActive}
        withTick={withTick}
      />
    );
  },
};

type Story = StoryObj<VerticalButtonGroupStoryArgs>;
export const VerticalButtonGroupComponent: Story = {
  args: {
    buttonActive: 0,
    withTick: true,
  },
};

const BUTTON_OPTIONS = [
  {
    id: 0,
    label: 'zero',
  },
  {
    id: 1,
    label: 'one',
  },
  {
    id: 2,
    label: 'two',
  },
  {
    id: 3,
    label: 'three',
  },
  {
    id: 4,
    label: 'four',
  },
  {
    id: 5,
    label: 'five',
  },
  {
    id: 6,
    label: 'six',
  },
  {
    id: 7,
    label: 'seven',
  },
  {
    id: 8,
    label: 'eight',
  },
  {
    id: 9,
    label: 'nine',
  },
  {
    id: 10,
    label: 'ten',
  },
];

export const MultipleVerticalButtonGroupComponent: Story = {
  args: {
    buttonActive: 0,
    withTick: false,
  },
  argTypes: {
    buttonActive: {
      control: 'radio',
      options: BUTTON_OPTIONS.map(option => option.id),
    },
  },
  render: ({buttonActive, withTick}: VerticalButtonGroupStoryArgs) => {
    const options: VerticalButtonGroupItem[] = BUTTON_OPTIONS.map(
      (value, index) => ({
        id: index,
        label: value.label,
      }),
    );

    const selected =
      options[BUTTON_OPTIONS.findIndex(value => value.id === +buttonActive)].id;

    return (
      <View style={{gap: SPACING.x1}}>
        <VerticalButtonGroup
          options={options.slice(0, 6)}
          selected={selected}
          withTick={withTick}
          withLimitedOptions={false}
        />
        <VerticalButtonGroup
          options={options.slice(6)}
          selected={selected}
          withTick={withTick}
          withLimitedOptions={false}
        />
      </View>
    );
  },
};

export default meta;