import { Story } from '@storybook/react';
import { Container } from '../../../stories/Container';
import { axesControls, legendControl } from '../../../stories/argTypes';
import {
  generateScatterChart,
  generateScatterPlot,
  getRandomInt,
} from '../../../stories/mock';

import { ScatterChart } from './ScatterChart';

export default {
  title: 'Charts/ScatterChart',
  component: ScatterChart,
  argTypes: {
    // data
    // width: {
    //   control: { type: 'number', min: 0, step: 1 },
    // },
    // height: {
    //   control: { type: 'number', min: 0, step: 1 },
    // },

    legendPlacement: legendControl,

    domainSelector: { control: 'text', defaultValue: 'label' },
    valueSelector: { control: 'text', defaultValue: 'value' },

    minBubbleSize: {
      control: { type: 'number', min: 0, step: 1 },
    },
    maxBubbleSize: {
      control: { type: 'number', min: 0, step: 1 },
    },

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

    ...axesControls,

    // onBarClick,
    // bindTooltip,
    // horizontal,
    textLabel: { control: 'text' },
    // textLabelSize,
    // textLabelColor,
    strokeColor: { control: 'color' },
    fillOpacity: {
      control: { type: 'number', min: 0, step: 0.1 },
    },
    showTooltip: { control: 'boolean', defaultValue: true },
    // tooltipComponent
  },
};

const Template: Story = (props) => {
  return (
    <Container>
      <ScatterChart {...props} />
    </Container>
  );
};

const DEFAULT_DATA = generateScatterChart([
  [
    'Asleep fans',
    () => getRandomInt(10, 1000),
    () => getRandomInt(0, 500),
    () => getRandomInt(0, 2),
  ],
  [
    'Fans to win back',
    () => getRandomInt(10, 1000),
    () => getRandomInt(500, 1000),
    () => getRandomInt(2, 4),
  ],
  [
    'One time interaction',
    () => getRandomInt(10, 1000),
    () => getRandomInt(1000, 1500),
    () => getRandomInt(4, 6),
  ],
  [
    'Potential new valuable fans',
    () => getRandomInt(10, 1000),
    () => getRandomInt(1500, 2000),
    () => getRandomInt(6, 8),
  ],
  [
    'Most valuable fans',
    () => getRandomInt(10, 1000),
    () => getRandomInt(2000, 2500),
    () => getRandomInt(8, 10),
  ],
  [
    'Loyal fans',
    () => getRandomInt(10, 1000),
    () => getRandomInt(2500, 3000),
    () => getRandomInt(10, 12),
  ],
]);

export const Default = Template.bind({});
Default.args = {
  data: DEFAULT_DATA,
  labelLeft: 'Recency',
  labelBottom: 'Monetary',
};

const SCATTER_DATA = generateScatterPlot([
  [
    'Asleep fans',
    10,
    () => null,
    () => getRandomInt(0, 500),
    () => getRandomInt(0, 2),
  ],
  [
    'Fans to win back',
    10,
    () => null,
    () => getRandomInt(500, 1000),
    () => getRandomInt(2, 4),
  ],
  [
    'One time interaction',
    10,
    () => null,
    () => getRandomInt(1000, 1500),
    () => getRandomInt(4, 6),
  ],
  [
    'Potential new valuable fans',
    10,
    () => null,
    () => getRandomInt(1500, 2000),
    () => getRandomInt(6, 8),
  ],
  [
    'Most valuable fans',
    10,
    () => null,
    () => getRandomInt(2000, 2500),
    () => getRandomInt(8, 10),
  ],
  [
    'Loyal fans',
    10,
    () => null,
    () => getRandomInt(2500, 3000),
    () => getRandomInt(10, 12),
  ],
]);

export const ScatterPlot = Template.bind({});
ScatterPlot.args = {
  data: SCATTER_DATA,
  labelLeft: 'Recency',
  labelBottom: 'Monetary',
};