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

import ProgressCircle from '.';

const meta: Meta<typeof ProgressCircle> = {
  component: ProgressCircle,
  title: 'Composed Components/Charts/ProgressCircle',
  tags: ['autodocs'],
  args: {
    current: 25,
    copetin: 'Copetin',
    title: 'Title here',
    description: 'Some description',
  },
  argTypes: {
    color: {
      control: { type: 'color' },
    },
    decimalPrecision: {
      options: [0, 1, 2],
      control: { type: 'radio' },
    },
  },
};

export default meta;

type Story = StoryObj<typeof ProgressCircle>;

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

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

export const DecimalPrecision: Story = {
  args: {
    decimalPrecision: 2,
  },
};

export const Color: Story = {
  render: args => {
    const theme = useTheme();
    return (
      <ProgressCircle
        {...args}
        color={theme.palette.newBase?.green[600]}
      />
    );
  },
  args: {},
};

export const Loading: Story = {
  args: {
    loading: true,
  },
};