import { Story } from '@storybook/react';
import { useMemo } from 'react';
import { groupSelector } from '../utils/data';
import { Container } from '../../stories/Container';
import { generateNamedGroups } from '../../stories/mock';
import { LegendOrdinal } from './LegendComponent';

export default {
  title: 'Legend/Ordinal',
  component: LegendOrdinal,
  argTypes: {
    groups: {
      control: 'text',
      defaultValue: 'New York, Los Angeles, San Francisco',
    },
    items: {
      control: 'text',
      defaultValue: 'Male, Female, Other',
    },
    labelSelector: { control: 'text' },
    column: { control: 'boolean' },
    justify: {
      control: {
        type: 'inline-radio',
        options: ['start', 'center', 'end'],
      },
    },
  },
};

const Template: Story = (args) => {
  const { groups, items, vertical, justify, labelSelector } = args;
  const data = useMemo(
    () =>
      generateNamedGroups(
        groups.trim().split(', '),
        items.trim().split(', '),
        100
      ),
    [groups, items]
  );
  return (
    <Container>
      <LegendOrdinal
        keys={data.map(groupSelector)}
        vertical={vertical}
        justify={justify}
      />
    </Container>
  );
};

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

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