import { useThemeColor } from '@/hooks/useThemeColor';

type ThemeColors = ReturnType<typeof useThemeColor>;

/** Style map for the Markdown renderer, derived from the active theme colours. */
export function createMarkdownStyles(colors: ThemeColors) {
    return {
        body: {
            fontSize: 15,
            lineHeight: 22,
            color: colors.messageAssistantText,
        },
        strong: {
            fontWeight: '700',
            color: colors.text,
        },
        em: {
            fontStyle: 'italic',
        },
        code_inline: {
            backgroundColor: colors.backgroundColor,
            color: colors.text,
            paddingHorizontal: 5,
            paddingVertical: 1,
            borderRadius: 4,
            fontSize: 13,
            fontFamily: 'monospace',
        },
        fence: {
            backgroundColor: colors.inputBg,
            borderColor: colors.border,
            borderWidth: 1,
            color: colors.text,
            padding: 12,
            borderRadius: 8,
            fontSize: 13,
            fontFamily: 'monospace',
            marginVertical: 8,
            overflow: 'hidden',
        },
        code_block: {
            backgroundColor: colors.inputBg,
            color: colors.text,
            padding: 12,
            borderRadius: 8,
            fontSize: 13,
            fontFamily: 'monospace',
            marginVertical: 8,
        },
        blockquote: {
            borderLeftWidth: 3,
            borderLeftColor: colors.border,
            paddingLeft: 12,
            marginVertical: 4,
            color: colors.textMuted,
        },
        bullet_list: {
            marginVertical: 4,
        },
        ordered_list: {
            marginVertical: 4,
        },
        list_item: {
            marginVertical: 2,
            color: colors.messageAssistantText,
        },
        heading1: {
            fontSize: 22,
            fontWeight: '700',
            marginVertical: 8,
            color: colors.text,
        },
        heading2: {
            fontSize: 19,
            fontWeight: '700',
            marginVertical: 6,
            color: colors.text,
        },
        heading3: {
            fontSize: 17,
            fontWeight: '600',
            marginVertical: 4,
            color: colors.text,
        },
        link: {
            color: '#3B82F6',
            textDecorationLine: 'underline',
        },
        hr: {
            backgroundColor: colors.border,
            height: 1,
            marginVertical: 12,
        },
        paragraph: {
            marginVertical: 2,
        },
        // The Markdown renderer's style types do not accept every RN style key literal.
    } as any;
}