//@flow

// hopefully separating out styles like this is more readable -- sink
const styleBase = `
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@700&display=swap');
font-family: 'IBM Plex Mono', monospace;
`;

const styleBg = `
${styleBase}
color: #1d1131;
background-color: #aa8dd8;
font-weight: 600;
font-size: 0.9em;
padding: 0px 5px 1px 5px;
border-radius: 5px;
`;

const styleTxt = `
${styleBase}
color: #E2EECE;
font-weight: 500;
font-size: 0.9em;
`;

type LogFuncs = "log" | "error" | "warn" | "trace" | "group";
type LoggerFunction = (message: string, locs: string[]) => void;

//TODO: make setting to save logs in idb, for debugging and troubleshooting purposes
function getLogger(type: LogFuncs): LoggerFunction {
    return function (message, locs) {
        let rawParts = ["Demoncord", ...locs, message];
        let styleParts = [];
        let content = "";

        for (let i = 0; i < rawParts.length; i++) {
            if (i === rawParts.length - 1) {
                // last item
                content += "%c" + rawParts[i];
                styleParts.push(styleTxt);
            } else {
                content += "%c" + rawParts[i] + "%c ";
                styleParts.push(styleBg, "");
            }
        }

        console[type](content, ...styleParts);
    };
}

const log: LoggerFunction = getLogger("log");
const warn: LoggerFunction = getLogger("warn");
const error: LoggerFunction = getLogger("error");
const trace: LoggerFunction = getLogger("trace");
const group: LoggerFunction = getLogger("group");

export default {
    log,
    warn,
    error,
    trace,
	group
};