import { StyleSheet } from 'react-native';

import { BoxModel, ColorPalette, createStyleSheet } from '../../styles';

/**
 * The React {@code Component} styles of {@code Dialog}.
 */
export const dialog = createStyleSheet({
    /**
     * The style of the {@code Text} in a {@code Dialog} button.
     */
    buttonText: {
        color: ColorPalette.blue
    },

    /**
     * Unified container for a consistent Dialog style.
     */
    dialogContainer: {
        paddingHorizontal: BoxModel.padding,
        paddingVertical: 1.5 * BoxModel.padding
    },

    /**
     * The style of the {@code Text} in a {@code Dialog} button which is
     * disabled.
     */
    disabledButtonText: {
        color: ColorPalette.darkGrey
    }
});

/**
 * The React {@code Component} styles of {@code BottomSheet}. These have
 * been implemented as per the Material Design guidelines:
 * {@link https://material.io/guidelines/components/bottom-sheets.html}.
 */
export const bottomSheetStyles = createStyleSheet({
    /**
     * Style for a backdrop which dims the view in the background. This view
     * will also be clickable. The backgroundColor is applied to the overlay
     * view instead, so the modal animation doesn't affect the backdrop.
     */
    backdrop: {
        ...StyleSheet.absoluteFillObject
    },

    /**
     * Style for the container of the sheet.
     */
    container: {
        alignItems: 'flex-end',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center'
    },

    /**
     * Style for an overlay on top of which the sheet will be displayed.
     */
    overlay: {
        ...StyleSheet.absoluteFillObject,
        backgroundColor: 'rgba(0, 0, 0, 0.8)'
    },

    /**
     * Bottom sheet's base style.
     */
    sheet: {
        flex: 1,
        backgroundColor: ColorPalette.white,
        paddingHorizontal: 16,
        paddingVertical: 8
    }
});