"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const components_1 = require("@bluebase/components");
const react_native_1 = require("react-native");
const core_1 = require("@bluebase/core");
const react_1 = tslib_1.__importDefault(require("react"));
class SettingsPageItemDesktop extends react_1.default.PureComponent {
    constructor() {
        super(...arguments);
        this.Component = (this.props.component && typeof this.props.component === 'string')
            ? core_1.getComponent(this.props.component)
            : this.props.component;
    }
    render() {
        const { description, descriptionStyle, title, titleStyle, } = this.props;
        const ItemComponent = this.Component;
        const styles = this.props.styles;
        const titleNode = !!title
            ? react_1.default.createElement(components_1.Body1, { style: [styles.titleStyles, titleStyle] }, title)
            : null;
        const descNode = !!description
            ? react_1.default.createElement(components_1.Body2, { style: [styles.descriptionStyles, descriptionStyle] }, description)
            : null;
        const componentNode = !!ItemComponent
            ? react_1.default.createElement(components_1.Card, { style: styles.contentStyles },
                react_1.default.createElement(ItemComponent, null))
            : null;
        return (react_1.default.createElement(components_1.View, { style: styles.root },
            react_1.default.createElement(components_1.View, { style: styles.textColumn },
                titleNode,
                descNode),
            componentNode));
    }
}
SettingsPageItemDesktop.defaultProps = {
// isMobile: true,
};
SettingsPageItemDesktop.defaultStyles = (theme) => ({
    contentStyles: {
        // backgroundColor: theme.palette.background.card,
        borderBottomWidth: react_native_1.Platform.OS === 'ios' ? 1 : undefined,
        borderColor: react_native_1.Platform.OS === 'ios' ? theme.palette.divider : undefined,
        borderTopWidth: react_native_1.Platform.OS === 'ios' ? 1 : undefined,
        flex: 1,
    },
    descriptionStyles: {
        color: theme.palette.text.hint,
    },
    root: {
        backgroundColor: theme.palette.background.default,
        flexDirection: 'row',
        padding: theme.spacing.unit * 2,
    },
    textColumn: {
        paddingRight: theme.spacing.unit * 2,
        paddingVertical: theme.spacing.unit * 2,
        width: '40%',
    },
    titleStyles: {
        // color: theme.palette.primary.main,
        paddingBottom: theme.spacing.unit,
    },
});
exports.SettingsPageItemDesktop = SettingsPageItemDesktop;
