import { useMemo } from 'react';
import { Story } from '@storybook/react';
import { Container } from '../../stories/Container';
import { generateData } from '../../stories/mock';
import { LegendGradient } from './LegendComponent';
import { valueSelector } from '../utils/data';

export default {
  title: 'Legend/Gradient',
  component: LegendGradient,
  argTypes: {
    items: { control: { type: 'range', min: 1, step: 1 }, defaultValue: 5 },
    maxValue: {
      control: { type: 'number', min: 1, step: 1 },
      defaultValue: 100,
    },
    vertical: { control: 'boolean' },
    reverse: { control: 'boolean' },
  },
};

const Template: Story = (args) => {
  const { items, vertical, reverse } = args;
  const data = useMemo(() => generateData(items, args.maxValue, 'Bar'), [
    items,
    args.maxValue,
  ]);

  const min = Math.min(0, ...data.map(valueSelector));
  const max = Math.max(0, ...data.map(valueSelector));
  return (
    <Container>
      <LegendGradient
        min={min}
        max={max}
        vertical={vertical}
        reverse={reverse}
      />
    </Container>
  );
};

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

export const Vertical = Template.bind({});
Vertical.args = { vertical: true };