import { addContentPath } from '../../../util/index.js';
const cardWidth = 500;
const cardHeight = 475;

const formParamsTransToStyle = (key, formParams) => {
    const { width = 28, height = 20 } = formParams;

    const value = formParams[key];

    let hmargin = parseFloat(formParams["h-margin"]),
        vmargin = parseFloat(formParams["v-margin"]);

    const paramsToStyle = {
        horizon: {
            "1": {
                left: hmargin
            },
            "2": {
                left: (cardWidth - width) / 2 + hmargin
            },
            "3": {
                right: hmargin
            }
        },
        vertical: {
            "1": {
                top: vmargin
            },
            "2": {
                top: (cardHeight - height) / 2 + vmargin
            },
            "3": {
                bottom: vmargin
            }
        },
        "h-align": {
            textAlign: (value == "1") ? "left" : (value == "2") ? "center" : "right"
        },
        "v-align": {
            verticalAlign: (value == "1") ? "top" : (value == "2") ? "middle" : "bottom"
        },
        fill: {
            backgroundRepeat: (value == "4") ? "repeat" : "no-repeat",
            backgroundSize: ["cover", "contain", "100% 100%", "", ""][parseInt(value) - 1],
            backgroundPosition: (value == "5") ? "center" : ""
        },
        transparency: {
            opacity: value / 100
        },
        "txt-color": {
            backgroundColor: value
        },
        "bg-color": {
            backgroundColor: value
        },
        "font-color": {
            color: value
        }
    }

    if (["width", "height", "font-size"].includes(key)) {
        return {
            [key]: `${value}px`
        }
    }

    if (key == "font-family") {
        return {
            [key]: value
        }
    }

    if (key == "rotate") {
        const obj = {};
        ["", "-ms-", "-moz-", "-webkit-", "-o-"].forEach(prefix => {
            Object.assign(obj, {
                [`${prefix}transform`]: `rotate(${value}deg)`
            })
        })
        return obj;
    }

    if (["horizon","vertical"].includes(key)) {
    	return paramsToStyle[key][value]
    }

    return paramsToStyle[key];
};

const getImgUrl = (id, defaultImg) => {
    return addContentPath((id == "0") ? defaultImg : `/weaver/weaver.file.FileDownload?fileid=${id}`);
}


export {
    getImgUrl,
    formParamsTransToStyle,
}