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

import { ChartLegend } from './chart-legend';
import type { ChartLegendProps } from './chart-legend';

export default {
  component: ChartLegend,
  title: 'Charts/Legend',
  argTypes: {
    chartConfig: {
      description: "Legend config which relates to it's chart.",
      table: {
        defaultValue: {
          summary: []
        }
      }
    },
    active: {
      description:
        'Whether the legend will be clickable or not, pass `handleChange` to deal with the callback.',
      table: {
        defaultValue: {
          summary: false
        }
      }
    },
    vertical: {
      description:
        'If `true` the legend will be vertical instead of horizontal.',
      table: {
        defaultValue: {
          summary: false
        }
      }
    },
    data: {
      description: 'The data to display.'
    },
    legendUnitPrefix: {
      description: 'Prefix for the legend units.',
      table: {
        defaultValue: {
          summary: ''
        }
      }
    },
    legendUnitPostfix: {
      description: 'Postfix for the legend units.',
      table: {
        defaultValue: {
          summary: ''
        }
      }
    },
    handleChange: {
      description: 'Change call back which will be fired on legend click.'
    },
    classesRoot: {
      description: 'Override classes.'
    }
  }
} as Meta;

const Template: Story<ChartLegendProps> = (args) => <ChartLegend {...args} />;

export const Vertical = Template.bind({});
Vertical.args = {
  vertical: true,
  data: [
    {
      name: 'One',
      value: 23,
      color: '#4374E0'
    },
    {
      name: 'Two',
      value: 7,
      color: '#DC3912'
    },
    {
      name: 'Three',
      value: 12,
      color: '#109618'
    }
  ],
  legendUnitPostfix: '%'
};

export const Horizontal = Template.bind({});
Horizontal.args = {
  handleChange: (id) => () => alert(id),
  active: true,
  chartConfig: [
    {
      name: 'chat123',
      id: 'chat',
      show: true,
      color: '#4374E0'
    },
    {
      name: 'ticket234',
      id: 'ticket',
      show: true,
      color: '#DC3912'
    },
    {
      name: 'number345',
      id: 'number',
      show: true
    },
    {
      name: 'user456',
      id: 'user',
      show: true
    }
  ]
};