import { extend, map, each, isNull } from "../../2.base";
import { Providers } from "../../5.inject";
import { Plugin } from "../../6.plugin";
import { isSupportCss3, isIE, getIEVersion } from "../../platform/web";
import { HorizontalAlign, VerticalAlign } from "../../constant";
import { FlexCenterLayout, FlexHorizontalLayout, VerticalLayout,
    FlexVerticalLayout, TdLayout, InlineLayout,
    FloatHorizontalFillLayout, ResponsiveInlineLayout,
    InlineCenterAdaptLayout, FlexVerticalCenterAdapt,
    InlineVerticalAdaptLayout, HorizontalAutoLayout,
    TableAdaptLayout, FlexHorizontalCenter,
    InlineHorizontalAdaptLayout, TableLayout,
    AutoVerticalTapeLayout, VTapeLayout,
    HorizontalFillLayout, VerticalFillLayout,
    FlexLeftRightVerticalAdaptLayout, ResponsiveFlexWrapperHorizontalLayout,
    FlexWrapperHorizontalLayout, ResponsiveFlexHorizontalLayout,
    FlexWrapperVerticalLayout
} from "@/core/wrapper";
import { SystemProvider } from "@/core/system";
import { ImageRadio, ImageCheckbox } from "@/base";
import { HalfButton } from "@/case";

// 工程配置
// 注册布局
// adapt类布局优先级规则
// 1、支持flex的浏览器下使用flex布局
// 2、不支持flex的浏览器下使用inline布局
// 3、当列宽既需要自动列宽又需要自适应列宽时，inline布局也处理不了了。当横向出滚动条时使用table布局，不出滚动条时使用float布局
let _isSupportFlex, _isSupportGrid;

function isSupportFlex() {
    if (!_isSupportFlex) {
        _isSupportFlex = !!(isSupportCss3 && isSupportCss3("flex"));
    }

    return _isSupportFlex;
}

function isSupportGrid() {
    if (!_isSupportGrid) {
        _isSupportGrid = !!(isSupportCss3 && isSupportCss3("grid"));
    }

    return _isSupportGrid;
}

// 判断浏览器是否支持sticky 属性
const isSupportSticky = (function () {
    const vendorList = ["", "-webkit-", "-ms-", "-moz-", "-o-"],
        vendorListLength = vendorList.length,
        stickyElement = document.createElement("div");
    for (let i = 0; i < vendorListLength; i++) {
        stickyElement.style.position = `${vendorList[i]}sticky`;
        if (stickyElement.style.position !== "") {
            return true;
        }
    }

    return false;
}());


const configWidget = Plugin.configWidget;

configWidget("bi.horizontal", ob => {
    const supportFlex = isSupportFlex();
    // // 在横向自适应场景下我们需要使用table的自适应撑出滚动条的特性（flex处理不了这种情况）
    // // 主要出现在center_adapt或者horizontal_adapt的场景，或者主动设置horizontalAlign的场景
    // if (ob.horizontalAlign === HorizontalAlign.Center || ob.horizontalAlign === HorizontalAlign.Stretch) {
    //     return extend({}, ob, {type: "bi.table_adapt"});
    // }
    if (supportFlex) {
        return extend({}, ob, { type: FlexHorizontalLayout.xtype });
    }

    return extend({
        scrollx: true,
    }, ob, { type: InlineLayout.xtype });
});
configWidget("bi.vertical", ob => {
    if (ob.horizontalAlign === HorizontalAlign.Left || ob.horizontalAlign === HorizontalAlign.Right) {
        if (isSupportFlex()) {
            return extend({}, ob, { type: FlexVerticalLayout.xtype });
        }

        return extend({}, ob, {
            horizontalAlign: HorizontalAlign.Stretch,
            type: VerticalLayout.xtype,
            items: map(ob.items, (i, item) => {
                return {
                    type: InlineLayout.xtype,
                    horizontalAlign: ob.horizontalAlign,
                    items: [item],
                };
            }),
        });
    }
    if (ob.verticalAlign === VerticalAlign.Stretch) {
        if (isSupportFlex()) {
            return extend({
                horizontalAlign: HorizontalAlign.Stretch,
            }, ob, { type: FlexVerticalLayout.xtype });
        }
    }

    return ob;
});
configWidget("bi.inline", ob => {
    // 当列宽既需要自动列宽又需要自适应列宽时，inline布局也处理不了了，降级table处理吧
    let hasAutoAndFillColumnSize = false;
    if (ob.columnSize && ob.columnSize.length > 0) {
        if ((ob.columnSize.indexOf("") >= 0 || ob.columnSize.indexOf("auto") >= 0) && ob.columnSize.indexOf("fill") >= 0) {
            hasAutoAndFillColumnSize = true;
        }
    } else {
        let hasAuto = false, hasFill = false;
        each(ob.items, (i, item) => {
            if (item.width === "fill") {
                hasFill = true;
            } else if (isNull(item.width) || item.width === "" || item.width === "auto") {
                hasAuto = true;
            }
        });
        hasAutoAndFillColumnSize = hasAuto && hasFill;
    }

    if (hasAutoAndFillColumnSize) {
        // 宽度是不是受限
        if ((ob.scrollable !== true && ob.scrollx !== true) || ob.horizontalAlign === HorizontalAlign.Stretch) {
            return extend({
                verticalAlign: VerticalAlign.Top,
            }, ob, { type: FloatHorizontalFillLayout.xtype });
        }

        return extend({
            horizontalAlign: HorizontalAlign.Stretch,
        }, ob, { type: TableAdaptLayout.xtype });
    }
    if (Providers.getProvider(SystemProvider.xtype).getResponsiveMode()) {
        return extend({}, ob, { type: ResponsiveInlineLayout.xtype });
    }

    return ob;
});
configWidget("bi.center_adapt", ob => {
    const supportFlex = isSupportFlex();
    // var isAdapt = !ob.horizontalAlign || ob.horizontalAlign === HorizontalAlign.Center || ob.horizontalAlign === HorizontalAlign.Stretch;
    // if (!isAdapt || justOneItem) {
    if (supportFlex) {
        return extend({}, ob, { type: FlexCenterLayout.xtype });
    }

    return extend({}, ob, { type: InlineCenterAdaptLayout.xtype });
    // }
    // return ob;
});
configWidget("bi.vertical_adapt", ob => {
    const supportFlex = isSupportFlex();
    // var isAdapt = ob.horizontalAlign === HorizontalAlign.Center || ob.horizontalAlign === HorizontalAlign.Stretch;
    // if (!isAdapt || justOneItem) {
    if (supportFlex) {
        return extend({}, ob, { type: FlexVerticalCenterAdapt.xtype });
    }

    return extend({}, ob, { type: InlineVerticalAdaptLayout.xtype });
    // }
    // return ob;
});

configWidget("bi.horizontal_adapt", ob => {
    const justOneItem = (ob.items && ob.items.length <= 1);
    const isAdapt = !ob.horizontalAlign || ob.horizontalAlign === HorizontalAlign.Center || ob.horizontalAlign === HorizontalAlign.Stretch;
    const verticalAlignTop = !ob.verticalAlign || ob.verticalAlign === VerticalAlign.TOP;
    if (verticalAlignTop && justOneItem) {
        return extend({}, ob, { type: HorizontalAutoLayout.xtype });
    }
    const supportFlex = isSupportFlex();
    // 在横向自适应场景下我们需要使用table的自适应撑出滚动条的特性（flex处理不了这种情况）
    // 主要出现在center_adapt或者horizontal_adapt的场景，或者主动设置horizontalAlign的场景
    if (isAdapt) {
        return extend({
            horizontalAlign: HorizontalAlign.Center,
        }, ob, { type: TableAdaptLayout.xtype });
    }
    if (supportFlex) {
        return extend({
            horizontalAlign: HorizontalAlign.Center,
            scrollx: false,
        }, ob, { type: FlexHorizontalLayout.xtype });
    }

    return extend({
        horizontalAlign: HorizontalAlign.Center,
    }, ob, { type: TableAdaptLayout.xtype });
});

configWidget("bi.horizontal_float", ob => {
    if (isSupportFlex()) {
        return extend({}, ob, { type: FlexHorizontalCenter.xtype });
    }
    if (ob.items && ob.items.length <= 1) {
        return extend({}, ob, { type: InlineHorizontalAdaptLayout.xtype });
    }

    return ob;
});

configWidget("bi.horizontal_fill", ob => {
    if (isSupportFlex()) {
        return extend({
            horizontalAlign: HorizontalAlign.Stretch,
            verticalAlign: VerticalAlign.Stretch,
            scrollx: false,
        }, ob, { type: FlexHorizontalLayout.xtype });
    }
    if ((ob.horizontalAlign && ob.horizontalAlign !== HorizontalAlign.Stretch) || (ob.scrollable === true || ob.scrollx === true)) {
        // 宽度不受限，要用table布局
        return extend({
            horizontalAlign: HorizontalAlign.Stretch,
            verticalAlign: VerticalAlign.Stretch,
        }, ob, { type: TableLayout.xtype });
    }

    return extend({}, ob, { type: FloatHorizontalFillLayout.xtype });
});
configWidget("bi.vertical_fill", ob => {
    if (isSupportFlex()) {
        return extend({
            horizontalAlign: HorizontalAlign.Stretch,
            verticalAlign: VerticalAlign.Stretch,
            scrolly: false,
        }, ob, { type: FlexVerticalLayout.xtype });
    }
    if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
        // 有滚动条，降级到table布局处理
        return extend({}, ob, {
            type: TdLayout.xtype,
            items: map(ob.items, (i, item) => [item]),
        });
    }
    let hasAuto = false;
    if (ob.rowSize && ob.rowSize.length > 0) {
        if (ob.rowSize.indexOf("") >= 0 || ob.rowSize.indexOf("auto") >= 0) {
            hasAuto = true;
        }
    } else {
        each(ob.items, (i, item) => {
            if (isNull(item.height) || item.height === "") {
                hasAuto = true;
            }
        });
    }
    if (hasAuto) {
        // 有自动高的时候
        return extend({}, ob, { type: AutoVerticalTapeLayout.xtype });
    }

    return extend({}, ob, { type: VTapeLayout.xtype });
});
configWidget("bi.horizontal_sticky", ob => {
    if (!isSupportSticky) {
        return extend({ scrollx: true }, ob, { type: HorizontalFillLayout.xtype });
    }
});
configWidget("bi.vertical_sticky", ob => {
    if (!isSupportSticky) {
        return extend({ scrolly: true }, ob, { type: VerticalFillLayout.xtype });
    }
});

configWidget("bi.left_right_vertical_adapt", ob => {
    if (isSupportFlex()) {
        // IE下其实也是可以使用flex布局的，只要排除掉出现滚动条的情况
        // if (!isIE() || (ob.scrollable !== true && ob.scrolly !== true)) {
        return extend({}, ob, { type: FlexLeftRightVerticalAdaptLayout.xtype });
        // }
    }

    return ob;
});
configWidget("bi.flex_horizontal", ob => {
    if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
        if (ob.hgap > 0 || ob.lgap > 0 || ob.rgap > 0) {
            if (Providers.getProvider(SystemProvider.xtype).getResponsiveMode()) {
                return extend({}, ob, { type: ResponsiveFlexWrapperHorizontalLayout.xtype });
            }

            return extend({}, ob, { type: FlexWrapperHorizontalLayout.xtype });
        }
    }
    if (Providers.getProvider(SystemProvider.xtype).getResponsiveMode()) {
        return extend({}, ob, { type: ResponsiveFlexHorizontalLayout.xtype });
    }
});
configWidget("bi.flex_vertical", ob => {
    if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
        if (ob.hgap > 0 || ob.lgap > 0 || ob.rgap > 0) {
            return extend({}, ob, { type: FlexWrapperVerticalLayout.xtype });
        }
    }
});

configWidget("bi.table", ob => {
    if (!isSupportGrid()) {
        return extend({}, ob, { type: TdLayout.xtype });
    }

    return ob;
});

configWidget("bi.radio", ob => {
    if (isIE() && getIEVersion() <= 9) {
        return extend({}, ob, { type: ImageRadio.xtype });
    }

    return ob;
});

configWidget("bi.checkbox", ob => {
    if (isIE() && getIEVersion() <= 9) {
        return extend({}, ob, { type: ImageCheckbox.xtype });
    }

    return ob;
});

configWidget("bi.half_icon_button", ob => {
    if (isIE() && getIEVersion() < 9) {
        return ob;
    }

    return extend({}, ob, { type: "bi.half_button" });
});