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

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

import { BarChart } from './BarChart';
import { spacingControls } from '../../../stories/argTypes';

const dataControls = {
  // bars: { control: { type: 'number', min: 1, step: 1 }, defaultValue: 5 },
  bars: { control: 'text', defaultValue: '10, 20, 35, 15, 50' },
};

export default {
  title: 'Charts/BarChart',
  component: BarChart,
  argTypes: {
    maxValue: {
      control: { type: 'number', min: 1, step: 1 },
      defaultValue: 100,
    },
    domainSelector: { control: 'text', defaultValue: 'label' },
    valueSelector: { control: 'text', defaultValue: 'value' },
    barColor: { control: 'color' },
    // barSpacing: { control: 'number' },
    barSize: {
      control: { type: 'number', min: 0, step: 1 },
    },

    ...spacingControls,

    background: { control: 'color' },
    showGrid: { control: 'boolean' },
    gridColor: { control: 'color' },

    ...axesControls,

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

function getInitialState(inputs: Record<string, any>) {
  const obj: Record<string, any> = {};
  for (const key in inputs) {
    if (Object.prototype.hasOwnProperty.call(inputs, key)) {
      const input = inputs[key];
      if (input.defaultValue) {
        obj[key] = input.defaultValue;
      }
    }
  }
  return obj;
}

const Controls = ({
  inputs,
  state,
  handleChange,
}: {
  inputs: Record<string, any>;
  state: any;
  handleChange: any;
}) => {
  return (
    <>
      {Object.keys(inputs).map((key) => {
        const input = inputs[key];
        return (
          <div key={key}>
            <input
              type="text"
              name={key}
              value={state[key]}
              onChange={handleChange}
            />
          </div>
        );
      })}
    </>
  );
};

const Template: Story = (args: any) => {
  const { ...props } = args;
  const [state, setState] = useState(getInitialState(dataControls));
  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (ev) => {
    setState((s) => ({ ...s, [ev.target.name]: ev.target.value }));
  };

  const { bars } = state;
  const data = useMemo(() => {
    return bars
      .split(', ')
      .map((v: any, i: any) => ({ id: i + '', value: v, label: i + '' }));
  }, [bars]);

  return (
    <Container>
      <Controls
        inputs={dataControls}
        state={state}
        handleChange={handleChange}
      />
      <BarChart data={data} {...props} />
    </Container>
  );
};

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

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

export const WithBarSize = Template.bind({});
WithBarSize.args = {
  height: 'auto',
  barSize: 50,
  horizontal: true,
};