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

import { ChartArea } from './index';
import type { ChartAreaProps } from './index';

export default {
  component: ChartArea,
  title: 'Charts/Chart Dashed Line',
  argTypes: {
    data: {
      description: 'Data for Area Chart'
    },
    chartConfig: {
      description: 'Chart configurator'
    },
    domainMax: {
      description: 'Maximum value the Y axis',
      table: {
        defaultValue: {
          summary: 100
        }
      }
    },
    dots: {
      description: 'Show values in dots',
      table: {
        defaultValue: {
          summary: false
        }
      }
    },
    height: {
      description: 'Charts height',
      table: {
        defaultValue: {
          summary: 325
        }
      }
    },
    tooltip: {
      description: 'Show tooltip',
      table: {
        defaultValue: {
          summary: true
        }
      }
    },
    domainCalc: {
      description: 'Set it true if you want to use dynamic maximum value the Y axis',
      table: {
        defaultValue: {
          summary: false
        }
      }
    },
    tickCountY: {
      description: 'Set count of tiks for Y axis (not strick may vary depending on data)',
      table: {
        defaultValue: {
          summary: 10
        }
      }
    },
    dataKeyX: {
      description:
        'Type of X axis data. By default it is date. If you not need date set this property empty',
      table: {
        defaultValue: {
          summary: 'date'
        }
      }
    },
    dataXFormat: {
      description: 'Set type of date format for X axis',
      options: ['month', 'day', 'hour'],
      control: {
        type: 'select'
      },
      table: {
        defaultValue: {
          summary: 'month'
        }
      }
    },
    dataYFormat: {
      description: 'Set type of data format for Y axis',
      options: ['percent'],
      control: {
        type: 'select'
      },
      table: {
        defaultValue: {
          summary: ''
        }
      }
    },
    tooltipFormatter: {
      description:
        'Callback which will be fired during tooltip rendering. Arguments: TooltipPayloadItem and item index'
    },
    chartMargin: {
      description: 'Set margins for chart in its container',
      table: {
        defaultValue: {
          summary: { left: -24, right: 6 }
        }
      }
    }
  }
} as Meta;

const Template: Story<ChartAreaProps> = args => <ChartArea {...args} />;

export const TrendLines = Template.bind({});
TrendLines.args = {
  data: [],
  chartConfig: [],
  domainMax: 10,
  dots: false,
  height: 350,
  tooltip: true,
  domainCalc: false,
  tickCountY: 10,
  dataKeyX: 'date',
  dataXFormat: 'month',
  dataYFormat: '',
  chartMargin: { left: -24, right: 6 }
};