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

import { Container } from '../../../stories/Container';
import { legendControl } from '../../../stories/argTypes';
import { generateDataByLabels } from '../../../stories/mock';
import FEATURES from '../../../stories/mock/us.states.simple.geo.json';

import { Choropleth } from './Choropleth';

export default {
  title: 'Charts/Choropleth',
  component: Choropleth,
  argTypes: {
    states: {
      control: 'text',
      defaultValue: 'NY, CA, TX',
    },

    legendPlacement: legendControl,

    // width,
    // height,
    // data,
    // valueSelector,
    // labelSelector,
    // features,
    projection: {
      control: {
        type: 'select',
        options: [
          'orthographic',
          'albers',
          'albersUsa',
          'mercator',
          'naturalEarth',
          'equalEarth',
        ],
      },
    },
    // fitExtent: {control: 'text', defaultValue: '50, 50, 50, 50'},
    fitSize: { control: 'boolean' }, // !
    // translate,
    scale: { control: 'number' }, // !
    // colors,
    graticule: { control: 'boolean' },
    graticuleColor: { control: 'color' },
    fillColor: { control: 'color' },
    strokeColor: { control: 'color' },
    strokeWidth: { control: { type: 'number', min: 0, max: 1, step: 0.5 } },
    // onFeatureClick,
    // bindTooltip,
    textLabel: { control: 'text', defaultValue: 'label' },
    textLabelSize: { control: 'number' },
    textLabelColor: { control: 'color' },
    background: { control: 'color' },

    showTooltip: { control: 'boolean', defaultValue: true },
  },
};

const Template: Story = (args) => {
  const { states, ...props } = args;
  const data = useMemo(() => {
    return generateDataByLabels(states.trim().split(', '), 100);
  }, [states]);

  return (
    <Container style={{ width: '100%', height: '100vh' }}>
      {/* @ts-ignore */}
      <Choropleth data={data} features={FEATURES} {...props} />
    </Container>
  );
};

export const USA = Template.bind({});
USA.args = { projection: 'albersUsa' };