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

import { Container } from '../../../stories/Container';
import { axesControls } from '../../../stories/argTypes';
import { generateData } from '../../../stories/mock';

import { AreaChart } from './AreaChart';

const dataControls = {
  bars: { control: { type: 'number', min: 1, step: 1 }, defaultValue: 5 },
};

export default {
  title: 'Charts/AreaChart',
  component: AreaChart,
  argTypes: {
    ...dataControls,
    curve: {
      control: {
        type: 'select',
        options: ['linear', 'basis', 'natural', 'cardinal', 'step'],
      },
      defaultValue: 'linear',
    },
    maxValue: {
      control: { type: 'number', min: 1, step: 1 },
      defaultValue: 100,
    },
    graphColor: { control: 'color' },
    strokeWidth: {
      control: { type: 'number', min: 1, step: 0.5 },
      defaultValue: 1,
    },
    fillArea: { control: 'boolean' },
    fillOpacity: {
      control: { type: 'number', min: 0, max: 1, step: 0.1 },
    },
    background: { control: 'color' },
    showGrid: { control: 'boolean' },
    gridColor: { control: 'color' },
    ...axesControls,

    showTooltip: { control: 'boolean', defaultValue: true },
  },
} as Meta;

const Template: Story = (args: any) => {
  const { bars, ...props } = args;
  const data = useMemo(() => generateData(bars, props.maxValue, 'Bar'), [
    bars,
    props.maxValue,
  ]);
  return (
    <Container>
      <AreaChart data={data} {...props} />
    </Container>
  );
};

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

export const LabeledAxes = Template.bind({});
LabeledAxes.args = {
  showLeftAxis: true,
  labelLeft: 'Label left',
  showRightAxis: true,
  labelRight: 'Label right',
  showBottomAxis: true,
  labelBottom: 'Label Bottom',
};