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

import ProgressCircleChart from '.';

const meta: Meta<typeof ProgressCircleChart> = {
  component: ProgressCircleChart,
  title: 'Composed Components/Charts/ProgressCircleChart',
  tags: ['autodocs'],
  args: {
    value: 75,
  },
};

export default meta;

type Story = StoryObj<typeof ProgressCircleChart>;

export const Default: Story = {
  render: args => {
    return <ProgressCircleChart {...args} />;
  },
};

export const LowProgress: Story = {
  args: {
    value: 15,
  },
  render: args => {
    return <ProgressCircleChart {...args} />;
  },
};

export const MediumProgress: Story = {
  args: {
    value: 50,
  },
  render: args => {
    return <ProgressCircleChart {...args} />;
  },
};

export const HighProgress: Story = {
  args: {
    value: 85,
  },
  render: args => {
    return <ProgressCircleChart {...args} />;
  },
};

export const Complete: Story = {
  args: {
    value: 100,
  },
  render: args => {
    return <ProgressCircleChart {...args} />;
  },
};

export const CustomColor: Story = {
  args: {
    value: 65,
    color: '#9C27B0',
  },
  render: args => {
    return <ProgressCircleChart {...args} />;
  },
};

export const WithOneDecimal: Story = {
  args: {
    value: 33.3,
    decimalPrecision: 1,
  },
  render: args => {
    return <ProgressCircleChart {...args} />;
  },
};

export const WithTwoDecimals: Story = {
  args: {
    value: 66.67,
    decimalPrecision: 2,
  },
  render: args => {
    return <ProgressCircleChart {...args} />;
  },
};

export const MultipleCharts: Story = {
  render: () => {
    const data = [
      { label: 'Tasks Completed', value: 72, color: '#4CAF50' },
      { label: 'Goals Achieved', value: 45, color: '#2196F3' },
      { label: 'Time Spent', value: 88, color: '#FF9800' },
      { label: 'Budget Used', value: 33, color: '#9C27B0' },
    ];

    return (
      <Stack
        direction="row"
        flexWrap="wrap"
        gap={4}
      >
        {data.map(item => (
          <Box
            key={item.label}
            sx={{
              textAlign: 'center',
              gap: 1,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <ProgressCircleChart
              value={item.value}
              color={item.color}
            />
            <Typography variant="body2">{item.label}</Typography>
          </Box>
        ))}
      </Stack>
    );
  },
};

export const ColorVariations: Story = {
  render: () => {
    const colors = [
      { name: 'Success', color: '#4CAF50' },
      { name: 'Info', color: '#2196F3' },
      { name: 'Warning', color: '#FF9800' },
      { name: 'Error', color: '#F44336' },
      { name: 'Purple', color: '#9C27B0' },
      { name: 'Teal', color: '#009688' },
    ];

    return (
      <Stack
        direction="row"
        flexWrap="wrap"
        gap={4}
      >
        {colors.map(item => (
          <Box
            key={item.name}
            sx={{
              textAlign: 'center',
              gap: 1,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <ProgressCircleChart
              value={75}
              color={item.color}
            />
            <Typography variant="body2">{item.name}</Typography>
          </Box>
        ))}
      </Stack>
    );
  },
};