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

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

import { CalendarChart } from './CalendarChart';

const dataControls = {
  from: { control: 'date', defaultValue: new Date('01/01/2020') },
  to: { control: 'date', defaultValue: new Date() },
};

export default {
  title: 'Charts/CalendarChart',
  component: CalendarChart,
  argTypes: {
    ...dataControls,

    legendPlacement: legendControl,

    // width,
    // data,
    year: { control: 'number' },
    // dateSelector,
    // valueSelector,
    maxValue: { control: 'number' },
    // colors,
    cellRadius: { control: 'number' },
    cellFill: { control: 'color' },
    cellSize: { control: 'number' },
    cellMargin: { control: { type: 'number', min: 0, step: 0.5 } },
    monthMargin: { control: { type: 'number', min: 0, step: 1 } },
    showMonths: { control: 'boolean' },
    showDays: { control: 'boolean' },
    showYear: { control: 'boolean' },
    labelColor: { control: 'color' },
    labelFontSize: { control: 'number' },

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

const Template: Story = (args) => {
  const { from, to, ...props } = args;
  const data = useMemo(() => {
    if (from && to) {
      return generateDays(from, to);
    } else {
      return [];
    }
  }, [from, to]);

  return (
    <Container style={{ height: 'auto' }}>
      <CalendarChart
        data={data}
        // style={{ width: '100%', height: 'auto', minHeight: 1 }}
        {...props}
      />
    </Container>
  );
};

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

export const Calendar = Template.bind({});
Calendar.args = { monthMargin: 24 };

export const Heatmap = Template.bind({});
Heatmap.args = { showMonths: false, showDays: false, showYear: false };