import React from 'react';
import {Meta, StoryObj} from '@storybook/react';

import {
  ProgressBar,
  ProgressBarStepper as ProgressBarStepperComponent,
} from './index';

const meta: Meta<typeof ProgressBar> = {
  title: 'HuGo/ProgressBar',
  component: ProgressBar,
};

type Story = StoryObj<typeof ProgressBar>;

export const ProgressBarComponent: Story = {
  argTypes: {
    progress: {control: 'number'},
    total: {control: 'number'},
    fractionDigits: {control: 'number'},
    title: {control: 'text'},
    description: {control: 'text'},
    helper: {control: 'text'},
    showPercentage: {control: 'boolean'},
  },
  args: {
    progress: 50,
    total: 100,
    fractionDigits: 0,
    showPercentage: false,
    title: 'Title',
    description: 'Description',
    helper: 'Helper',
  },
};

export const ProgressBarIndeterminate: Story = {
  render: () => <ProgressBar indeterminate />,
};

export const ProgressBarStepper: StoryObj<typeof ProgressBarStepperComponent> =
  {
    argTypes: {
      current: {control: 'number'},
      total: {control: 'number'},
      title: {control: 'text'},
      description: {control: 'text'},
      helper: {control: 'text'},
    },
    args: {
      current: 1,
      total: 3,
      title: 'Title',
      description: 'Description',
      helper: 'Helper',
    },
    render: args => <ProgressBarStepperComponent {...args} />,
  };

export default meta;