import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import iconsList from "@qorebase/app-runtime/src/components/iconsList";
import { Select, ButtonGroup, IconButton, Box, Center, Button, Icon, Portal, SimpleGrid, InputGroup, InputLeftElement, Input, useOutsideClick, Menu, MenuButton, MenuList, useDisclosure, Tabs, Tab, TabList, TabPanels, TabPanel, Spacer, Text, InputRightElement, MenuItem, Grid, GridItem, Popover, PopoverTrigger, Flex, PopoverContent, } from "@chakra-ui/react";
import React from "react";
import { Mention, MentionsInput } from "react-mentions";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import { useVariablesContext } from "@qorebase/app-runtime/src/VariablesContext";
import Scrollbars from "rc-scrollbars";
import { ChevronDown, DotMore, Plus } from "@feedloop/icon";
import { useImageUploadTrigger } from "@qorebase/app-runtime/src/hooks/useImageUploadTrigger";
import { CirclePicker } from "react-color";
import { humanize } from "@qorebase/app-runtime/src/utils/humanizeString";
import { css } from "@emotion/react";
export const colorDict = [
    "#171717",
    "#303030",
    "#494949",
    "#616161",
    "#7A7A7A",
    "#939393",
    "#ACACAC",
    "#C4C4C4",
    "#DDDDDD",
    "#F6F6F6",
    "#00245C",
    "#003585",
    "#0045AD",
    "#0055D6",
    "#0065FF",
    "#2D80FF",
    "#5A9BFF",
    "#87B6FF",
    "#B4D1FF",
    "#E0EDFF",
    "#512214",
    "#751A1D",
    "#982126",
    "#BC292F",
    "#E03138",
    "#E6555B",
    "#EB7A73",
    "#F09EA1",
    "#F6C2C4",
    "#FBE6E7",
    "#574904",
    "#7E6A06",
    "#A58B08",
    "#CBAC0A",
    "#F2CC0C",
    "#F4D537",
    "#F7D362",
    "#F9E78C",
    "#FBF0B7",
    "#FDF9E2",
    "#12370C",
    "#1A5012",
    "#226817",
    "#2A811D",
    "#329922",
    "#56AD49",
    "#7ABD70",
    "#9ECF97",
    "#C2E1BE",
    "#E6F3E5",
    "#361A5C",
    "#4F2585",
    "#6730AD",
    "#7F3CD6",
    "#9747FF",
    "#A967FF",
    "#BC88FF",
    "#CEA8FF",
    "#E0C9FF",
    "#F3E9FF",
    "#562902",
    "#7C3B03",
    "#A24D03",
    "#C85F04",
    "#EE7105",
    "#F18A31",
    "#F4A35D",
    "#F7BC89",
    "#FAD5B5",
    "#FDEEE1",
    "#4D0B40",
    "#6F105D",
    "#91147A",
    "#B31996",
    "#D51EB3",
    "#DC46C0",
    "#E46DCE",
    "#EB95DB",
    "#F3BCE9",
    "#FAE4F6",
];
function parseColorValueFromAppThemeColor(appThemeColor, value, defaultHexAlpha) {
    const color = appThemeColor[value];
    return !color ? value : `${color}${defaultHexAlpha}`;
}
export function appendIfNotStartsWith(prefix, text) {
    return text && !text.startsWith(prefix) ? `${prefix}${text}` : text;
}
export const mentionsInputStyle = {
    borderRadius: "0.375rem",
    borderWidth: "1px",
    width: "100%",
    control: {},
    "&multiLine": {
        control: {},
        highlighter: {
            padding: "5px 14px",
        },
        input: {
            padding: "5px 14px",
        },
    },
    "&singleLine": {
        highlighter: {},
        input: {},
    },
    suggestions: {
        list: {
            borderRadius: 5,
            borderWidth: 1,
        },
        item: {
            padding: "0px 8px",
            "&focused": {
                background: "#E6F5FC",
            },
        },
    },
};
const StringPropertyEditor = (props) => {
    const [state, setState] = React.useState({ value: props.value });
    const handleBlur = React.useCallback((e) => {
        setState({ value: e.target.value });
    }, []);
    const ref = React.useRef();
    const [iconInputSearch, setIconInputSearch] = React.useState("");
    const iconDisclosure = useDisclosure();
    const didMount = React.useRef(false);
    const { variables } = useVariablesContext();
    const triggerImageModal = useImageUploadTrigger();
    const appTheme = RuntimeContext.useSelectState((s) => s.theme.options);
    useOutsideClick({
        ref: ref,
        handler: () => setState({ value: state.value }),
    });
    React.useEffect(() => {
        if (!didMount.current) {
            didMount.current = true;
            return;
        }
        const timeout = setTimeout(() => {
            props.onChange(state.value);
        }, 200);
        return () => clearTimeout(timeout);
    }, [state.value]);
    const handleBlurProps = React.useCallback(() => {
        var _a;
        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, state.value);
    }, [state.value]);
    React.useEffect(() => setState({ value: props.value }), [props.value]);
    const views = RuntimeContext.useSelectState((state) => state.schema.tables);
    React.useEffect(() => {
        var _a, _b, _c, _d;
        if (props.propDef.options.format === "color" && !props.value.length) {
            props.onChange(parseColorValueFromAppThemeColor(appTheme, ((_b = (_a = props.propDef.options.options) === null || _a === void 0 ? void 0 : _a.defaultColor) === null || _b === void 0 ? void 0 : _b.color) || "", ((_d = (_c = props.propDef.options.options) === null || _c === void 0 ? void 0 : _c.defaultColor) === null || _d === void 0 ? void 0 : _d.hexAlpha) || "") || "#000000");
        }
    }, [props.value, props.onChange, props.propDef.options.format, appTheme]);
    switch (props.propDef.options.format) {
        case "icon":
            return (_jsxs(Menu, Object.assign({ size: "sm", isOpen: iconDisclosure.isOpen, onClose: iconDisclosure.onClose, isLazy: true }, { children: [_jsx(MenuButton, Object.assign({ as: Button, leftIcon: _jsx(Icon, { fontSize: "sm", as: iconsList[state.value] }), variant: "outline", fontWeight: "normal", textAlign: "left", w: "full", onClick: iconDisclosure.onOpen }, { children: _jsx(Text, Object.assign({ noOfLines: 1, fontSize: "sm" }, { children: humanize(state.value === "none" ? "Select icon" : state.value) })) })), _jsx(Portal, { children: _jsx(MenuList, Object.assign({ p: "16px", width: "304px", height: "420px" }, { children: _jsxs(Tabs, Object.assign({ size: "sm" }, { children: [_jsxs(TabList, { children: [_jsx(Tab, Object.assign({ px: 0 }, { children: "All Icon" })), _jsx(Tab, Object.assign({ px: 0, ml: 4 }, { children: "Upload Icon" })), _jsx(Spacer, {}), _jsx(Button, Object.assign({ size: "sm", fontWeight: "normal", variant: "link", color: "black", _focus: { shadow: "none" }, _hover: { textDecoration: "none" }, display: state.value === "none" && "none", onClick: () => {
                                                    setState({ value: "none" });
                                                    iconDisclosure.onClose();
                                                } }, { children: "Remove" }))] }), _jsxs(TabPanels, { children: [_jsxs(TabPanel, Object.assign({ px: 0 }, { children: [_jsxs(InputGroup, { children: [_jsx(InputLeftElement, Object.assign({ pointerEvents: "none" }, { children: _jsx(Icon, { as: iconsList["Search"] }) })), _jsx(Input, { type: "text", _placeholder: { fontSize: "sm" }, placeholder: "Search icon", onChange: (e) => {
                                                                    setIconInputSearch(e.target.value);
                                                                } })] }), _jsx(Box, Object.assign({ py: 4, overflowY: "auto", height: "308px" }, { children: _jsx(Scrollbars, { children: _jsx(SimpleGrid, Object.assign({ columns: 7, spacing: "10px" }, { children: Object.keys(iconsList)
                                                                    .filter((icon) => icon
                                                                    .toLowerCase()
                                                                    .includes(iconInputSearch.trim()))
                                                                    .map((icon) => {
                                                                    return (_jsx(Box, Object.assign({ height: "30px", cursor: "pointer", onClick: () => {
                                                                            setState({ value: icon });
                                                                            iconDisclosure.onClose();
                                                                        } }, { children: _jsx(Center, Object.assign({ borderRadius: "md", _hover: { backgroundColor: "#F6F6F6" }, h: "30px", w: "30px" }, { children: _jsx(Icon, { fontSize: "lg", as: iconsList[icon] }) })) }), icon));
                                                                }) })) }) }))] })), _jsx(TabPanel, Object.assign({ px: 0 }, { children: _jsx(Box, Object.assign({ height: "308px", display: "flex", alignItems: "center", justifyContent: "center" }, { children: _jsx(Text, { children: "Coming Soon" }) })) }))] })] })) })) })] })));
        case "select":
            return (_jsxs(Select, Object.assign({ defaultValue: props.value, onChange: handleBlur, id: props.propName, cursor: "pointer", size: "sm", rounded: "md" }, { children: [_jsx("option", Object.assign({ value: "", css: { display: "none" } }, { children: "Blank" })), props.propDef.options.options.map((opt) => (_jsx("option", Object.assign({ value: opt.value }, { children: opt.label }), opt.value)))] })));
        case "context":
            return (_jsx(Select, Object.assign({ placeholder: "Blank", defaultValue: props.value, onChange: handleBlur, id: props.propName, cursor: "pointer", size: "sm" }, { children: views.map((view) => (_jsx("option", Object.assign({ value: view.name }, { children: view.name }), view.name))) })));
        case "button":
            return (_jsx(ButtonGroup, Object.assign({ variant: "solid", spacing: "2", p: 1, border: "1px", borderColor: "gray.200", rounded: "md", size: "sm" }, { children: props.propDef.options.options.map((opt) => (_jsx(IconButton, { mx: 2, "aria-label": opt.icon, onClick: () => setState({ value: opt.value }), icon: _jsx(Icon, { w: "1rem", h: "1rem", as: iconsList[opt.icon] }), color: state.value === opt.value ? "white" : "#001e4d", colorScheme: state.value === opt.value
                        ? "brand"
                        : `var(--chakra-colors-gray-200)`, rounded: "md" }, opt.value))) })));
        case "qore_select":
            return _jsx("div", {});
        case "color":
            return (_jsx(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)" }, { children: _jsx(GridItem, Object.assign({ colSpan: 12, maxW: "full", display: "flex", alignItems: "center", justifyContent: "flex-end", my: "8px" }, { children: _jsxs(Popover, Object.assign({ placement: "left" }, { children: [_jsx(PopoverTrigger, { children: _jsxs(Flex, Object.assign({ alignItems: "center", justifyContent: "flex-end", bgColor: "transparent" }, { children: [_jsx(Box, { borderRadius: "50%", width: "20px", height: "20px", bgColor: props.value }), _jsx(IconButton, { "aria-label": "color-picker", borderColor: "#000000", size: "sm", variant: "ghost", icon: _jsx(ChevronDown, {}) })] })) }), _jsx(Portal, { children: _jsxs(PopoverContent, Object.assign({ p: 2, gap: 3 }, { children: [_jsx(Box, { children: _jsx(CirclePicker, { width: "100%", colors: colorDict, circleSize: 16, onChange: (e) => props.onChange(e.hex) }) }), _jsxs(Box, { children: [_jsx(Text, { children: "Custom Color" }), _jsxs(InputGroup, { children: [_jsx(InputLeftElement, Object.assign({ pointerEvents: "none" }, { children: "#" })), _jsx(Input, { type: "text", size: "sm", placeholder: "Paste hex code", onChange: (e) => {
                                                                props.onChange(appendIfNotStartsWith("#", e.target.value));
                                                            } })] })] }), _jsx(Box, { children: _jsx(Button, Object.assign({ width: "full", size: "sm", onClick: () => {
                                                    var _a, _b, _c, _d;
                                                    if (props.propDef.options.format !== "color")
                                                        return;
                                                    props.onChange(parseColorValueFromAppThemeColor(appTheme, ((_b = (_a = props.propDef.options.options) === null || _a === void 0 ? void 0 : _a.defaultColor) === null || _b === void 0 ? void 0 : _b.color) || "", ((_d = (_c = props.propDef.options.options) === null || _c === void 0 ? void 0 : _c.defaultColor) === null || _d === void 0 ? void 0 : _d.hexAlpha) || "") || "#000000");
                                                } }, { children: "Reset Color" })) })] })) })] })) })) })));
        case "image":
            return (_jsxs(Menu, Object.assign({ isLazy: true }, { children: [_jsxs(InputGroup, Object.assign({ size: "sm" }, { children: [_jsx(MentionsInput, Object.assign({ id: props.propName, style: mentionsInputStyle, value: state.value, onChange: handleBlur, placeholder: props.propName, onBlur: handleBlurProps }, { children: _jsx(Mention, { trigger: "@", data: variables, displayTransform: (id, display) => `@${display}`, style: {
                                        background: "#75CAEC",
                                        borderRadius: "5px",
                                    } }) })), _jsx(InputRightElement, Object.assign({ as: MenuButton, color: "gray.300", fontSize: "1.2em", w: 10 }, { children: _jsx(Icon, { fontSize: "md", as: DotMore }) }))] })), _jsx(MenuList, { children: _jsx(MenuItem, Object.assign({ onClick: () => triggerImageModal((value) => setState({ value })), icon: _jsx(Plus, {}) }, { children: "Add Image" })) })] })));
        default:
            return (_jsx(MentionsInput, Object.assign({ id: props.propName, style: Object.assign(Object.assign({}, mentionsInputStyle), { background: "#FFFFFF" }), value: state.value, onChange: handleBlur, placeholder: props.placeholder ? props.placeholder : props.propName, onBlur: handleBlurProps, onFocus: props.autoFocus &&
                    ((event) => {
                        event.target.select();
                    }), autoFocus: props.autoFocus ? true : false, css: props.isError === false &&
                    css `
              textarea:focus-visible {
                border-radius: 0.1rem;
                outline: 2px solid var(--chakra-colors-red-400);
              }
              border: 2px solid var(--chakra-colors-red-400);
            ` }, { children: _jsx(Mention, { trigger: "@", data: variables, displayTransform: (id, display) => `@${display}`, style: {
                        background: "#75CAEC",
                        borderRadius: "5px",
                    } }) })));
    }
};
export default StringPropertyEditor;
//# sourceMappingURL=string.js.map