import {
    cloneDeep
} from "lodash";
import { i18n } from "../../../public/i18n";
import { getFontOptions } from "./index";
import {addContentPath} from '../../../util/index.js'

const layout_6_18 = {
    labelCol: {
        span: 6
    },
    wrapperCol: {
        span: 18
    },
}

const layout_10_14 = {
    labelCol: {
        span: 10
    },
    wrapperCol: {
        span: 14
    },
}

const layout_8_16 = {
    labelCol: {
        span: 8
    },
    wrapperCol: {
        span: 16
    },
}

const layout_4_20 = {
    labelCol: {
        span: 4
    },
    wrapperCol: {
        span: 20
    },
}

const layout_0_24 = {
    labelCol: {
        span: 0
    },
    wrapperCol: {
        span: 24
    },
}

const getFillOptions = () => {
    const imgs = ['fill', 'adapt', 'stretch', 'tile', 'center'].map(key => `/spa/portal/images/${key}.png`),
        names = ['fill', 'adapt', 'stretch', 'tile', 'center'].map(key => i18n.label[key]())

    return imgs.map((img, index) => {
        return {
            value: (index + 1) + '',
            name: (
                <div className='fill-option'>
                    <img src={addContentPath(img)} alt="" width="60" height="35" style={{verticalAlign:'middle'}}/>
                    <span style={{marginLeft:15}}>{names[index]}</span>
                </div>
            )
        }
    })
}

const bg = () => ({
    name: "",
    datas: [{
        key: "fill",
        label: i18n.label.fillType(),
        type: "select",
        layout: layout_6_18,
        width: "100%",
        options: getFillOptions(),
    }, {
        key: "bg-color",
        label: i18n.label.pureBg(),
        type: "color",
        layout: layout_6_18,
        width: "100%",
    }]
})

const text = () => ({
    name: i18n.label.text(),
    datas: [{
        key: "rich_text",
        label: "",
        type: "richText",
        layout: layout_0_24,
        width: "100%",
    }]
})

const bg_color = () => ({
    key: "bg-color",
    label: i18n.label.bgColor(),
    layout: layout_6_18,
    type: "color",
    width: "100%",
})

const vh_align = () => ({
    key: "h-align",
    label: i18n.label.align(),
    layout: layout_6_18,
    type: "radioButton",
    width: "60%",
    options: [{
        value: "1",
        icon: <i className="icon-coms-Align-left" />,
    }, {
        value: "2",
        icon: <i className="icon-coms-Center" />,
    }, {
        value: "3",
        icon: <i className="icon-coms-Right-alignment" />,
    }],
    sub: {
        datas: [{
            key: "v-align",
            label: "",
            layout: layout_0_24,
            type: "radioButton",
            options: [{
                value: "1",
                icon: <i className="icon-coms02-Up-alignment" />,
            }, {
                value: "2",
                icon: <i className="icon-coms02-Center-alignment" />,
            }, {
                value: "3",
                icon: <i className="icon-coms02-Lower-alignment" />,
            }],
        }]
    }
})

const position = () => ({
    name: i18n.label.position(),
    datas: [{
        key: "horizon",
        label: i18n.label.horizon(),
        layout: layout_6_18,
        type: "radioGroup",
        width: "60%",
        options: [{
            value: "1",
            name: i18n.label.left(),
        }, {
            value: "2",
            name: i18n.label.center(),
        }, {
            value: "3",
            name: i18n.label.right(),
        }],
        sub: {
            datas: [{
                key: "h-margin",
                label: i18n.label.margin(),
                layout: layout_10_14,
                type: "inputNumber",
            }]
        }
    }, {
        key: "vertical",
        label: i18n.label.vertical(),
        layout: layout_6_18,
        type: "radioGroup",
        width: "60%",
        options: [{
            value: "1",
            name: i18n.label.top(),
        }, {
            value: "2",
            name: i18n.label.center(),
        }, {
            value: "3",
            name: i18n.label.bottom(),
        }],
        sub: {
            datas: [{
                key: "v-margin",
                label: i18n.label.margin(),
                layout: layout_10_14,
                type: "inputNumber",
            }]
        }
    }]
})

const style = () => ({
    name: i18n.label.css(),
    datas: [bg_color(), {
        key: "rotate",
        label: i18n.label.rotate(),
        layout: layout_6_18,
        type: "slider",
        width: "80%",
        sub: {
            datas: [{
                key: "rotate-num",
                label: "",
                layout: layout_0_24,
                type: "inputNumber",
            }]
        }
    }, {
        key: "transparency",
        label: i18n.label.transparency(),
        layout: layout_6_18,
        type: "slider",
        width: "80%",
        sub: {
            datas: [{
                key: "transparency-num",
                label: "",
                layout: layout_0_24,
                type: "inputNumber",
            }]
        }
    }]
})

const size = () => ({
    key: "size",
    label: i18n.label.size(),
    layout: layout_4_20,
    width: "20%",
    sub: {
        datas: [{
            key: "width",
            label: i18n.label.width(),
            layout: layout_8_16,
            type: "inputNumber",
        }, {
            key: "height",
            label: i18n.label.height(),
            layout: layout_8_16,
            type: "inputNumber",
        }, {
            key: "origin",
            label: i18n.label.orignSize(),
        }]
    }
})

const person_text = () => ([{
        key: "font-family",
        label: i18n.label.font(),
        layout: layout_8_16,
        type: "select",
        width: "100%",
        options: getFontOptions()
    },
    {
        key: "font-size",
        label: i18n.label.size(),
        layout: layout_8_16,
        type: "select",
        width: "100%",
        options: [{
                value: "inherit",
                name: i18n.label.default()
            },
            {
                "value": "12",
                "name": "12",
            },
            {
                "value": "14",
                "name": "14",
            },
            {
                "value": "16",
                "name": "16",
            },
            {
                "value": "18",
                "name": "18",
            }
        ],
    }, {
        key: "font-color",
        label: i18n.label.fontColor(),
        layout: layout_8_16,
        type: "color",
        width: "100%",
    }, {
        key: "btn-color",
        label: i18n.label.sendBlessFontColor(),
        layout: layout_8_16,
        type: "color",
        width: "100%",
    },
    vh_align()
])

class FormFactory {
    constructor(type, callback, otherParams) {
        this.type = type;
        this.callback = callback;
        this.otherParams = otherParams
    }

    attchParamsToData = (datas) => {
        datas.map(data => {
            if (typeof data === "object" && !Array.isArray(data)) {
                return data.datas.map(data => {
                    const cb = this.callback;
                    const op = this.otherParams;

                    if (cb) {
                        data.onChange = val => cb(data.key, val);
                    }
                    if (op) {
                        Object.keys(op).forEach(key => {
                            if (data.key === key) {
                                Object.assign(data, op[key]);
                            }
                        })
                    }
                    if (data.sub) {
                        this.attchParamsToData([data.sub]);
                    }
                    return data;
                })
            }
        });

        return datas
    }

    compose = () => {
        let datas = [];
        const type = this.type;
        //深拷贝
        const cp_style = cloneDeep(style());
        const cp_size = cloneDeep(size());
        const cp_text = cloneDeep(text());
        const cp_person = person_text();
        
        //背景设置
        if (type === "bg") {
            datas = [bg()];
        }

        //图片设置
        if (type === "img") {
            cp_style.datas.shift();
            cp_style.datas.unshift(size());
            datas = [position(), cp_style]
        }

        //头部(标题)设置、祝词设置
        if (type === "head" || type === "congratulation") {
            //剔除原图尺寸
            cp_size.sub.datas.splice(-1);
            cp_style.datas.unshift(cp_size);
            datas = [text(), position(), cp_style];
        }

        //人员列表设置
        if (type === "person") {
            cp_text.datas.pop();
            cp_text.datas = cp_person;
            datas = [cp_text, position(), style()];
        }
        //日期设置
        if (type === "date") {
            cp_text.datas.pop();
            cp_person.splice(3, 4);
            cp_text.datas = cp_person;
            datas = [cp_text, position(), style()];
        }

        return this.attchParamsToData(datas);

    }

    insert = (datas) => {
        Object.keys(datas).map(key => {
            const target = person_text.find(item => item.key === key);
            if (target) {
                target.options = datas[key];
            }
        });

        return this;
    }
}

export {
    FormFactory
}