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

import { Container } from '../../../stories/Container';
import { axesControls, legendControl } from '../../../stories/argTypes';
import { generateNamedLines } from '../../../stories/mock';

import { LineChart } from './LineChart';

const dataTypes = {
  points: { control: { type: 'number', min: 1, step: 1 }, defaultValue: 5 },
  lines: {
    control: 'text',
    defaultValue: 'New York, Los Angeles, San Francisco',
  },
  // lines: { control: { type: 'number', min: 1, step: 1 }, defaultValue: 5 },
  // points: {
  //   control: 'text',
  //   defaultValue: 'Male, Female, Other',
  // },
};

export default {
  title: 'Charts/LineChart',
  component: LineChart,
  argTypes: {
    ...dataTypes,

    // data,
    // width,
    // height,
    maxValue: { control: { type: 'number', min: 1, step: 1 }, defaultValue: 5 },
    curve: {
      control: {
        type: 'select',
        options: ['linear', 'basis', 'natural', 'cardinal', 'step'],
      },
      defaultValue: 'linear',
    },
    // domainSelector,
    // valueSelector,
    // dataSelector,
    // colors,
    strokeWidth: {
      control: { type: 'number', min: 1, step: 0.5 },
      defaultValue: 2,
    },
    fillArea: { control: 'boolean' },
    fillOpacity: {
      control: { type: 'number', min: 0, max: 1, step: 0.1 },
    },
    background: { control: 'color' },
    showGrid: { control: 'boolean' },
    gridColor: { control: 'color' },
    ...axesControls,
    // setTooltip,

    showTooltip: { control: 'boolean', defaultValue: true },
    legendPlacement: legendControl,
  },
};

const Template: Story = (args: any) => {
  const { lines, points, ...props } = args;
  const data = useMemo(
    () => generateNamedLines(lines.trim().split(', '), points, props.maxValue),
    [lines, points, props.maxValue]
  );
  // const data = useMemo(() => generateLines(lines, points, props.maxValue), [
  //   lines,
  //   points,
  //   props.maxValue,
  // ]);
  return (
    <Container>
      <LineChart data={data} {...props} />
    </Container>
  );
};

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