/**
 * App Styles
 */

import Colors from './colors';
import Fonts from './fonts';
import Sizes from './sizes';

export default {
    appContainer: {
        backgroundColor: '#000'
    },

    // Default
    container: {
        position: 'relative',
        flex: 1,
        flexDirection: 'column',
        backgroundColor: Colors.background
    },
    containerCentered: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    windowSize: {
        height: Sizes.screen.height,
        width: Sizes.screen.width
    },

    // Aligning items
    leftAligned: {
        alignItems: 'flex-start'
    },
    centerAligned: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    rightAligned: {
        alignItems: 'flex-end'
    },

    // Text Styles
    baseText: {
        fontFamily: Fonts.base.family,
        fontSize: Fonts.base.size
    },
    p: {
        fontFamily: Fonts.p.family,
        fontSize: Fonts.p.size,
        lineHeight: Fonts.p.lineHeight,
        color: Colors.textPrimary,
        marginBottom: 8
    },
    h1: {
        fontFamily: Fonts.h1.family,
        fontSize: Fonts.h1.size,
        lineHeight: Fonts.h1.lineHeight,
        color: Colors.headingPrimary,
        margin: 0,
        marginBottom: 4,
        left: 0,
        right: 0
    },
    h2: {
        fontFamily: Fonts.h2.family,
        fontSize: Fonts.h2.size,
        lineHeight: Fonts.h2.lineHeight,
        color: Colors.headingPrimary,
        margin: 0,
        marginBottom: 4,
        left: 0,
        right: 0
    },
    h3: {
        fontFamily: Fonts.h3.family,
        fontSize: Fonts.h3.size,
        lineHeight: Fonts.h3.lineHeight,
        color: Colors.headingPrimary,
        margin: 0,
        marginBottom: 4,
        left: 0,
        right: 0
    },
    h4: {
        fontFamily: Fonts.h4.family,
        fontSize: Fonts.h4.size,
        lineHeight: Fonts.h4.lineHeight,
        color: Colors.headingPrimary,
        margin: 0,
        marginBottom: 4,
        left: 0,
        right: 0
    },
    h5: {
        fontFamily: Fonts.h5.family,
        fontSize: Fonts.h5.size,
        lineHeight: Fonts.h5.lineHeight,
        color: Colors.headingPrimary,
        margin: 0,
        marginTop: 4,
        marginBottom: 4,
        left: 0,
        right: 0
    },
    strong: {
        fontWeight: '900'
    },
    link: {
        textDecorationLine: 'underline',
        color: Colors.brand.primary
    },
    subtext: {
        fontFamily: Fonts.subtext.family,
        fontSize: Fonts.subtext.size,
        lineHeight: Fonts.subtext.lineHeight,
        color: Colors.textSecondary
    },

    // Helper Text Styles
    textLeftAligned: {
        textAlign: 'center'
    },
    textCenterAligned: {
        textAlign: 'center'
    },
    textRightAligned: {
        textAlign: 'right'
    },

    // Give me padding
    padding: {
        paddingVertical: Sizes.padding,
        paddingHorizontal: Sizes.padding
    },
    paddingHorizontal: {
        paddingHorizontal: Sizes.padding
    },
    paddingLeft: {
        paddingLeft: Sizes.padding
    },
    paddingRight: {
        paddingRight: Sizes.padding
    },
    paddingVertical: {
        paddingVertical: Sizes.padding
    },
    paddingTop: {
        paddingTop: Sizes.padding
    },
    paddingBottom: {
        paddingBottom: Sizes.padding
    },
    paddingSml: {
        paddingVertical: Sizes.paddingSml,
        paddingHorizontal: Sizes.paddingSml
    },
    paddingHorizontalSml: {
        paddingHorizontal: Sizes.paddingSml
    },
    paddingLeftSml: {
        paddingLeft: Sizes.paddingSml
    },
    paddingRightSml: {
        paddingRight: Sizes.paddingSml
    },
    paddingVerticalSml: {
        paddingVertical: Sizes.paddingSml
    },
    paddingTopSml: {
        paddingTop: Sizes.paddingSml
    },
    paddingBottomSml: {
        paddingBottom: Sizes.paddingSml
    },

    // General HTML-like Elements
    hr: {
        left: 0,
        right: 0,
        borderBottomWidth: 1,
        borderBottomColor: '#cbd9dc',
        height: 1,
        backgroundColor: 'transparent'
    },

    // Grid
    row: {
        left: 0,
        right: 0,
        flexDirection: 'row'
    },
    flex1: {
        flex: 1
    },
    flex2: {
        flex: 2
    },
    flex3: {
        flex: 3
    },
    flex4: {
        flex: 4
    },
    flex5: {
        flex: 5
    },
    flex6: {
        flex: 6
    },

    // Navbar
    navbar: {
        backgroundColor: '#FFFFFF',
        borderBottomWidth: 0.4,
        borderColor: Colors.border,
        height: Sizes.navbarHeight
    },
    navbarTitle: {
        color: '#364150',
        fontFamily: Fonts.base.familyBold,
        fontSize: Fonts.base.size * 0.9
    },
    navbarButton: {
        tintColor: '#FFFFFF'
    },

    // TabBar
    tabbar: {
        backgroundColor: Colors.tabbar.background
        // borderTopColor: Colors.border,
        // borderTopWidth: 1,
    },

    fullImage: {
        width: Sizes.screen.width,
        height: Sizes.screen.height,
        resizeMode: 'cover'
    },

    overlayImage: {
        flex: 1,
        width: Sizes.screen.width,
        maxHeight: Sizes.screen.height - 60,
        marginTop: 50,
        resizeMode: 'contain'
    },

    overlayHeader: {
        flex: 1,
        flexDirection: 'row',
        position: 'absolute',
        zIndex: 2,
        top: 0,
        left: 0,
        width: Sizes.screen.width,
        padding: 10
    }

};
