"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.mergeStyles = exports.Icon = exports.Spinner = exports.Tooltip = exports.Button = exports.BaseIcon = exports.Text = exports.ModifiedNativeText = exports.HStack = exports.Center = exports.Stack = exports.VStack = exports.Box = exports.Flex = exports.processColor = exports.CheckBox = exports.Modal = void 0;
/* eslint-disable react/jsx-props-no-spreading */
// eslint-disable-next-line import/no-extraneous-dependencies
const native_1 = __importStar(require("styled-components/native"));
const react_native_1 = require("react-native");
const MaterialIcons_1 = __importDefault(require("react-native-vector-icons/MaterialIcons"));
const MaterialCommunityIcons_1 = __importDefault(require("react-native-vector-icons/MaterialCommunityIcons"));
const react_1 = __importDefault(require("react"));
const lodash_pickby_1 = __importDefault(require("lodash.pickby"));
const env_1 = require("../env");
const icons_1 = __importDefault(require("./foundations/icons"));
var react_native_modal_1 = require("react-native-modal");
Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(react_native_modal_1).default; } });
var react_native_check_box_1 = require("react-native-check-box");
Object.defineProperty(exports, "CheckBox", { enumerable: true, get: function () { return __importDefault(react_native_check_box_1).default; } });
const processFontSize = (size, theme) => {
    if (size === 'xs')
        return '12px';
    if (size === 'sm')
        return '14px';
    if (size === 'md')
        return '16px';
    if (size === 'lg')
        return '18px';
    if (size === 'xl')
        return '20px';
    return `${size}px`;
};
const generalParser = (value) => {
    if (Number.isInteger(Number(value)))
        return `${value}px`;
    if (Number.isFinite(Number(value)))
        return `${value}px`;
    return value;
};
const processColor = (color, theme) => {
    if (color.split('.').length === 2 && !color.startsWith('rgb')) {
        if (theme === null || theme === void 0 ? void 0 : theme.colors) {
            const [type, weight] = color.split('.');
            return theme.colors[type][weight];
        }
        return '#000';
    }
    return color;
};
exports.processColor = processColor;
const isBrowser = true;
function omitProps(Component, propsToOmit) {
    function isAllowedProp(_, prop) {
        return !propsToOmit.includes(prop);
    }
    function WithoutOmittedProps(_a) {
        var { children } = _a, rest = __rest(_a, ["children"]);
        const withOmittedProps = lodash_pickby_1.default(rest, isAllowedProp);
        return react_1.default.createElement(Component, Object.assign({}, withOmittedProps), children);
    }
    WithoutOmittedProps.displayName = `WithoutOmittedProps(${Component.displayName || Component.name || Component})`;
    return WithoutOmittedProps;
}
const themeProps = [
    'position',
    'left',
    'right',
    'top',
    'bottom',
    'border',
    'bg',
    'background',
    'backgroundColor',
    'width',
    'height',
    'justify',
    'justifyContent',
    'align',
    'alignItems',
    'alignSelf',
    'padding',
    'p',
    'px',
    'py',
    'pb',
    'pr',
    'pt',
    'pl',
    'mx',
    'my',
    'mr',
    'ml',
    'mt',
    'mb',
    'm',
    'margin',
    'marginTop',
    'marginBottom',
    'fontSize',
    'overflow',
    'borderRadius',
    'direction',
];
const BaseDiv = native_1.default(omitProps(react_native_1.View, themeProps)) `
    ${(p) => p.position &&
    native_1.css `
            position: ${p.position};
        `};
    ${(p) => p.left &&
    native_1.css `
            left: ${generalParser(p.left)};
        `};
    ${(p) => p.direction &&
    native_1.css `
            flex-direction: ${p.direction};
        `};
    ${(p) => p.right &&
    native_1.css `
            right: ${generalParser(p.right)};
        `};
    ${(p) => p.top &&
    native_1.css `
            top: ${generalParser(p.top)};
        `};
    ${(p) => p.bottom &&
    native_1.css `
            bottom: ${generalParser(p.bottom)};
        `};
    ${(p) => p.border &&
    native_1.css `
            border: ${p.border};
        `};
    ${(p) => p.borderColor &&
    native_1.css `
            border-color: ${exports.processColor(p.borderColor, p.theme)};
        `};
    ${(p) => p.borderWidth &&
    native_1.css `
            border-width: ${generalParser(p.borderWidth)};
        `};
    ${(p) => p.my &&
    native_1.css `
            margin-top: ${generalParser(p.my)};
            margin-bottom: ${generalParser(p.my)};
        `};
    ${(p) => (p.bg || p.background || p.backgroundColor) &&
    native_1.css `
            background-color: ${exports.processColor(p.bg || p.background || p.backgroundColor, p.theme)};
        `};
    ${(p) => p.width &&
    native_1.css `
            width: ${generalParser(p.width)};
        `};
    ${(p) => p.height &&
    native_1.css `
            height: ${generalParser(p.height)};
        `};
    ${(p) => (p.justify || p.justifyContent) &&
    native_1.css `
            justify-content: ${p.justify || p.justifyContent};
        `};
    ${(p) => (p.alignItems || p.align) &&
    native_1.css `
            align-items: ${p.alignItems || p.align};
        `};
    ${(p) => p.alignSelf &&
    native_1.css `
            align-self: ${p.alignSelf};
        `};
    ${(p) => (p.padding || p.p) &&
    native_1.css `
            padding: ${generalParser(p.padding || p.p)};
        `};
    ${(p) => p.px &&
    native_1.css `
            padding-left: ${generalParser(p.px)};
            padding-right: ${generalParser(p.px)};
        `};
    ${(p) => p.py &&
    native_1.css `
            padding-top: ${generalParser(p.py)};
            padding-bottom: ${generalParser(p.py)};
        `};
    ${(p) => p.mx &&
    native_1.css `
            margin-left: ${generalParser(p.mx)};
            margin-right: ${generalParser(p.mx)};
        `};
    ${(p) => p.margin &&
    native_1.css `
            margin: ${generalParser(p.margin)};
        `};
    ${(p) => p.mr &&
    native_1.css `
            margin-right: ${generalParser(p.mr)};
        `};
    ${(p) => p.ml &&
    native_1.css `
            margin-left: ${generalParser(p.ml)};
        `};
    ${(p) => p.pr &&
    native_1.css `
            padding-right: ${generalParser(p.pr)};
        `};
    ${(p) => p.pl &&
    native_1.css `
            padding-left: ${generalParser(p.pl)};
        `};
    ${(p) => p.pt &&
    native_1.css `
            padding-top: ${generalParser(p.pt)};
        `};
    ${(p) => p.pb &&
    native_1.css `
            padding-bottom: ${generalParser(p.pb)};
        `};
    ${(p) => (p.mt || p.marginTop) &&
    native_1.css `
            margin-top: ${generalParser(p.mt || p.marginTop)};
        `};
    ${(p) => (p.mb || p.marginBottom) &&
    native_1.css `
            margin-bottom: ${generalParser(p.mb || p.marginBottom)};
        `};
    ${(p) => p.fontSize &&
    native_1.css `
            font-size: ${processFontSize(p.fontSize)};
        `};
    ${(p) => p.borderRadius &&
    native_1.css `
            border-radius: ${generalParser(p.borderRadius)};
        `};

    ${(p) => p.overflow &&
    native_1.css `
            overflow: ${p.overflow};
        `};
    ${(p) => p.opacity &&
    native_1.css `
            opacity: ${p.opacity};
        `};
    ${(p) => p.zIndex &&
    native_1.css `
            z-index: ${p.zIndex};
        `};
`;
exports.Flex = native_1.default(BaseDiv) `
    ${isBrowser
    ? native_1.css `
              display: flex;
          `
    : native_1.css ``}
    ${(p) => p.direction &&
    native_1.css `
            flex-direction: ${p.direction};
        `};
    ${(p) => p.flexWrap &&
    native_1.css `
            flex-wrap: ${p.flexWrap};
        `};
`;
exports.Box = BaseDiv;
exports.VStack = native_1.default(BaseDiv) `
    ${isBrowser
    ? native_1.css `
              display: flex;
          `
    : native_1.css ``};
    flex-direction: column;
`;
exports.Stack = native_1.default(BaseDiv) `
    ${isBrowser
    ? native_1.css `
              display: flex;
          `
    : native_1.css ``};
    flex-direction: row;
`;
exports.Center = native_1.default(BaseDiv) `
    ${isBrowser
    ? native_1.css `
              display: flex;
          `
    : native_1.css ``};
    justify-content: center;
    alignself: stretch;
    textalign: center;
`;
exports.HStack = exports.Stack;
// https://github.com/facebook/react-native/issues/25258
const ModifiedNativeText = (_a) => {
    var { children } = _a, props = __rest(_a, ["children"]);
    return (react_1.default.createElement(react_native_1.Text, Object.assign({ textBreakStrategy: "simple" }, props),
        ' ',
        children));
};
exports.ModifiedNativeText = ModifiedNativeText;
exports.Text = native_1.default(omitProps(exports.ModifiedNativeText, themeProps)) `
    ${(p) => react_native_1.Platform.OS === 'android' &&
    native_1.css `
            font-family: Roboto;
        `};
    ${(p) => native_1.css `
        color: ${exports.processColor(p.color || 'textPrimary.200', p.theme)};
    `};
    ${(p) => p.fontSize &&
    native_1.css `
            font-size: ${processFontSize(p.fontSize)};
        `};
    ${(p) => p.textAlign &&
    native_1.css `
            text-align: ${p.textAlign};
        `};
    ${(p) => (p.bg || p.background || p.backgroundColor) &&
    native_1.css `
            background-color: ${exports.processColor(p.bg || p.background || p.backgroundColor, p.theme)};
        `};
    ${(p) => p.py &&
    native_1.css `
            padding-top: ${generalParser(p.py)};
            padding-bottom: ${generalParser(p.py)};
        `};
    ${(p) => p.px &&
    native_1.css `
            padding-left: ${generalParser(p.px)};
            padding-right: ${generalParser(p.px)};
        `};
    ${(p) => p.borderRadius &&
    native_1.css `
            border-radius: ${p.borderRadius};
        `};
    ${(p) => p.fontWeight &&
    native_1.css `
            font-weight: ${p.fontWeight};
        `};
    ${(p) => p.mr &&
    native_1.css `
            margin-right: ${generalParser(p.mr)};
        `};
    ${(p) => p.ml &&
    native_1.css `
            margin-left: ${generalParser(p.ml)};
        `};
    ${(p) => p.pr &&
    native_1.css `
            padding-right: ${generalParser(p.pr)};
        `};
    ${(p) => p.pl &&
    native_1.css `
            padding-left: ${generalParser(p.pl)};
        `};
    ${(p) => p.mr &&
    native_1.css `
            margin-right: ${generalParser(p.mr)};
        `};
    ${(p) => (p.mt || p.marginTop) &&
    native_1.css `
            margin-top: ${generalParser(p.mt || p.marginTop)};
        `};
    ${(p) => (p.mb || p.marginBottom) &&
    native_1.css `
            margin-bottom: ${generalParser(p.mb || p.marginBottom)};
        `};
`;
const BaseButton = ({ onClick, disabled, children }) => (react_1.default.createElement(react_native_1.TouchableOpacity, { onPress: onClick, style: { zIndex: 10 }, disabled: disabled }, children));
const BaseIcon = (_a) => {
    var { name } = _a, props = __rest(_a, ["name"]);
    if (icons_1.default[name] === 'material-community') {
        return react_1.default.createElement(MaterialCommunityIcons_1.default, Object.assign({ name: name }, props));
    }
    if (icons_1.default[name] === 'material') {
        return react_1.default.createElement(MaterialIcons_1.default, Object.assign({ name: name }, props));
    }
    if (env_1.DYTE_DEV_MODE) {
        throw new Error(`Add Icon of type "material" with name ${name} in icon ts file`);
    }
    else {
        return react_1.default.createElement(MaterialIcons_1.default, Object.assign({ name: name }, props));
    }
};
exports.BaseIcon = BaseIcon;
// TODO: What is > p.variant === 'controls' && css` && p.variant !== 'primaryDefault' && css`
exports.Button = native_1.default(omitProps(BaseButton, themeProps)) `
    ${(p) => p.variant === 'controls' &&
    native_1.css `
            background-color: ${exports.processColor('secondary.800', p.theme)};
            color: ${exports.processColor('textPrimary.400', p.theme)};
            border-radius: 0;
        `};
    ${(p) => p.variant !== 'primaryDefault' &&
    native_1.css `
            background-color: ${exports.processColor('primary.500', p.theme)};
            color: ${exports.processColor('textPrimary.100', p.theme)};
            border-radius: 0;
            border-width: 1px;
            border-color: ${exports.processColor('primary.500', p.theme)};
        `};
    ${(p) => p.position &&
    native_1.css `
            position: ${p.position};
        `};
    ${(p) => p.left &&
    native_1.css `
            left: ${generalParser(p.left)};
        `};
    ${(p) => p.right &&
    native_1.css `
            right: ${generalParser(p.right)};
        `};
    ${(p) => p.top &&
    native_1.css `
            top: ${generalParser(p.top)};
        `};
    ${(p) => p.bottom &&
    native_1.css `
            bottom: ${generalParser(p.bottom)};
        `};
    ${(p) => (p.bg || p.background || p.backgroundColor) &&
    native_1.css `
            background-color: ${exports.processColor(p.bg || p.background || p.backgroundColor, p.theme)};
        `};
    ${(p) => p.width &&
    native_1.css `
            width: ${generalParser(p.width)};
        `};
    ${(p) => p.height &&
    native_1.css `
            height: ${generalParser(p.height)};
        `};
    ${(p) => (p.justify || p.justifyContent) &&
    native_1.css `
            justify-content: ${p.justify || p.justifyContent};
        `};
    ${(p) => (p.alignItems || p.align) &&
    native_1.css `
            align-items: ${p.alignItems || p.align};
        `};
    ${(p) => (p.padding || p.p) &&
    native_1.css `
            padding: ${generalParser(p.padding || p.p)};
        `};
    ${(p) => p.px &&
    native_1.css `
            padding-left: ${generalParser(p.px)};
            padding-right: ${generalParser(p.px)};
        `};
    ${(p) => p.py &&
    native_1.css `
            padding-top: ${generalParser(p.py)};
            padding-bottom: ${generalParser(p.py)};
        `};
    ${(p) => p.pr &&
    native_1.css `
            padding-right: ${generalParser(p.pr)};
        `};
    ${(p) => p.ml &&
    native_1.css `
            padding-left: ${generalParser(p.pl)};
        `};
    ${(p) => p.margin &&
    native_1.css `
            margin: ${generalParser(p.margin)};
        `};
    ${(p) => p.mr &&
    native_1.css `
            margin-right: ${generalParser(p.mr)};
        `};
    ${(p) => p.ml &&
    native_1.css `
            margin-left: ${generalParser(p.ml)};
        `};
    ${(p) => (p.mt || p.marginTop) &&
    native_1.css `
            margin-top: ${generalParser(p.mt || p.marginTop)};
        `};
    ${(p) => (p.mb || p.marginBottom) &&
    native_1.css `
            margin-bottom: ${generalParser(p.mb || p.marginBottom)};
        `};
    ${(p) => p.fontSize &&
    native_1.css `
            font-size: ${processFontSize(p.fontSize)};
        `};
`;
const Tooltip = (props) => props.children;
exports.Tooltip = Tooltip;
/* export const MaterialIcon = styled(Icon)`
    ${(p) => p.color || p.fill && css`
        color: ${processColor(p.color || p.fill, p.theme)};
    `};
`; */
exports.Spinner = react_native_1.ActivityIndicator;
// TODO: Create common for all iconds
exports.Icon = native_1.default(exports.BaseIcon) `
    ${(props) => (props.color || props.fill) &&
    native_1.css `
            color: ${exports.processColor(props.color || props.fill, props.theme)};
        `};
    ${(props) => native_1.css `
        font-size: ${processFontSize(props.boxSize || '18')};
    `};
    ${(p) => (p.padding || p.p) &&
    native_1.css `
            padding: ${generalParser(p.padding || p.p)};
        `};
    ${(p) => (p.bg || p.background || p.backgroundColor) &&
    native_1.css `
            background-color: ${exports.processColor(p.bg || p.background || p.backgroundColor, p.theme)};
        `};
    ${(p) => p.borderRadius &&
    native_1.css `
            border-radius: ${p.borderRadius};
        `};
    ${(p) => p.ml &&
    native_1.css `
            margin-left: ${generalParser(p.ml)};
        `};
    ${(p) => p.mx &&
    native_1.css `
            margin-left: ${generalParser(p.mx)};
            margin-right: ${generalParser(p.mx)};
        `};
`;
const mergeStyles = (...x) => Object.assign({}, ...x);
exports.mergeStyles = mergeStyles;
//# sourceMappingURL=components.js.map