"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Icon = exports.BottomLine = exports.TextInput = exports.Label = exports.TextLabel = exports.InputAreaWrapper = exports.FixedLabel = exports.FixedLabelAboveBorder = exports.InputBorderedColumnWrapper = exports.InputBorderedAreaWrapper = exports.BorderedWrapper = exports.InputWrapper = exports.RootWrapper = exports.FONT_WEIGHT_LOWER = exports.FONT_WEIGHT_UPPER = exports.LABEL_LOWER_STYLE = exports.LABEL_UPPER_STYLE = void 0;
const tslib_1 = require("tslib");
const react_native_1 = require("react-native");
const native_1 = tslib_1.__importDefault(require("styled-components/native"));
const theme_toolkit_1 = require("@platformbuilders/theme-toolkit");
const enums_1 = require("../../enums");
const Icon_1 = tslib_1.__importDefault(require("../Icon"));
const Typography_1 = tslib_1.__importDefault(require("../Typography"));
const hasLeftIcon = (0, theme_toolkit_1.ifStyle)('hasLeftIcon');
const isCentered = (0, theme_toolkit_1.ifStyle)('centered');
const hasLabel = (0, theme_toolkit_1.ifStyle)('label');
const hasError = (0, theme_toolkit_1.ifStyle)('error');
const hasPadding = (0, theme_toolkit_1.ifStyle)('padding');
const hasInputRightPadding = (0, theme_toolkit_1.ifStyle)('inputRightPadding');
const hasInputLeftPadding = (0, theme_toolkit_1.ifStyle)('inputLeftPadding');
const hasBottomLine = (0, theme_toolkit_1.ifStyle)('hasBottomLine');
const isContrast = (0, theme_toolkit_1.ifStyle)('contrast');
const showIconErrored = (0, theme_toolkit_1.ifStyle)('showIconErrored');
const switchStatus = (0, theme_toolkit_1.switchStyle)('status');
const brandContrast = (0, theme_toolkit_1.getTheme)('brand.primary.contrast');
const brandPrimary = (0, theme_toolkit_1.getTheme)('brand.primary.main');
const minimumSpacing = (0, theme_toolkit_1.getTheme)('spacing.xs');
const sizingMD = (0, theme_toolkit_1.getTheme)('sizing.md');
const smallSpacing = (0, theme_toolkit_1.getTheme)('spacing.sm');
const extraLargeSpacing = (0, theme_toolkit_1.getTheme)('spacing.xl');
const success = (0, theme_toolkit_1.getTheme)('success.main');
const textColor = (0, theme_toolkit_1.getTheme)('text.main');
const dangerMain = (0, theme_toolkit_1.getTheme)('danger.main');
const disabled = (0, theme_toolkit_1.getTheme)('brand.primary.main');
const inputColor = (props) => switchStatus({
    [enums_1.InputStatus.Success]: success(props),
    [enums_1.InputStatus.Danger]: dangerMain(props),
    [enums_1.InputStatus.Default]: isContrast(brandContrast(props), textColor(props))(props),
    [enums_1.InputStatus.Disabled]: disabled(props),
});
exports.LABEL_UPPER_STYLE = {
    top: -12,
    fontSize: 12,
    opacity: 0.4,
};
exports.LABEL_LOWER_STYLE = {
    top: 8,
    fontSize: 18,
    opacity: 0.5,
};
exports.FONT_WEIGHT_UPPER = 600;
exports.FONT_WEIGHT_LOWER = 400;
exports.RootWrapper = native_1.default.View ``;
exports.InputWrapper = native_1.default.View `
  justify-content: ${hasLabel('flex-end', 'flex-start')};
  padding-top: ${hasLabel(smallSpacing, 0)}px;
  position: relative;
`;
exports.BorderedWrapper = native_1.default.View `
  ${({ borderedBackgroundColor, borderedColor, borderedHeight, borderedRadius, borderedWidth, error, showBorderErrored, isFloating, ...rest }) => {
    const borderedStyle = `
      justify-content: center;
      border: ${borderedWidth}px solid ${error && showBorderErrored
        ? dangerMain(rest)
        : borderedColor || brandPrimary(rest)};
      background-color: ${borderedBackgroundColor || 'transparent'};
      height: ${borderedHeight}px;
      border-radius: ${borderedRadius}px;
      paddiing-top: ${isFloating ? 0 : smallSpacing(rest)}px;
      padding-bottom ${smallSpacing(rest)}px;
      padding-right: ${isFloating ? sizingMD(rest) : smallSpacing(rest)}px;
      padding-left: ${isFloating ? sizingMD(rest) : smallSpacing(rest)}px;
    `;
    return `
    border: 0;
    ${borderedHeight ? borderedStyle : ''}
  `;
}}
`;
exports.InputBorderedAreaWrapper = native_1.default.View `
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: ${hasBottomLine('100%', 'auto')};
`;
exports.InputBorderedColumnWrapper = native_1.default.View `
  flex-direction: column;
  padding: 0 ${minimumSpacing}px;
  width: ${hasLeftIcon('86%', '92%')};
  margin-left: ${hasLeftIcon(minimumSpacing, 0)}px;
`;
exports.FixedLabelAboveBorder = (0, native_1.default)(Typography_1.default) `
  color: ${textColor};
  position: absolute;
  top: -${extraLargeSpacing}px;
  left: 0;
`;
exports.FixedLabel = (0, native_1.default)(Typography_1.default) `
  color: ${brandPrimary};
  margin-bottom: ${minimumSpacing}px;
`;
exports.InputAreaWrapper = native_1.default.View `
  padding-top: ${hasPadding(({ padding }) => padding, minimumSpacing)}px;
  padding-right: ${hasInputRightPadding(({ inputRightPadding }) => inputRightPadding, hasPadding(({ padding }) => padding, minimumSpacing))}px;
  padding-left: ${hasInputLeftPadding(({ inputLeftPadding }) => inputLeftPadding, hasPadding(({ padding }) => padding, minimumSpacing))}px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
`;
exports.TextLabel = (0, native_1.default)(Typography_1.default) `
  position: absolute;
  color: ${inputColor};
  top: ${exports.LABEL_LOWER_STYLE.top}px;
`;
exports.Label = react_native_1.Animated.createAnimatedComponent(exports.TextLabel);
exports.TextInput = native_1.default.TextInput.attrs((props) => ({
    accessibilityLabel: props.accessibilityLabel || props.accessibility,
    testID: props.testID || props.id,
    textAlign: isCentered('center', 'left')(props),
    placeholderTextColor: props.placeholderTextColor
        ? props.placeholderTextColor
        : '#72727260',
})) `
  padding: 0;
  flex-grow: 1;
  border-width: 0;
  min-height: 24px;
  color: ${inputColor};
  font-size: ${theme_toolkit_1.getFontSize}px;
  width: 100%;
`;
exports.BottomLine = native_1.default.View `
  height: ${react_native_1.StyleSheet.hairlineWidth}px;
  background-color: ${inputColor};
`;
const defaultIconColor = (props) => props.iconColor ||
    isContrast(brandContrast(props), brandPrimary(props))(props);
const erroredIconColor = (props) => dangerMain(props);
exports.Icon = (0, native_1.default)(Icon_1.default).attrs((props) => ({
    size: props?.size || sizingMD(props),
    color: showIconErrored(hasError(erroredIconColor(props), defaultIconColor(props))(props), defaultIconColor(props))(props),
})) ``;
//# sourceMappingURL=styles.js.map