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

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

import { BarStackChart } from './BarStackChart';

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

export default {
  title: 'Charts/BarStackChart',
  component: BarStackChart,
  argTypes: {
    ...dataControls,

    legendPlacement: legendControl,

    maxValue: {
      control: { type: 'number', min: 1, step: 1 },
      defaultValue: 100,
    },

    // data,
    // width,
    // height,
    // domainSelector,
    // valueSelector,
    valueFormat: { control: 'text' },
    // colors,
    ...spacingControls,

    background: { control: 'color' },
    showGrid: { control: 'boolean' },
    gridColor: { control: 'color' },
    // textColor,
    // axisColor,
    // showLeftAxis,
    // axisLeftAngle,
    // labelLeft,
    // showLeftAxis,
    // axisRightAngle,
    // labelRight,
    // showBottomAxis,
    // axisBottomAngle,
    // labelBottom,
    ...axesControls,
    // onBarClick,
    // bindTooltip,
    horizontal: { control: 'boolean' },
    nice: { control: 'boolean' },
    // maxValue,
    textLabel: { control: 'boolean', defaultValue: true },
    textLabelSize: { control: { type: 'number', min: 0, step: 1 } },
    textLabelColor: { control: 'color' },

    showTooltip: { control: 'boolean', defaultValue: true },
    // tooltipComponent
  },
};

const Template: Story = (args) => {
  const { groups, items, maxValue, ...props } = args;
  const data = useMemo(
    () =>
      generateNamedGroups(
        groups.trim().split(', '),
        items.trim().split(', '),
        maxValue
      ),
    [groups, items, maxValue]
  );

  return (
    <Container>
      <BarStackChart data={data} {...props} />
    </Container>
  );
};

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

export const Horizontal = Template.bind({});
Horizontal.args = {
  showLeftAxis: true,
  horizontal: true,
};