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

import { ChartBarStacked } from './chart-bar-stacked';
import type { ChartBarStackedProps } from './chart-bar-stacked';

export default {
  component: ChartBarStacked,
  title: 'Charts/Bars',
  argTypes: {
    data: {
      description: 'Data for Bar Stacked chart'
    },
    dynamicNamedData: {
      description:
        'Configurate keys of data, dataName keys what will be stacked, percentValue - date in percent, value - value of this data'
    },
    domainMax: {
      description: 'Maximum value the Y axis',
      table: {
        defaultValue: {
          summary: 100
        }
      }
    },
    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'
        }
      }
    },
    chartMargin: {
      description: 'Set margins for chart in its container',
      table: {
        defaultValue: {
          summary: {
            left: -24,
            top: 8
          }
        }
      }
    }
  }
} as Meta;

const Template: Story<ChartBarStackedProps> = args => <ChartBarStacked {...args} />;

export const Stacked = Template.bind({});
Stacked.args = {
  data: {
    windows: [
      {
        appVersion: '1.0.0',
        count: 20,
        percentage: 50
      },
      {
        appVersion: '1.1.0',
        count: 10,
        percentage: 25
      },
      {
        appVersion: '2.0.0',
        count: 10,
        percentage: 25
      }
    ],
    mac: [
      {
        appVersion: '1.0.0',
        count: 20,
        percentage: 20
      },
      {
        appVersion: '1.1.0',
        count: 50,
        percentage: 50
      },
      {
        appVersion: '2.0.0',
        count: 30,
        percentage: 30
      }
    ],
    ios: [
      {
        appVersion: '1.0.0',
        count: 7,
        percentage: 70
      },
      {
        appVersion: '1.0.1',
        count: 3,
        percentage: 30
      }
    ],
    android: [
      {
        appVersion: '1.0.0',
        count: 3,
        percentage: 100
      }
    ],
    linux: [
      {
        appVersion: '1.0.0',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.1',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.2',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.3',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.4',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.5',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.6',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.7',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.8',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.9',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.10',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.11',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.12',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.13',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.14',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.15',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.16',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.17',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.18',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.19',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.20',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.21',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.22',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.23',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.24',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.25',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.26',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.27',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.28',
        count: 3,
        percentage: 3
      },
      {
        appVersion: '1.0.29',
        count: 4,
        percentage: 3
      },
      {
        appVersion: '1.0.30',
        count: 10,
        percentage: 8
      },
      {
        appVersion: '1.0.31',
        count: 2,
        percentage: 2
      }
    ]
  },
  dynamicNamedData: {
    dataName: 'appVersion',
    percentValue: 'percentage',
    value: 'count'
  },
  domainMax: 100,
  height: 350,
  tooltip: true,
  domainCalc: false,
  tickCountY: 5,
  dataKeyX: 'name',
  chartMargin: { left: -24, top: 8 },
  tooltipProps: { withTitleValue: true }
};