import { Story, Meta } from '@storybook/react';
import { ChartComposed } from './chart-composed';
import type { ChartComposedProps } from './chart-composed';

export default {
  component: ChartComposed,
  title: 'Charts/Chart Composed',
  argTypes: {
    data: {
      description: 'Data for Composed 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
        }
      }
    },
    tooltipPostfix: {
      description: 'Postfix for the values in the tooltip',
      table: {
        defaultValue: {
          summary: '%'
        }
      }
    },
    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 }
        }
      }
    },
    isSecondYAxis: {
      description: 'Set true if you need to use second Y axis',
      table: {
        defaultValue: {
          summary: false
        }
      }
    },
    secondYAxisHide: {
      description: 'Set it false if you need to show second Y axis',
      table: {
        defaultValue: {
          summary: false
        }
      }
    },
    secondYAxisDomainMax: {
      description: 'Maximum value of the second Y axis',
      table: {
        defaultValue: {
          summary: 100
        }
      }
    },
    secondYAxisDomainCalc: {
      description:
        'Set it true if you want to use dynamic maximum value of the second Y axis',
      table: {
        defaultValue: {
          summary: false
        }
      }
    },
    referenceValue: {
      description: 'If you need to use reference line set value',
      table: {
        defaultValue: {
          summary: 0
        }
      }
    },
    referenceTitle: {
      description: 'Set title to reference line'
    },
    referenceWidth: {
      description: 'Set width of reference line',
      table: {
        defaultValue: {
          summary: 100
        }
      }
    }
  }
} as Meta;

const Template: Story<ChartComposedProps> = (args) => (
  <ChartComposed {...args} />
);

export const Primary = Template.bind({});
Primary.args = {
  data: [
    {
      date: '2021-01-01',
      ticket: 6,
      chat: 5,
      number: 3,
      user: 80,
      test: 5
    },
    { date: '2021-02-01', ticket: 3, chat: 4, number: 4, user: 35 },
    { date: '2021-03-01', ticket: 4, chat: 4.7, number: 5, user: 74 },
    { date: '2021-04-01', chat: 4, user: 59 },
    { date: '2021-05-01', chat: 4, user: 78 },
    { date: '2021-06-01', ticket: 3.2, chat: 4.8, user: 65 },
    { date: '2021-01-01', ticket: 6, chat: 5, user: 91 },
    { date: '2021-02-01', ticket: 3, chat: 4, user: 72 },
    { date: '2021-03-01', ticket: 4, chat: 4.7, user: 54 },
    { date: '2021-04-01', ticket: 5, chat: 4, user: 36 },
    { date: '2021-05-01', ticket: 7, chat: 4, user: 41 },
    {
      date: '2021-06-01',
      ticket: 3.2,
      chat: 4.8,
      number: 3,
      user: 62,
      test: 5
    }
  ],
  chartConfig: [
    {
      name: 'Chat123',
      id: 'chat',
      show: true,
      color: '#109618',
      type: 'area'
    },
    {
      name: 'Ticket234',
      id: 'ticket',
      show: true,
      type: 'area'
    },
    {
      name: 'Number345',
      id: 'number',
      color: '#4374E0',
      show: true,
      type: 'line'
    },
    {
      name: 'User456',
      id: 'user',
      show: true,
      type: 'bar',
      color: '#4DC9F6',
      yAxisSecond: true
    }
  ],
  domainMax: 10,
  dots: true,
  height: 350,
  tooltip: true,
  tooltipPostfix: '%',
  domainCalc: false,
  tickCountY: 10,
  dataKeyX: 'date',
  dataXFormat: 'month',
  dataYFormat: '',
  chartMargin: { left: -24, right: 6 },
  isSecondYAxis: true,
  secondYAxisHide: true,
  secondYAxisDomainCalc: false,
  referenceValue: 5,
  referenceTitle: 'Recommended Capacity',
  referenceWidth: 150,
  YAxisUnit: 'mb'
};