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

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

import { RadarChart } from './RadarChart';

export default {
  title: 'Charts/RadarChart',
  component: RadarChart,
  argTypes: {
    // slices: { control: { type: 'number', min: 1, step: 1 }, defaultValue: 5 },
    legendPlacement: legendControl,
    groups: {
      control: 'text',
      defaultValue:
        'Weak Engagement, Low Engagement, Moderate Engagement, Strong Engagement, Most Intense Superfans',
    },
    items: {
      control: 'text',
      defaultValue: 'One, Two, Three, Four, Five, Six, Seven',
    },

    padding: {
      control: { type: 'number', min: 0, step: 1 },
    },
    maxValue: {
      control: { type: 'number', min: 0, step: 1 },
    },
    numTicks: {
      control: { type: 'number', min: 0, step: 1 },
    },
    fillOpacity: {
      control: { type: 'number', min: 0, max: 1, step: 0.1 },
    },
    strokeWidth: {
      control: { type: 'number', min: 1, step: 0.5 },
      defaultValue: 2,
    },
    textLabel: { control: 'text', defaultValue: 'label' },
    textLabelSize: {
      control: { type: 'number', min: 0, step: 1 },
    },
    textLabelColor: { control: 'color' },
    textLabelOffset: {
      control: { type: 'number', min: 0, step: 1 },
    },
    showGrid: { control: 'boolean', defaultValue: true },
    gridColor: { control: 'color' },
    vectorsColor: { control: 'color' },
    vectorsWidth: {
      control: { type: 'number', min: 1, step: 0.5 },
      defaultValue: 1,
    },
    showTooltip: { control: 'boolean', defaultValue: true },
  },
};

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

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

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

export const Star = Template.bind({});
Star.args = {
  showGrid: false,
  vectorsColor: '#000',
  vectorsWidth: 2,
};