import { ArgTypes, Meta, Story } from '@storybook/react';
import type { ChartAreaProps } from './chart-area';
import { ChartArea } from './chart-area';

const dates = [
  '2021-01-23T06:00:36.964Z',
  '2021-02-23T08:05:36.964Z',
  '2021-03-23T10:10:36.964Z',
  '2021-04-23T12:15:36.964Z',
  '2021-05-23T14:20:36.964Z',
  '2021-06-23T16:25:36.964Z',
  '2021-07-23T18:30:36.964Z',
  '2021-08-23T20:35:36.964Z',
  '2021-09-23T22:40:36.964Z',
  '2021-10-24T00:45:36.964Z',
  '2021-11-24T02:50:36.964Z',
  '2021-12-24T04:55:36.964Z'
];
const data = [
  {
    activeUsers: 0,
    totalUsers: 0,
    licenses: 0
  },
  {
    activeUsers: 6,
    totalUsers: 5,
    licenses: 6
  },
  {
    activeUsers: 10,
    totalUsers: 50,
    licenses: 100
  },
  {
    activeUsers: 10,
    totalUsers: 50,
    licenses: 100
  },
  {
    activeUsers: 50,
    totalUsers: 132,
    licenses: 200
  },
  {
    activeUsers: 80,
    totalUsers: 160,
    licenses: 200
  },
  {
    activeUsers: 100,
    totalUsers: 160,
    licenses: 250
  },
  {
    activeUsers: 155,
    totalUsers: 200,
    licenses: 500
  },
  {
    activeUsers: 350,
    totalUsers: 500,
    licenses: 600
  },
  {
    activeUsers: 450,
    totalUsers: 531,
    licenses: 650
  },
  {
    activeUsers: 500,
    totalUsers: 550,
    licenses: 700
  },
  {
    activeUsers: 600,
    totalUsers: 750,
    licenses: 800
  }
].map((d, i) => ({ ...d, date: dates[i] }));

const chartConfig: ChartAreaProps['chartConfig'] = [
  {
    name: 'Total Licenses',
    id: 'licenses',
    show: true,
    color: '#D0E2FF',
    disableStroke: true,
    areaProps: {
      type: 'linear'
    },
    stopOpacity: [0.8, 0.3]
  },
  {
    name: 'Total Users',
    id: 'totalUsers',
    show: true,
    color: '#9EC3FF',
    disableStroke: true,
    areaProps: {
      type: 'linear'
    },
    stopOpacity: [0.8, 0.3]
  },
  {
    name: 'Active Users',
    id: 'activeUsers',
    show: true,
    color: '#3E88FF',
    disableStroke: true,
    areaProps: {
      type: 'linear'
    },
    stopOpacity: [0.8, 0.3]
  }
];

const argTypes: Partial<ArgTypes<ChartAreaProps>> = {
  data: {
    description: 'Data for Area Chart'
  },
  chartConfig: {
    description: 'Chart configurator'
  },
  domainMax: {
    description: 'Maximum value the Y axis',
    table: {
      defaultValue: {
        summary: 100
      }
    }
  },
  dots: {
    description: 'Show values in dots',
    type: 'boolean',
    defaultValue: false
  },
  height: {
    description: 'Charts height',
    table: {
      defaultValue: {
        summary: 325
      }
    }
  },
  tooltip: {
    description: 'Show tooltip',
    type: 'boolean',
    defaultValue: 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', undefined],
    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 }
      }
    }
  }
};

const args: ChartAreaProps = {
  data,
  chartConfig,
  domainMax: 1000,
  dots: false,
  height: 350,
  tooltip: true,
  domainCalc: false,
  tickCountY: 10,
  dataKeyX: 'date',
  dataXFormat: 'month',
  dataYFormat: '',
  reverseOrder: false
};

export default {
  component: ChartArea,
  title: 'Charts/Chart Trend Lines',
  argTypes,
  args
} as Meta;

const Template: Story<ChartAreaProps> = args => <ChartArea {...args} />;

export const AreaChart = Template.bind({});

export const TrendLines = Template.bind({});
TrendLines.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: '#109618'
    },
    {
      name: 'Ticket234',
      id: 'ticket',
      show: true,
      color: '#C2185B'
    }
  ],
  domainMax: 10,
  dots: false,
  height: 350,
  tooltip: true,
  domainCalc: false,
  tickCountY: 0,
  dataKeyX: 'none',
  dataXFormat: 'month',
  dataYFormat: '',
  chartMargin: { left: -24, right: 6 }
};