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

import { Container } from '../../../stories/Container';
import { getRandomInt } from '../../../stories/mock';

import { TreeMap } from './TreeMap';
import { TILE_METHODS } from './TreeMapSVG';

export default {
  title: 'Charts/TreeMap',
  component: TreeMap,
  argTypes: {
    tileMethod: { control: 'select', options: Object.keys(TILE_METHODS) },

    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) => {
  return (
    <Container>
      {/* @ts-ignore */}
      <TreeMap {...args} />
    </Container>
  );
};

export const Default = Template.bind({});
Default.args = {
  data: [
    { id: '1', parent: null, label: 'Root Collection', value: 0 },
    {
      id: '2',
      parent: '1',
      label: 'Weak Engagement',
      value: getRandomInt(10, 100),
    },
    {
      id: '3',
      parent: '1',
      label: 'Low Engagement',
      value: getRandomInt(10, 100),
    },
    {
      id: '4',
      parent: '1',
      label: 'Moderate Engagement',
      value: getRandomInt(10, 100),
    },
    {
      id: '5',
      parent: '1',
      label: 'Strong Engagement',
      value: getRandomInt(10, 100),
    },
    {
      id: '6',
      parent: '1',
      label: 'Most Intense Superfans',
      value: getRandomInt(10, 100),
    },
  ],
};