/* eslint-disable react/jsx-props-no-spreading */
// eslint-disable-next-line import/no-extraneous-dependencies
import styled, { css } from 'styled-components/native';
import { ActivityIndicator, View, Text as NativeText, TouchableOpacity, Platform, } from 'react-native';
import MIcon from 'react-native-vector-icons/MaterialIcons';
import MaterialIconCommunity from 'react-native-vector-icons/MaterialCommunityIcons';
import React from 'react';
import pickBy from 'lodash/pickBy';
import { SDK_BUILD } from '../env';
import icons from '../themes/foundations/icons';
export { default as Modal } from 'react-native-modal';
export { default as CheckBox } from 'react-native-check-box';
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;
};
export const processColor = (color, theme) => {
    if (color.split('.').length === 2 && !color.startsWith('rgb')) {
        if (theme?.colors) {
            const [type, weight] = color.split('.');
            return theme.colors[type][weight];
        }
        return '#000';
    }
    return color;
};
const isBrowser = true;
function omitProps(Component, propsToOmit) {
    function isAllowedProp(_, prop) {
        return !propsToOmit.includes(prop);
    }
    function WithoutOmittedProps({ children, ...rest }) {
        const withOmittedProps = pickBy(rest, isAllowedProp);
        return <Component {...withOmittedProps}>{children}</Component>;
    }
    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 = styled(omitProps(View, themeProps)) `
	${(p) => p.position && css `
		position: ${p.position};
	`};
	${(p) => p.left && css `
		left: ${generalParser(p.left)};
	`};
	${(p) => p.direction && css `
	flex-direction: ${p.direction};
	`};
	${(p) => p.right && css `
		right: ${generalParser(p.right)};
	`};
	${(p) => p.top && css `
		top: ${generalParser(p.top)};
	`};
	${(p) => p.bottom && css `
		bottom: ${generalParser(p.bottom)};
    `};
    ${(p) => p.border && css `
		border: ${p.border};
	`};
	${(p) => p.my && css `
		margin-top: ${generalParser(p.my)};
		margin-bottom: ${generalParser(p.my)};
    `};
	${(p) => (p.bg || p.background || p.backgroundColor) && css `
		background-color: ${processColor(p.bg || p.background || p.backgroundColor, p.theme)};
	`};
	${(p) => p.width && css `
		width: ${generalParser(p.width)};
	`};
	${(p) => p.height && css `
		height: ${generalParser(p.height)};
	`};
	${(p) => (p.justify || p.justifyContent) && css `
		justify-content: ${(p.justify || p.justifyContent)};
	`};
	${(p) => (p.alignItems || p.align) && css `
		align-items: ${(p.alignItems || p.align)};
    `};
    ${(p) => (p.alignSelf) && css `
		align-self: ${p.alignSelf};
	`};
	${(p) => (p.padding || p.p) && css `
		padding: ${generalParser(p.padding || p.p)};
	`};
	${(p) => p.px && css `
		padding-left: ${generalParser(p.px)};
		padding-right: ${generalParser(p.px)};
	`};
	${(p) => p.py && css `
		padding-top: ${generalParser(p.py)};
		padding-bottom: ${generalParser(p.py)};
	`};
	${(p) => p.mx && css `
	margin-left: ${generalParser(p.mx)};
	margin-right: ${generalParser(p.mx)};
`};
	${(p) => p.margin && css `
		margin: ${generalParser(p.margin)};
	`};
	${(p) => p.mr && css `
		margin-right: ${generalParser(p.mr)};
	`};
	${(p) => p.ml && css `
		margin-left: ${generalParser(p.ml)};
    `};
    ${(p) => p.pt && css `
		padding-top: ${generalParser(p.pt)};
	`};
	${(p) => p.pb && css `
		padding-bottom: ${generalParser(p.pb)};
	`};
	${(p) => (p.mt || p.marginTop) && css `
		margin-top: ${generalParser(p.mt || p.marginTop)};
	`};
	${(p) => (p.mb || p.marginBottom) && css `
		margin-bottom: ${generalParser(p.mb || p.marginBottom)};
	`};
	${(p) => p.fontSize && css `
		font-size: ${processFontSize(p.fontSize)};
	`};
	${(p) => p.borderRadius && css `
		border-radius: ${generalParser(p.borderRadius)};
    `};

    ${(p) => p.overflow && css `
		overflow: ${p.overflow};
  	`};
	${(p) => p.opacity && css `
		opacity: ${p.opacity}
	`};
	${(p) => p.zIndex && css `
		z-index: ${p.zIndex};
	`};
`;
export const Flex = styled(BaseDiv) `
    ${isBrowser ? css `display:flex;` : css ``}
    ${(p) => p.direction && css `
        flex-direction: ${p.direction};
	`};
	${(p) => p.flexWrap && css `
		flex-wrap: ${p.flexWrap};
	`};
`;
export const Box = BaseDiv;
export const VStack = styled(BaseDiv) `
 	${isBrowser ? css `display:flex;` : css ``};
    flex-direction: column;
`;
export const Stack = styled(BaseDiv) `
	${isBrowser ? css `display:flex;` : css ``};
    flex-direction: row;
`;
export const Center = styled(BaseDiv) `
	${isBrowser ? css `display:flex;` : css ``};
	justify-content: center;
	alignSelf: stretch;
	textAlign: center;
`;
export const HStack = Stack;
// https://github.com/facebook/react-native/issues/25258
export const ModifiedNativeText = ({ children, ...props }) => (<NativeText textBreakStrategy="simple" {...props}>
		{' '}
		{children}
	</NativeText>);
export const Text = styled(omitProps(ModifiedNativeText, themeProps)) `
	${(p) => Platform.OS === 'android' && css `
		font-family: Roboto;
	`};
    ${(p) => css `
        color: ${processColor(p.color || 'textPrimary.200', p.theme)};
	`};
	${(p) => p.fontSize && css `
		font-size: ${processFontSize(p.fontSize)};
    `};
    ${(p) => p.textAlign && css `
		text-Align: ${p.textAlign};
	`};
	${(p) => (p.bg || p.background || p.backgroundColor) && css `
	background-color: ${processColor(p.bg || p.background || p.backgroundColor, p.theme)};
	`};
	${(p) => (p.py) && css `
	padding-top: ${generalParser(p.py)};
	padding-bottom: ${generalParser(p.py)};
	`};
	${(p) => (p.px) && css `
	padding-left: ${generalParser(p.px)};
	padding-right: ${generalParser(p.px)};
	`};
	${(p) => p.borderRadius && css `
	border-radius: ${p.borderRadius};
  `};
	${(p) => p.fontWeight && css `
        font-weight: ${p.fontWeight};
	`};
    ${(p) => p.mr && css `
        margin-right: ${generalParser(p.mr)};
    `};
    ${(p) => p.ml && css `
        margin-left: ${generalParser(p.ml)};
    `};
	${(p) => p.mr && css `
	margin-right: ${generalParser(p.mr)};
	`};
    ${(p) => (p.mt || p.marginTop) && css `
        margin-top: ${generalParser(p.mt || p.marginTop)};
    `};
    ${(p) => (p.mb || p.marginBottom) && css `
        margin-bottom: ${generalParser(p.mb || p.marginBottom)};
    `};
`;
const BaseButton = ({ onClick, disabled, children }) => (<TouchableOpacity onPress={onClick} style={{ zIndex: 10 }} disabled={disabled}>
		{children}
	</TouchableOpacity>);
export const BaseIcon = ({ name, ...props }) => {
    if (icons[name] === 'material-community') {
        return (<MaterialIconCommunity name={name} {...props}/>);
    }
    if (icons[name] === 'material') {
        return (<MIcon name={name} {...props}/>);
    }
    if (!SDK_BUILD) {
        throw new Error(`Add Icon of type "material" woth name ${name} in icon ts file`);
    }
    else {
        return (<MIcon name={name} {...props}/>);
    }
};
// TODO: What is > p.variant === 'controls' && css` && p.variant !== 'primaryDefault' && css`
export const Button = styled(omitProps(BaseButton, themeProps)) `
	${(p) => p.variant === 'controls' && css `
		background-color: ${processColor('secondary.800', p.theme)};
		color: ${processColor('textPrimary.400', p.theme)};
		border-radius: 0;
	`};
	${(p) => p.variant !== 'primaryDefault' && css `
		background-color: ${processColor('primary.500', p.theme)};
		color: ${processColor('textPrimary.100', p.theme)};
		border-radius: 0;
		border-width: 1px;
		border-color: ${processColor('primary.500', p.theme)};
	`};
	${(p) => p.position && css `
	position: ${p.position};
	`};
	${(p) => p.left && css `
	left: ${generalParser(p.left)};
	`};
	${(p) => p.right && css `
	right: ${generalParser(p.right)};
	`};
	${(p) => p.top && css `
	top: ${generalParser(p.top)};
	`};
	${(p) => p.bottom && css `
	bottom: ${generalParser(p.bottom)};
	`};
	${(p) => (p.bg || p.background || p.backgroundColor) && css `
	background-color: ${processColor(p.bg || p.background || p.backgroundColor, p.theme)};
	`};
	${(p) => p.width && css `
	width: ${generalParser(p.width)};
	`};
	${(p) => p.height && css `
	height: ${generalParser(p.height)};
	`};
	${(p) => (p.justify || p.justifyContent) && css `
	justify-content: ${(p.justify || p.justifyContent)};
	`};
	${(p) => (p.alignItems || p.align) && css `
	align-items: ${(p.alignItems || p.align)};
	`};
	${(p) => (p.padding || p.p) && css `
	padding: ${generalParser(p.padding || p.p)};
	`};
	${(p) => p.px && css `
	padding-left: ${generalParser(p.px)};
	padding-right: ${generalParser(p.px)};
	`};
	${(p) => p.py && css `
	padding-top: ${generalParser(p.py)};
	padding-bottom: ${generalParser(p.py)};
    `};
    ${(p) => p.pr && css `
	padding-right: ${generalParser(p.pr)};
	`};
	${(p) => p.ml && css `
	padding-left: ${generalParser(p.pl)};
	`};
	${(p) => p.margin && css `
	margin: ${generalParser(p.margin)};
	`};
	${(p) => p.mr && css `
	margin-right: ${generalParser(p.mr)};
	`};
	${(p) => p.ml && css `
	margin-left: ${generalParser(p.ml)};
	`};
	${(p) => (p.mt || p.marginTop) && css `
	margin-top: ${generalParser(p.mt || p.marginTop)};
	`};
	${(p) => (p.mb || p.marginBottom) && css `
	margin-bottom: ${generalParser(p.mb || p.marginBottom)};
	`};
	${(p) => p.fontSize && css `
	font-size: ${processFontSize(p.fontSize)};
    `};

`;
export const Tooltip = (props) => props.children;
/* export const MaterialIcon = styled(Icon)`
    ${(p) => p.color || p.fill && css`
        color: ${processColor(p.color || p.fill, p.theme)};
    `};
`; */
export const Spinner = ActivityIndicator;
// TODO: Create common for all iconds
export const Icon = styled(BaseIcon) `
	${(props) => (props.color || props.fill) && css `
	color: ${processColor(props.color || props.fill, props.theme)};
	`};
	${(props) => css `
	font-size: ${processFontSize(props.boxSize || '18')};
	`};
	${(p) => (p.padding || p.p) && css `
	padding: ${generalParser(p.padding || p.p)};
	`};
	${(p) => (p.bg || p.background || p.backgroundColor) && css `
	background-color: ${processColor(p.bg || p.background || p.backgroundColor, p.theme)};
	`};
	${(p) => p.borderRadius && css `
	border-radius: ${p.borderRadius};
	`};
	${(p) => p.ml && css `
	margin-left: ${generalParser(p.ml)};
	`};
	${(p) => p.mx && css `
	margin-left: ${generalParser(p.mx)};
	margin-right: ${generalParser(p.mx)};
	`};
`;
export const mergeStyles = (...x) => Object.assign({}, ...x);
//# sourceMappingURL=components.js.map