import { Story, Meta } from '@storybook/react';
import { Donut } from './chart-donut';
import type { DonutProps } from './types';

export default {
  component: Donut,
  title: 'Charts/Donut Chart',
  argTypes: {
    title: {
      description: 'Internal title or big text in donut',
      table: {
        defaultValue: {
          summary: ''
        }
      }
    },
    subtitle: {
      description: 'Internal subtitle or small text in donut',
      table: {
        defaultValue: {
          summary: ''
        }
      }
    },
    data: {
      description: 'Donut data'
    },
    size: {
      description: 'Donut size',
      options: ['xsmall', 'small', 'large'],
      control: {
        type: 'select'
      },
      table: {
        defaultValue: {
          summary: 'small'
        }
      }
    },
    half: {
      description: 'If we need half donut chart',
      table: {
        defaultValue: {
          summary: false
        }
      }
    },
    tooltip: {
      description: 'Show tooltip',
      table: {
        defaultValue: {
          summary: false
        }
      }
    },
    tooltipPostfix: {
      description: 'Add postfix in tooltip value',
      table: {
        defaultValue: {
          summary: ''
        }
      }
    }
  }
} as Meta;

const Template: Story<DonutProps> = (args) => {
  return <Donut {...args} />;
};

export const Primary = Template.bind({});
Primary.args = {
  title: 'Title',
  subtitle: 'Subtitle',
  data: [
    {
      name: 'One',
      value: 23,
      color: '#4374E0'
    },
    {
      name: 'Two',
      value: 7,
      color: '#DC3912'
    },
    {
      name: 'Three',
      value: 12,
      color: '#109618'
    }
  ],
  size: 'small',
  half: false,
  tooltip: false,
  tooltipPostfix: ''
};

export const DonutValueFrom = Template.bind({});
DonutValueFrom.args = {
  title: 'Users',
  subtitle: 'Subtitle',
  data: [
    {
      name: 'Users',
      value: 320,
      color: '#109618'
    },
    {
      name: 'Empty',
      value: 1
    }
  ]
};

export const XsmallDonut = Template.bind({});
XsmallDonut.args = {
  title: '46/50',
  data: [
    {
      name: 'Members',
      value: 46,
      color: '#266FE2'
    },
    {
      name: 'Empty',
      value: 4
    }
  ],
  size: 'xsmall'
};