import {StackedBarChartComponent} from './stacked-bar-chart.component';
import {withA11y} from '@storybook/addon-a11y';
import {moduleMetadata} from '@storybook/angular';
import { action } from '@storybook/addon-actions';
import {StackedBarChartModule} from './stacked-bar-chart.module';
import moment from 'moment';

export default {
  title: 'Visualizations/Britecharts/Stacked Bar Chart',
  component: StackedBarChartComponent,
  decorators: [
    withA11y,
    moduleMetadata({
      imports: [
        StackedBarChartModule
      ]
    })
  ]
};

const Template = (args: StackedBarChartComponent) => ({
  component: StackedBarChartComponent,
  props: args,
  args: {
     isHorizontal: false,
     sortByField: null,
     generateTooltipFunction: (dataPoint: any) => null,
     valueLabel: 'count',
     betweenBarsPadding: 0.1,
     customAxis: false,
     xAxisLabel: 'x-Axis',
     yAxisLabel: 'y-Axis',
     hasPercentage: false,
     labelsNumberFormat: '.0',
     margin: {
      left: 100,
      top: 40,
      right: 20,
      bottom: 70
    },
     maxTopCharts: 2,
     height: 5000,
     hasLegend: false,
     chartName: 'unnamed'
  },
  template: `
    <onguard-stacked-bar-chart
    [data]="data"
    [colorSchema]="colorSchema"
    [isHorizontal] = "isHorizontal"
    [sortByField] = "sortByField"
    [generateTooltipFunction] = "generateTooltipFunction"
    [valueLabel] = "valueLabel"
    [betweenBarsPadding] = "betweenBarsPadding"
    [customAxis] = "customAxis"
    [xAxisLabel] = "xAxisLabel"
    [yAxisLabel] = "yAxisLabel"
    [hasPercentage] = "hasPercentage"
    [labelsNumberFormat] = "labelsNumberFormat"
    [margin] = "margin"
    [maxTopCharts] = "maxTopCharts"
    [height] = "height"
    [hasLegend] = "hasLegend"
    [chartName] = "chartName"
    ></onguard-stacked-bar-chart>
  `
});

const sampleData = [
  {
    callType: 'inbound',
    stack: 'Direct1',
    count: 4,
    name: '2011-01-05'
  },
  {
    callType: 'inbound',
    stack: 'Direct1',
    count: 4,
    name: '2011-01-06'
  },
  {
    callType: 'inbound',
    stack: 'Direct1',
    count: 4,
    name: '2011-01-07'
  },
  {
    callType: 'internal',
    stack: 'Direct2',
    count: 2,
    name: '2011-01-05'
  },
  {
    callType: 'internal',
    stacks: 'Direct2',
    count: 2,
    name: '2011-01-06'
  },
  {
    callType: 'tromboned',
    stack: 'Direct3',
    count: 7,
    name: '2011-01-05'
  },
  {
    callType: 'tromboned',
    stacks: 'Direct3',
    count: 7,
    name: '2011-01-06'
  },
  {
    callType: 'outbound',
    stack: 'Direct4',
    count: 7,
    name: '2011-01-05'
  },
  {
    callType: 'outbound',
    stacks: 'Direct4',
    count: 15,
    name: '2011-01-06'
  }
];

const sampleColorSchema = ['#FF8D06', '#BB54E5', '#00A2EF', '#6645AD'];

export const Primary = Template.bind({});
Primary.args = {
  data: sampleData,
  colorSchema: sampleColorSchema
};

export const Horizontal = Template.bind({});
Horizontal.args = {
  ...Primary.args,
  isHorizontal: true,
  height: 500
};

export const sortByField = Template.bind({});
sortByField.args = {
  ...Primary.args,
  sortByField: false
};

export const valueLabel = Template.bind({});
valueLabel.args = {
  ...Primary.args,
  valueLabel: 'Custom Value Label'
};

export const betweenBarsPadding = Template.bind({});
betweenBarsPadding.args = {
  ...Primary.args,
  betweenBarsPadding: 0.7
};

export const WithCustomAxis = Template.bind({});
WithCustomAxis.args = {
  ...Primary.args,
  customAxis: true
};

export const xAxisLabel = Template.bind({});
xAxisLabel.args = {
  data: sampleData,
  customAxis: true,
  xAxisLabel: 'Custom-x-Axis'
};

export const yAxisLabel = Template.bind({});
yAxisLabel.args = {
  ...Primary.args,
  customAxis: true,
  yAxisLabel: 'Custom-y-Axis'
};

export const HasPercentage = Template.bind({});
HasPercentage.args = {
  ...Primary.args,
  hasPercentage: true
};

export const labelsNumberFormat = Template.bind({});
labelsNumberFormat.args = {
  ...Primary.args,
  labelsNumberFormat: '.7'
};

export const margin = Template.bind({});
margin.args = {
  ...Primary.args,
  margin: {
    left: 150,
    top: 150,
    right: 150,
    bottom: 150
  }
};

export const maxTopCharts = Template.bind({});
maxTopCharts.args = {
  ...Primary.args,
  maxTopCharts: 5
};

export const Height = Template.bind({});
Height.args = {
  ...Primary.args,
  height: 500
};

export const hasLegend = Template.bind({});
hasLegend.args = {
  ...Primary.args,
  hasLegend: true
};

export const chartName = Template.bind({});
chartName.args = {
  ...Primary.args,
  chartName: 'Custom Chart Name'
};

export const CustomColorSchema = Template.bind({});
CustomColorSchema.args = {
  data: sampleData,
  colorSchema: ['#00AEEF', '#FF9801', '#39B54A', '#6645AD']
};

export const tooltipTrunkTrafficType = Template.bind({});
tooltipTrunkTrafficType.args = {
  ...Primary.args,
  tooltipType: 0,
  generateTooltipFunction: (dataPoint: any) => {
    return {
      title: 'BHCA for Facility',
      date: moment(dataPoint.date).format('MM/DD hh:mm A'),
      items: [
        { name: 'BHCA', value: dataPoint.value }
      ]
    };
  }
};

export const tooltipFlowmapType = Template.bind({});
tooltipFlowmapType.args = {
  ...Primary.args,
  tooltipType: 1,
  generateTooltipFunction: (dataPoint: any) => {
    return {
      title: 'BHCA for Facility',
      date: moment(dataPoint.date).format('MM/DD hh:mm A'),
      items: [
        { name: 'BHCA', value: dataPoint.value }
      ]
    };
  }
};

export const tooltipBHCAType = Template.bind({});
tooltipBHCAType.args = {
  ...Primary.args,
  tooltipType: 2,
  generateTooltipFunction: (dataPoint: any) => {
    return {
      title: 'BHCA for Facility',
      date: moment(dataPoint.date).format('MM/DD hh:mm A'),
      items: [
        { name: 'BHCA', value: dataPoint.value }
      ]
    };
  }
};

export const tooltipTop5BusiestTrunksType = Template.bind({});
tooltipTop5BusiestTrunksType.args = {
  ...Primary.args,
  tooltipType: 3,
  generateTooltipFunction: (dataPoint: any) => {
    return {
      title: 'BHCA for Facility',
      date: moment(dataPoint.date).format('MM/DD hh:mm A'),
      items: [
        { name: 'BHCA', value: dataPoint.value }
      ]
    };
  }
};