import { Button, Stack } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { IconInfoCircle } from '@tabler/icons-react';

import ButtonGroup from '.';

const meta: Meta<typeof ButtonGroup> = {
  component: ButtonGroup,
  title: 'Design System/ButtonGroup',
  tags: ['autodocs'],
  args: {
    labels: ['Button 1', 'Button 2', 'Button 3'],
    fullWidth: false,
  },
  argTypes: {
    defaultValue: {
      control: 'select',
      options: [null, 0, 1, 2],
      description: 'Index of the initially selected button (0-based)',
    },
  },
};

export default meta;

type Story = StoryObj<typeof ButtonGroup>;

export const Default: Story = {
  args: {},
};

export const hideCheckIcon: Story = {
  args: {
    labels: ['Button 1', 'Button 2'],
    showCheckIcon: false,
  },
};

export const Two: Story = {
  args: {
    labels: ['Button 1', 'Button 2'],
  },
};

export const Three: Story = {
  args: {
    labels: ['Button 1', 'Button 2', 'Button 3'],
  },
};

export const FixedTextIcon: Story = {
  args: {
    labels: ['Button 1', 'Button 2', 'Button 3'],
    fixedCheck: true,
  },
};

export const WithOnChange: Story = {
  args: {
    labels: ['Button 1', 'Button 2', 'Button 3'],
    onChange: index => {
      if (index !== null) {
        alert(`You have clicked ${index + 1}`);
      }
    },
  },
};

export const FullWidth: Story = {
  render: args => (
    <Stack>
      <ButtonGroup {...args} />
    </Stack>
  ),
  args: {
    labels: ['Button 1', 'Button 2', 'Button 3'],
    fullWidth: true,
  },
};

export const WithButton: Story = {
  render: args => (
    <Stack
      sx={{
        flexDirection: 'row',
        gap: 2,
        alignItems: 'center',
      }}
    >
      <ButtonGroup {...args} />
      <Button
        variant="contained"
        startIcon={<IconInfoCircle />}
      >
        Info
      </Button>
    </Stack>
  ),
  args: {
    labels: ['Button 1', 'Button 2', 'Button 3'],
  },
};