import {DetailsBehavior, DetailsFocusTypeEnum} from "../mmviz-behavior";
import {getBarPadding, getOrientationEnum, OrientationEnum} from "../mmviz-common";
import {AreaComponentSvg} from "../mmviz-component-svg/area";
import {BarComponentSvg} from "../mmviz-component-svg/bar";
import {LineComponentSvg} from "../mmviz-component-svg/line";
import {PieComponentSvg} from "../mmviz-component-svg/pie";
import {ScatterComponentSvg} from "../mmviz-component-svg/scatter";
import {
    areaLayoutCreator,
    barLayoutCreator,
    barStackLayoutCreator,
    lineLayoutCreator,
    pieLayoutCreator,
    ScaleContainerTypeEnum,
    scatterLayoutCreator,
    stackLayoutCreator
} from "../mmviz-layout";

/**
 * Build a Area chart layer
 * @param config - configuration of the layer
 * @param chartConfig - configuration of the chart
 * @param layoutScale - contains all scales that map the chart layout
 * @param chartView - representation of the chart
 */
export function buildAreaLayer(config, chartConfig, layoutScale, chartView){

    chartView.addContentTypeClass("area-content");

    const layerConfig = {
        colorScaleKey: "color"
    };

    Object.assign(layerConfig, config);

    const layoutExtender = areaLayoutCreator(layerConfig.colorScaleKey),
        component = new AreaComponentSvg(chartConfig.selector)
    ;

    const detailsBehavior = new DetailsBehavior(chartConfig.selector, component.selector);
    detailsBehavior.focusTypeEnum = DetailsFocusTypeEnum.DATA;

    layoutScale.createScaleContainer(layerConfig.colorScaleKey, ScaleContainerTypeEnum.COLOR_CATEGORICAL_DARK);

    // layer mapper
    return (dataModel) => {

        let layerViewModel: any,
            layouter: Function
        ;

        layouter = layoutExtender(dataModel, layoutScale);

        // layer update view
        return () => {
            layerViewModel = layouter();
            component.updateView(chartView.stage, layerViewModel);
            detailsBehavior.setupBehavior();
        };
    };
}

/**
 * Build a Bar chart layer
 * @param config - configuration of the layer
 * @param chartConfig - configuration of the chart
 * @param layoutScale - contains all scales that map the chart layout
 * @param chartView - representation of the chart
 * @param dataModel - contains dataArray and functions to map data attributes to chart visuals
 */
export function buildBarLayer(config, chartConfig, layoutScale, chartView) {

    const layerConfig: any = {
        colorScaleKey: "color",
        orientation: "vertical"
    };

    Object.assign(layerConfig, config);

    const orientationEnum = getOrientationEnum(layerConfig.orientation),
        layoutExtender = barLayoutCreator(orientationEnum, layerConfig.colorScaleKey),
        component = new BarComponentSvg(chartConfig.selector)
    ;

    chartView.addContentTypeClass("bar-content");
    if (OrientationEnum.VERTICAL === orientationEnum) {
        chartView.addContentTypeClass("bar-vertical");
    }
    else if (OrientationEnum.HORIZONTAL === orientationEnum) {
        chartView.addContentTypeClass("bar-horizontal");
    }

    const detailsBehavior = new DetailsBehavior(chartConfig.selector, component.selector);
    detailsBehavior.focusTypeEnum = DetailsFocusTypeEnum.DATA;

    layoutScale.createScaleContainer(layerConfig.colorScaleKey, ScaleContainerTypeEnum.COLOR_CATEGORICAL_DARK);

    // layer mapper
    return (dataModel) => {

        let layerViewModel: any,
            layouter: Function
        ;

        if (layerConfig.padding === undefined){
            layerConfig.padding = getBarPadding(dataModel.dataArray.length);
        }

        if (OrientationEnum.VERTICAL === orientationEnum) {
            layoutScale.xScale.padding(layerConfig.padding);
        }
        else if (OrientationEnum.HORIZONTAL === orientationEnum) {
            layoutScale.yScale.padding(layerConfig.padding);
        }

        layouter = layoutExtender(dataModel, layoutScale);

        // layer update view
        return () => {

            layerViewModel = layouter();
            component.updateView(chartView.stage, layerViewModel);
            detailsBehavior.setupBehavior();
        };
    };
}

/**
 * Build a Bar stack chart layer
 * @param config - configuration of the layer
 * @param chartConfig - configuration of the chart
 * @param layoutScale - contains all scales that map the chart layout
 * @param chartView - representation of the chart
 * @param dataModel - contains dataArray and functions to map data attributes to chart visuals
 */
export function buildBarStackLayer(config, chartConfig, layoutScale, chartView) {

    const layerConfig: any = {
        colorScaleKey: "color",
        orientation: "vertical"
    };

    Object.assign(layerConfig, config);

    const orientationEnum = getOrientationEnum(layerConfig.orientation),
        layoutExtender = barStackLayoutCreator(orientationEnum, layerConfig.colorScaleKey),
        component = new BarComponentSvg(chartConfig.selector)
    ;

    chartView.addContentTypeClass("bar-content");
    if (OrientationEnum.VERTICAL === orientationEnum) {
        chartView.addContentTypeClass("bar-vertical");
    }
    else if (OrientationEnum.HORIZONTAL === orientationEnum) {
        chartView.addContentTypeClass("bar-horizontal");
    }

    const detailsBehavior = new DetailsBehavior(chartConfig.selector, component.selector);
    detailsBehavior.focusTypeEnum = DetailsFocusTypeEnum.DATA;

    layoutScale.createScaleContainer(layerConfig.colorScaleKey, ScaleContainerTypeEnum.COLOR_CATEGORICAL_DARK);

    // layer mapper
    return (dataModel) => {

        let layerViewModel: any,
            layouter: Function
        ;

        if (layerConfig.padding === undefined){
            layerConfig.padding = getBarPadding(dataModel.dataArray.length);
        }

        if (OrientationEnum.VERTICAL === orientationEnum) {
            layoutScale.xScale.padding(layerConfig.padding);
        }
        else if (OrientationEnum.HORIZONTAL === orientationEnum) {
            layoutScale.yScale.padding(layerConfig.padding);
        }

        layouter = layoutExtender(dataModel, layoutScale);

        // layer update view
        return () => {

            layerViewModel = layouter();
            component.updateView(chartView.stage, layerViewModel);
            detailsBehavior.setupBehavior();
        };
    };
}

/**
 * Build a Line chart layer
 * @param config - configuration of the layer
 * @param chartConfig - configuration of the chart
 * @param layoutScale - contains all scales that map the chart layout
 * @param chartView - representation of the chart
 */
export function buildLineLayer(config, chartConfig, layoutScale, chartView){

    chartView.addContentTypeClass("line-content");

    const layerConfig = {
        colorScaleKey: "color"
    };

    Object.assign(layerConfig, config);

    const layoutExtender = lineLayoutCreator(layerConfig.colorScaleKey),
        component = new LineComponentSvg(chartConfig.selector)
    ;

    const detailsBehavior = new DetailsBehavior(chartConfig.selector, component.selector);
    detailsBehavior.focusTypeEnum = DetailsFocusTypeEnum.DATA;

    layoutScale.createScaleContainer(layerConfig.colorScaleKey, ScaleContainerTypeEnum.COLOR_CATEGORICAL_DARK);

    // layer mapper
    return (dataModel) => {

        let layerViewModel: any,
            layouter: Function
        ;

        layouter = layoutExtender(dataModel, layoutScale);

        // layer update view
        return () => {
            layerViewModel = layouter();
            component.updateView(chartView.stage, layerViewModel, layoutScale);
            detailsBehavior.setupBehavior();
        };
    };
}

/**
 * Build a Scatter plot chart layer
 * @param config - configuration of the layer
 * @param chartConfig - configuration of the chart
 * @param layoutScale - contains all scales that map the chart layout
 * @param chartView - representation of the chart
 */
export function buildScatterLayer(config, chartConfig, layoutScale, chartView){

    chartView.addContentTypeClass("scatter-content");

    const layerConfig = {
        colorScaleKey: "color",
        areaScaleKey: "area",
        shapeScaleKey: "shape"
    };

    Object.assign(layerConfig, config);

    const layoutExtender = scatterLayoutCreator(layerConfig.colorScaleKey,
        layerConfig.areaScaleKey, layerConfig.shapeScaleKey),
        component = new ScatterComponentSvg(chartConfig.selector)
    ;

    const detailsBehavior = new DetailsBehavior(chartConfig.selector, component.selector);
    detailsBehavior.focusTypeEnum = DetailsFocusTypeEnum.DATA;

    layoutScale.createScaleContainer(layerConfig.shapeScaleKey, ScaleContainerTypeEnum.SHAPE);
    layoutScale.createScaleContainer(layerConfig.areaScaleKey, ScaleContainerTypeEnum.AREA);
    layoutScale.createScaleContainer(layerConfig.colorScaleKey, ScaleContainerTypeEnum.COLOR_CATEGORICAL_DARK);

    // layer mapper
    return (dataModel) => {

        let layerViewModel: any, layouter: Function;

        layouter = layoutExtender(dataModel, layoutScale);

        // layer update view
        return () => {
            layerViewModel = layouter();
            component.updateView(chartView.stage, layerViewModel);
            detailsBehavior.setupBehavior();
        };
    };
}

/**
 * Build a Stack plot chart layer
 * @param config - configuration of the layer
 * @param chartConfig - configuration of the chart
 * @param layoutScale - contains all scales that map the chart layout
 * @param chartView - representation of the chart
 */
export function buildStackLayer(config, chartConfig, layoutScale, chartView) {

    chartView.addContentTypeClass("stack-content");

    const layerConfig = {
        colorScaleKey: "color",
        orientation: "vertical"
    };

    Object.assign(layerConfig, config);

    const orientationEnum = getOrientationEnum(layerConfig.orientation),
        layoutExtender = stackLayoutCreator(orientationEnum, layerConfig.colorScaleKey),
        component = new AreaComponentSvg(chartConfig.selector)
    ;

    if (OrientationEnum.VERTICAL === orientationEnum) {
        chartView.addContentTypeClass("stack-vertical");
    }
    else if (OrientationEnum.HORIZONTAL === orientationEnum) {
        chartView.addContentTypeClass("stack-horizontal");
    }

    const detailsBehavior = new DetailsBehavior(chartConfig.selector, component.selector);
    detailsBehavior.focusTypeEnum = DetailsFocusTypeEnum.DATA;

    layoutScale.createScaleContainer(layerConfig.colorScaleKey, ScaleContainerTypeEnum.COLOR_CATEGORICAL_DARK);

    // layer mapper
    return (dataModel) => {

        let layerViewModel: any,
            layouter: Function
        ;

        layouter = layoutExtender(dataModel, layoutScale);

        // layer update view
        return () => {
            layerViewModel = layouter();
            component.updateView(chartView.stage, layerViewModel);
            detailsBehavior.setupBehavior();
        };
    };

}

/**
 * Build a Pie plot chart layer
 * @param config - configuration of the layer
 * @param chartConfig - configuration of the chart
 * @param layoutScale - contains all scales that map the chart layout
 * @param chartView - representation of the chart
 */
export function buildPieLayer(config, chartConfig, layoutScale, chartView) {

    chartView.addContentTypeClass("pie-content");

    let layerConfig = {
        colorScaleKey: "color",
        innerRadiusPercent: 0
    };

    Object.assign(layerConfig, config);

    const layoutExtender = pieLayoutCreator(layerConfig.colorScaleKey, layerConfig.innerRadiusPercent),
        component = new PieComponentSvg(chartConfig.selector),
        detailsBehavior = new DetailsBehavior(chartConfig.selector, component.selector)
    ;

    layoutScale.createScaleContainer(layerConfig.colorScaleKey, ScaleContainerTypeEnum.COLOR_CATEGORICAL_DARK);

    // layer mapper
    return (dataModel) => {

        let layerViewModel: any,
            layouter: Function
        ;

        layouter = layoutExtender(dataModel, layoutScale);

        // layer update view
        return () => {
            layerViewModel = layouter();
            component.updateView(chartView.stage, layerViewModel);
            detailsBehavior.setupBehavior();
        };
    };
}