import { StyleSheet } from 'react-native';
import type { WidgetType } from '../domain';

export const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    inlineWrapper: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    bottom: {
        position: 'absolute',
        bottom: 0,
        justifyContent: 'center',
        alignItems: 'center',
    },
    top: {
        position: 'absolute',
        top: 0,
        justifyContent: 'center',
        alignItems: 'center',
    },
    inline: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    modalOverlay: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        alignItems: 'center',
    },
    modalContent: {
        backgroundColor: 'white',
        borderRadius: 10,
    },
});

export const getWidgetVisibility = (visibility: boolean) => {
    return {
        opacity: visibility ? 1 : 0,
        pointerEvents: visibility ? 'auto' as const : 'none' as const,
    };
};

export const getWidgetStyles = (type: WidgetType) => {
    const styleMap = {
        'bottom': { container: styles.wrapper, content: styles.bottom },
        'top': { container: styles.wrapper, content: styles.top },
        'inline': { container: styles.inlineWrapper, content: styles.inline },
        'modal': { container: styles.wrapper, content: styles.inline }
    };

    return styleMap[type] || styleMap.bottom;
};