import { line, tooltip, ColorsSchemasType } from 'britecharts';
import { yAxisLabel, xAxisLabel } from '../bar-chart/bar-chart.stories';

export class LineChartFactory {
    public static build(options: Partial<LineChartFactoryOptions>) {

        const chart =  line()
            .height(options.height)
            .width(options.width)
            .xAxisFormat(options.xAxisFormat)
            .xAxisCustomFormat(options.xAxisCustomFormat)
            .lineCurve(options.lineCurve)
            .isAnimated(options.isAnimated)
            .grid(options.grid)
            .numberFormat(options.numberFormat)
            .tooltipThreshold(600)
            .xAxisLabel(options.xAxisLabel)
            .yAxisLabel(options.yAxisLabel);

        if (options.tooltip) {
            const chartTooltip = tooltip()
                .dateFormat(options.xAxisFormat)
                .dateCustomFormat(options.xAxisCustomFormat);
                
            chart.on('customMouseOver', chartTooltip.show)
                .on('customMouseMove', chartTooltip.update)
                .on('customMouseOut', chartTooltip.hide);
            return {chart, chartTooltip};
        }


        return {chart, chartTooltip: undefined};
            // Null values change render
            // .animationDuration(options.animationDuration)
            // .lineGradient(options.gradient)
            // .colorSchema(options.colorSchema)
            //.lines(options.lines)
            // .loadingState()
            
    }
}

export type D3Curve = 'linear' | 'basis' | 'natural' | 'monotoneX' | 'monotoneY' | 'step' | 'stepAfter' | 'stepBefore' | 'cardinal' | 'catmullRom';
export type AxisFormatType = 'custom' | 'minute-hour' | 'hour-daymonth'|'day-month'|'month-year';
export type StaticLine = { y: number, name: string, color: string}

export interface LineChartFactoryOptions {
    animationDuration: number;
    isAnimated:  boolean;
    colorSchema: ColorsSchemasType;
    grid: any;
    height: number;
    width: number;
    lineCurve: D3Curve;
    gradient: [string, string];
    lines: StaticLine[];
    numberFormat: string; // See D3 number formatting rules
    xAxisFormat: AxisFormatType;
    xAxisCustomFormat: string;

    xAxisLabel: string;
    yAxisLabel: string;

    tooltip: boolean;
}