"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DatePickerStylesDark = exports.DatePickerStyles = exports.BottomLine = exports.DatePicker = exports.Label = exports.TextLabel = exports.LABEL_LOWER_STYLE = exports.LABEL_UPPER_STYLE = void 0;
const tslib_1 = require("tslib");
const react_native_1 = require("react-native");
const react_native_datepicker_1 = tslib_1.__importDefault(require("react-native-datepicker"));
const native_1 = tslib_1.__importDefault(require("styled-components/native"));
const theme_toolkit_1 = require("@platformbuilders/theme-toolkit");
const enums_1 = require("../../enums");
const Typography_1 = tslib_1.__importDefault(require("../Typography"));
const getStatusStyle = (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 disabled = (0, theme_toolkit_1.getTheme)('brand.primary.light');
const successMain = (0, theme_toolkit_1.getTheme)('success.main');
const dangerMain = (0, theme_toolkit_1.getTheme)('danger.main');
const mediumSpacing = (0, theme_toolkit_1.getTheme)('spacing.md');
const inputMainColor = (props) => getStatusStyle({
    [enums_1.InputStatus.Success]: successMain,
    [enums_1.InputStatus.Danger]: dangerMain,
    [enums_1.InputStatus.Default]: props.dark ? brandPrimary : brandContrast,
    [enums_1.InputStatus.Disabled]: `${disabled}60`,
});
exports.LABEL_UPPER_STYLE = {
    top: 8,
    fontSize: 14,
};
exports.LABEL_LOWER_STYLE = {
    top: 40,
    fontSize: 18,
};
exports.TextLabel = (0, native_1.default)(Typography_1.default) `
  line-height: 19px;
  padding-bottom: ${mediumSpacing}px;
  color: ${(props) => props.dark ? `${brandPrimary(props)}` : `${brandContrast(props)}`};
`;
exports.Label = react_native_1.Animated.createAnimatedComponent(exports.TextLabel);
exports.DatePicker = (0, native_1.default)(react_native_datepicker_1.default) `
  width: 100%;
`;
exports.BottomLine = native_1.default.View `
  height: ${react_native_1.StyleSheet.hairlineWidth}px;
  background-color: ${inputMainColor};
`;
const commonDatePickerStyles = {
    disabled: {
        backgroundColor: 'transparent',
    },
    dateInput: {
        borderWidth: 0,
    },
    dateTouchBody: {
        width: '100%',
    },
};
exports.DatePickerStyles = {
    ...commonDatePickerStyles,
    placeholderText: {
        position: 'absolute',
        left: 0,
        color: '#fff',
        fontSize: exports.LABEL_LOWER_STYLE.fontSize,
    },
    dateText: {
        position: 'absolute',
        left: 0,
        color: '#fff',
        fontSize: exports.LABEL_UPPER_STYLE.fontSize,
        fontWeight: '700',
    },
};
exports.DatePickerStylesDark = {
    ...commonDatePickerStyles,
    placeholderText: {
        position: 'absolute',
        left: 0,
        color: '#000',
        fontSize: exports.LABEL_LOWER_STYLE.fontSize,
    },
    dateText: {
        position: 'absolute',
        left: 0,
        color: '#000',
        fontSize: exports.LABEL_UPPER_STYLE.fontSize,
        fontWeight: '700',
    },
};
//# sourceMappingURL=styles.js.map