import { withA11y } from '@storybook/addon-a11y';
import { moduleMetadata } from '@storybook/angular';
import { BarChartModule } from './bar-chart.module';
import { BarChartComponent } from './bar-chart.component';
import moment from 'moment';

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

const Template = (args: BarChartComponent) => ({
    component: BarChartComponent,
    props: args,
    // This defines default values (can be overwritten on individual stories)
    args: {
        generateTooltipFunction: (dataPoint: any) => null,
        tooltipType: 2,
        xAxisLabel: 'x-Axis',
        yAxisLabel: 'y-Axis',
        yAxisLabelOffset: -40,
        customAxis: false,
        isHorizontal: false,
        valueLabel: 'value',
        xTicks: 5,
        labelsNumberFormat: '.0%',
        hasPercentage: false,
        betweenBarsPadding: 0.1,
        height: 500,
        axisToMaxRatio: 1.3,
        margin: {
            left: 70,
            right: 1,
            top: 20,
            bottom: 50
        },
        targetLine: undefined
    },
    template: `
    <onguard-bar-chart
        [data]="data"
        [generateTooltipFunction]="generateTooltipFunction"
        [tooltipType]="tooltipType"
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        [yAxisLabelOffset]="yAxisLabelOffset"
        [customAxis]="customAxis"
        [isHorizontal]="isHorizontal"
        [valueLabel]="valueLabel"
        [xTicks]="xTicks"
        [labelsNumberFormat]="labelsNumberFormat"
        [hasPercentage]="hasPercentage"
        [betweenBarsPadding]="betweenBarsPadding"
        [height]="height"
        [axisToMaxRatio]="axisToMaxRatio"
        [targetLine]="targetLine"
        [colorSchema]="colorSchema"
    ></onguard-bar-chart>
    `
});

//   _____ _             _
//  / ____| |           (_)
// | (___ | |_ ___  _ __ _  ___  ___
//  \___ \| __/ _ \| '__| |/ _ \/ __|
//  ____) | || (_) | |  | |  __/\__ \
// |_____/ \__\___/|_|  |_|\___||___/

// TODO: define sample data
const sampleData = [
  {name: 'A', value: 100},
  {name: 'B', value: 90},
  {name: 'C', value: 80},
  {name: 'D', value: 45},
  {name: 'E', value: 63},
  {name: 'F', value: 89},
  {name: 'G', value: 21},
  {name: 'H', value: 87},
  {name: 'I', value: 90},
  {name: 'J', value: 34},
  {name: 'K', value: 86},
  {name: 'L', value: 54},
  {name: 'M', value: 89},
  {name: 'N', value: 45},
  {name: 'O', value: 14},
  {name: 'P', value: 57},
  {name: 'Q', value: 22},
  {name: 'R', value: 70},
  {name: 'S', value: 7},
  {name: 'T', value: 32},
  {name: 'U', value: 45},
  {name: 'V', value: 100},
  {name: 'W', value: 78},
  {name: 'X', value: 54},
  {name: 'Y', value: 80},
  {name: 'Z', value: 78}
];

export const Primary = Template.bind({});
// Override any needed args from the template definition
Primary.args = {
    data: sampleData
};

// This story should render a line over the bar chart.
export const WithTargetLine = Template.bind({});
WithTargetLine.args = {
    ...Primary.args,
    targetLine: 50
};

export const WithCustomAxis = Template.bind({});
WithCustomAxis.args = {
  data: [
    {name: '06/06/2020', value: 100},
    {name: '07/07/2020', value: 90},
    {name: '08/08/2020', value: 80},
    {name: '05/05/2021', value: 45},
    {name: '09/09/2020', value: 63},
  ],
  customAxis: true
};

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

export const AxisToMaxRatioTwice = Template.bind({});
AxisToMaxRatioTwice.args = {
  data: sampleData,
  axisToMaxRatio: 2
};

export const BetweenBarsPadding = Template.bind({});
BetweenBarsPadding.args = {
  data: sampleData,
  betweenBarsPadding: 0.5
};

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

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

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

export const LabelsNumberFormat = Template.bind({});
LabelsNumberFormat.args = {
  data: sampleData,
  labelsNumberFormat: '.50%',
};

export const xTicks = Template.bind({});
xTicks.args = {
  data: sampleData,
  xTicks: 1
};

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

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

export const yAxisLabelOffset = Template.bind({});
yAxisLabelOffset.args = {
  data: sampleData,
  yAxisLabelOffset: -10
};

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

export const tooltipTrunkTrafficType = Template.bind({});
tooltipTrunkTrafficType.args = {
  data: sampleData,
  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 = {
  data: sampleData,
  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 = {
  data: sampleData,
  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 = {
  data: sampleData,
  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 }
      ]
    };
  }
};