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

import { Container } from '../../../stories/Container';
import { axesControls, spacingControls } from '../../../stories/argTypes';

import { ParetoChart } from './ParetoChart';

export default {
  title: 'Charts/ParetoChart',
  component: ParetoChart,
  argTypes: {
    // bars: { control: { type: 'number', min: 1, step: 1 }, defaultValue: 5 },
    bars: { control: 'text', defaultValue: '50, 40, 30, 20, 10' },
    maxValue: {
      control: { type: 'number', min: 1, step: 1 },
      defaultValue: 100,
    },

    // data,
    // width,
    // height,
    // barSpacing: { control: 'number' },
    ...spacingControls,
    background: { control: 'color' },
    showGrid: { control: 'boolean' },
    gridColor: { control: 'color' },

    barLabel: { control: 'text', defaultValue: 'Total spent' },
    barColor: { control: 'color' },
    lineLabel: { control: 'text', defaultValue: 'Cumulative share' },
    lineColor: { control: 'color' },

    ...axesControls,

    // onBarClick,
    // bindTooltip,
    // horizontal,
    textLabel: { control: 'boolean' },
    showParetoValue: { control: 'boolean' },
    // textLabelSize,
    // textLabelColor,
    showTooltip: { control: 'boolean', defaultValue: true },
    // tooltipComponent
  },
} as Meta;

const SEGMENTS = [
  'Asleep fans',
  'Fans to win back',
  'One time interaction',
  'Potential new valuable fans',
  'Most valuable fans',
  'Loyal fans',
];

const Template: Story = (args) => {
  const { bars, ...props } = args;
  const data = useMemo(() => {
    return bars.split(', ').map((v: any, i: any) => ({
      id: i + '',
      value: +v,
      label: SEGMENTS[i] || i + '',
    }));
  }, [bars]);

  // const data = useMemo(() => generateData(bars, props.maxValue, 'Bar'), [
  //   bars,
  //   props.maxValue,
  // ]);
  return (
    <Container>
      {/* @ts-ignore */}
      <ParetoChart data={data} {...props} />
    </Container>
  );
};

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