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

import { ChartBar } from './chart-bar';
import type { ChartBarProps } from './types';

export default {
  component: ChartBar,
  title: 'Charts/Bars',
  argTypes: {
    ResponsiveContainerProps: {
      description:
        'Object containing props of ResponsiveContainer component from RechartsJS library'
    },
    BarChartProps: {
      description: 'Object containing props of BarChart component from RechartsJS library'
    },
    CartesianGridProps: {
      description: 'Object containing props of CartesianGrid component from RechartsJS library'
    },
    XAxisProps: {
      description: 'Object containing props of XAxis component from RechartsJS library'
    },
    YAxisProps: {
      description: 'Object containing props of YAxis component from RechartsJS library'
    },
    BarProps: {
      description: 'Object containing props of Bar component from RechartsJS library'
    },
    LabelListProps: {
      description: 'Object containing props of LabelList component from RechartsJS library'
    }
  }
} as Meta;

const Template: Story<ChartBarProps> = args => <ChartBar {...args} />;

export const Simple = Template.bind({});
Simple.args = {
  ResponsiveContainerProps: {
    height: 350
  },
  BarChartProps: {
    data: [
      {
        name: 'name1',
        value: 100,
        color: 'red'
      },
      {
        name: 'name2',
        value: 200,
        color: 'blue'
      },
      {
        name: 'name3',
        value: 300,
        color: 'green'
      },
      {
        name: 'name4',
        value: 400,
        color: 'yellow'
      },
      {
        name: 'name5',
        value: 500,
        color: 'orange'
      }
    ]
  }
};