import { Story } from '@storybook/react';
import { useMemo } from 'react';

import { Container } from '../../../stories/Container';
import { legendControl } from '../../../stories/argTypes';
import { generateNamedData } from '../../../stories/mock';

import { PieChart } from './PieChart';

export default {
  title: 'Charts/PieChart',
  component: PieChart,
  argTypes: {
    legendPlacement: legendControl,
    // slices: { control: { type: 'number', min: 1, step: 1 }, defaultValue: 5 },
    slices: {
      control: 'text',
      defaultValue: 'Male, Female, Other',
    },

    padAngle: {
      control: { type: 'number', min: 0, max: 5, step: 0.02 },
    },
    padRadius: {
      control: { type: 'number', min: 0, max: 1, step: 0.02 },
    },
    cornerRadius: {
      control: { type: 'number', min: 0, step: 1 },
    },
    outerRadius: {
      control: { type: 'number', min: 0, max: 1, step: 0.02 },
    },
    innerRadius: {
      control: { type: 'number', min: 0, max: 1, step: 0.02 },
    },
    textLabel: { control: 'text', defaultValue: 'value' },
    textLabelSize: {
      control: { type: 'number', min: 0, step: 1 },
    },
    textLabelColor: { control: 'color' },
    showTooltip: { control: 'boolean', defaultValue: true },
  },
};

const Template: Story = (args) => {
  const { slices, ...props } = args;

  const data = useMemo(
    () => generateNamedData(slices.trim().split(', '), 100),
    [slices]
  );
  // const data = useMemo(() => generateData(slices, 100, 'Slice'), [slices]);
  return (
    <Container>
      <PieChart data={data} {...props} />
    </Container>
  );
};

export const Default = Template.bind({});

export const Donut = Template.bind({});
Donut.args = {
  outerRadius: 1,
  innerRadius: 0.4,
};