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

import { ChartLine } from './chart-line';
import type { ChartLineProps } from './chart-line';

export default {
  component: ChartLine,
  title: 'Charts/Chart Line',
  argTypes: {
    data: {
      description: 'Data for Line 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<ChartLineProps> = (args) => <ChartLine {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  data: [
    {
      date: '2021-01-23T06:00:36.964Z',
      ticket: 6,
      chat: 5
    },
    {
      date: '2021-02-23T08:05:36.964Z',
      ticket: 3,
      chat: 4
    },
    {
      date: '2021-03-23T10:10:36.964Z',
      ticket: 4,
      chat: 4.7
    },
    {
      date: '2021-04-23T12:15:36.964Z',
      chat: 4
    },
    {
      date: '2021-05-23T14:20:36.964Z',
      chat: 4
    },
    {
      date: '2021-06-23T16:25:36.964Z',
      ticket: 3.2,
      chat: 4.8
    },
    {
      date: '2021-07-23T18:30:36.964Z',
      ticket: 6,
      chat: 5
    },
    {
      date: '2021-08-23T20:35:36.964Z',
      ticket: 3,
      chat: 4
    },
    {
      date: '2021-09-23T22:40:36.964Z',
      ticket: 4,
      chat: 4.7
    },
    {
      date: '2021-10-24T00:45:36.964Z',
      ticket: 5,
      chat: 4
    },
    {
      date: '2021-11-24T02:50:36.964Z',
      ticket: 7,
      chat: 4
    },
    {
      date: '2021-12-24T04:55:36.964Z',
      ticket: 3.2,
      chat: 4.8
    }
  ],
  chartConfig: [
    {
      name: 'Chat123',
      id: 'chat',
      show: true,
      color: '#4374E0'
    },
    {
      name: 'Ticket234',
      id: 'ticket',
      show: true,
      color: '#DC3912'
    }
  ],
  domainMax: 10,
  dots: true,
  height: 350,
  tooltip: true,
  domainCalc: false,
  tickCountY: 10,
  dataKeyX: 'date',
  dataXFormat: 'month',
  dataYFormat: '',
  chartMargin: { left: -24, right: 6 }
};