import { Stack, Typography } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import ProgressBar from '.';

const meta: Meta<typeof ProgressBar> = {
  component: ProgressBar,
  title: 'Design System/Progress Indicators/ProgressBar',
  tags: ['autodocs'],
  args: {
    current: 25,
    variant: 'indeterminate',
    title: 'Title here',
    description: 'Some description',
  },
  argTypes: {
    variant: {
      options: ['determinate', 'indeterminate'],
      control: { type: 'radio' },
    },
    hasPercentage: {
      control: { type: 'boolean' },
    },
  },
};

export default meta;

type Story = StoryObj<typeof ProgressBar>;

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

export const Determinate: Story = {
  args: {
    variant: 'determinate',
  },
};

export const DeterminateHeight: Story = {
  args: {
    variant: 'determinate',
    progressHeight: 8,
  },
};

export const Percentage: Story = {
  args: {
    hasPercentage: true,
    variant: 'determinate',
  },
};

export const HelperAsString: Story = {
  args: {
    helper: 'Some extra help',
  },
};

export const HelperAsComponent: Story = {
  args: {
    helper: (
      <Stack sx={{ gap: 0.5, flexDirection: 'row', alignItems: 'center' }}>
        <Typography variant="globalXXS">Typography component</Typography>
        <Typography
          variant="globalXXS"
          fontWeight="fontWeightSemiBold"
        >
          Typography component with bold text
        </Typography>
      </Stack>
    ),
  },
};

export const NoText: Story = {
  args: {
    title: undefined,
    description: undefined,
  },
};