// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.

import {Platform, StyleSheet} from 'react-native';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';

export const getMarkdownTextStyles = makeStyleSheetFromTheme((theme) => {
    const codeFont = Platform.OS === 'ios' ? 'Menlo' : 'monospace';

    return {
        emph: {
            fontStyle: 'italic'
        },
        strong: {
            fontWeight: 'bold'
        },
        del: {
            textDecorationLine: 'line-through'
        },
        link: {
            color: theme.linkColor
        },
        heading1: {
            fontSize: 17,
            fontWeight: '700',
            marginTop: 10,
            marginBottom: 10
        },
        heading2: {
            fontSize: 17,
            fontWeight: '700',
            marginTop: 10,
            marginBottom: 10
        },
        heading3: {
            fontSize: 17,
            fontWeight: '700',
            marginTop: 10,
            marginBottom: 10
        },
        heading4: {
            fontSize: 17,
            fontWeight: '700',
            marginTop: 10,
            marginBottom: 10
        },
        heading5: {
            fontSize: 17,
            fontWeight: '700',
            marginTop: 10,
            marginBottom: 10
        },
        heading6: {
            fontSize: 17,
            fontWeight: '700',
            marginTop: 10,
            marginBottom: 10
        },
        code: {
            alignSelf: 'center',
            backgroundColor: changeOpacity(theme.centerChannelColor, 0.07),
            fontFamily: codeFont
        },
        codeBlock: {
            fontFamily: codeFont
        },
        mention: {
            color: theme.linkColor
        }
    };
});

export const getMarkdownBlockStyles = makeStyleSheetFromTheme((theme) => {
    return {
        adjacentParagraph: {
            marginTop: 6
        },
        codeBlock: {
            backgroundColor: changeOpacity(theme.centerChannelColor, 0.07),
            borderRadius: 4,
            paddingHorizontal: 4,
            paddingVertical: 2
        },
        horizontalRule: {
            backgroundColor: theme.centerChannelColor,
            height: StyleSheet.hairlineWidth,
            flex: 1,
            marginVertical: 10
        },
        quoteBlockIcon: {
            color: changeOpacity(theme.centerChannelColor, 0.5),
            padding: 5
        }
    };
});

export default {
    getMarkdownBlockStyles,
    getMarkdownTextStyles
};