import { __awaiter } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
import { Box, FormControl, FormLabel, Image, Radio, RadioGroup, Select, Stack, Text, VStack, } from "@chakra-ui/react";
import { getNavigationLayouts } from "@qorebase/app-runtime/src/NavigationLayout";
import { getThemes } from "@qorebase/app-runtime/src/registeredThemes";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import React from "react";
import { CompactPicker } from "react-color";
export default function ThemePicker() {
    const runtimeActions = RuntimeContext.useActions();
    const appTheme = RuntimeContext.useSelectState((state) => state.theme);
    const themes = React.useMemo(() => getThemes(), []);
    const navigationLayouts = React.useMemo(() => getNavigationLayouts(), []);
    const [fonts, setFonts] = React.useState([]);
    React.useEffect(() => {
        const getFonts = () => __awaiter(this, void 0, void 0, function* () {
            const res = yield fetch("https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyAxgwU-0TG1Hu0UptdYpgzxIUis2tNiUys").then((res) => res.json());
            setFonts(res.items);
        });
        getFonts();
    }, []);
    return (_jsx(_Fragment, { children: _jsxs(VStack, Object.assign({ gap: 4 }, { children: [_jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Brand color" }), _jsx(CompactPicker, { color: appTheme.options.primaryColor, onChange: (changed) => {
                                runtimeActions.setTheme(Object.assign(Object.assign({}, appTheme), { options: { primaryColor: changed.hex } }));
                            } })] }), _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Select theme" }), _jsx(RadioGroup, Object.assign({ value: appTheme.id, onChange: (e) => {
                                runtimeActions.setTheme(Object.assign(Object.assign({}, appTheme), { id: e }));
                            } }, { children: _jsx(Stack, Object.assign({ direction: "row" }, { children: themes.map((theme) => (_jsxs(Box, Object.assign({ cursor: "pointer", onClick: () => {
                                        runtimeActions.setTheme(Object.assign(Object.assign({}, appTheme), { id: theme.id }));
                                    }, bg: "gray.100", p: "2", rounded: "md" }, { children: [_jsx(Image, { src: theme.id === "Dark"
                                                ? "/assets/theme/darkTheme.svg"
                                                : "/assets/theme/lightTheme.svg", alt: "theme" }, theme.id), _jsx(Radio, Object.assign({ mt: 2, ml: 0, value: theme.id, cursor: "pointer" }, { children: _jsx(Text, Object.assign({ cursor: "pointer", fontWeight: "normal" }, { children: theme.id })) }), theme.id)] }), theme.id))) })) }))] }), _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Select header font" }), _jsxs(Select, Object.assign({ placeholder: "Choose font", size: "sm", onChange: (e) => __awaiter(this, void 0, void 0, function* () {
                                const family = e.target.value;
                                const variants = fonts.find((font) => font.family === family).variants || [];
                                const filteredFonts = variants.filter((font) => font === "regular" || font.length === 3);
                                const weightQueries = filteredFonts.map((font) => font === "regular" ? "400" : font);
                                const weightQuery = "wght@".concat(weightQueries.join(";"));
                                const wordQuery = "https://fonts.googleapis.com/css2?family=" +
                                    family.replaceAll(" ", "+") +
                                    ":";
                                const query = wordQuery + weightQuery;
                                runtimeActions.setTheme(Object.assign(Object.assign({}, appTheme), { fonts: Object.assign(Object.assign({}, appTheme.fonts), { heading: [family, `@import url('${query}');`] }) }));
                            }) }, { children: [_jsx("option", Object.assign({ value: appTheme.fonts.heading[0] || "", selected: true, disabled: true, hidden: true }, { children: appTheme.fonts.heading[0] })), fonts.map((item) => {
                                    return (_jsx("option", Object.assign({ value: item.family }, { children: item.family }), item.family));
                                })] }))] }), _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Select body font" }), _jsxs(Select, Object.assign({ placeholder: "Choose font", size: "sm", onChange: (e) => __awaiter(this, void 0, void 0, function* () {
                                const chosenFont = e.target.value.split(",");
                                const filteredFonts = chosenFont.filter((font) => font === "regular" || font.length === 3);
                                const weightQueries = filteredFonts.map((font) => font === "regular" ? "400" : font);
                                const weightQuery = "wght@".concat(weightQueries.join(";"));
                                const wordQuery = "https://fonts.googleapis.com/css2?family=" +
                                    chosenFont[0].replaceAll(" ", "+") +
                                    ":";
                                const query = wordQuery + weightQuery;
                                runtimeActions.setTheme(Object.assign(Object.assign({}, appTheme), { fonts: Object.assign(Object.assign({}, appTheme.fonts), { body: [chosenFont[0], `@import url('${query}');`] }) }));
                            }) }, { children: [_jsx("option", Object.assign({ value: appTheme.fonts.body[0] || "", selected: true, disabled: true, hidden: true }, { children: appTheme.fonts.body[0] || "" })), fonts.map((item) => {
                                    return (_jsx("option", Object.assign({ value: [item.family, ...item.variants] }, { children: item.family }), item.family));
                                })] }))] })] })) }));
}
//# sourceMappingURL=ThemePicker.js.map