import {StyleSheet, TextStyle, ViewStyle} from 'react-native';
import {Theme, $Colors} from '../../style';

export interface CheckboxStyle {
    wrapper: ViewStyle;
    icon: TextStyle;
    iconChecked: TextStyle;
    checkBox: TextStyle;
    checkBoxChecked: TextStyle;
    iconRight: TextStyle;
    agreeItem: ViewStyle;
    agreeItemCheckbox: TextStyle;
    checkboxItemCheckbox: TextStyle;
}

export default (theme: Theme) =>
    StyleSheet.create<CheckboxStyle>({
        wrapper: {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
        },
        icon: {
            alignSelf: 'flex-end',
            fontSize: 18,
            width: 20,
            height: 20,
            borderWidth: 1,
            color: $Colors.white,
            borderColor: $Colors.gray,
        },
        iconChecked: {
            fontSize: 18,
            width: 20,
            height: 20,
            alignSelf: 'flex-end',
            color: $Colors.white,
            backgroundColor: $Colors.primary,
            borderWidth: 1,
            borderColor: $Colors.primary,
        },
        checkBox: {
            backgroundColor: $Colors.white,
            borderWidth: 1,
            textAlign: 'center',
            padding: 1,
            borderColor: $Colors.gray,
            color: $Colors.white,
            borderRadius: 3,
        },
        checkBoxChecked: {
            backgroundColor: $Colors.primary,
            borderWidth: 1,
            padding: 1,
            textAlign: 'center',
            borderColor: $Colors.primary,
            color: $Colors.white,
            borderRadius: 3,
        },
        iconRight: {
            marginLeft: theme.h_spacing_md,
        },
        agreeItem: {
            flexDirection: 'row',
            alignItems: 'center',
        },
        agreeItemCheckbox: {
            // marginLeft: theme.h_spacing_lg,
            // marginRight: theme.h_spacing_md,
        },
        checkboxItemCheckbox: {
            marginRight: theme.h_spacing_md,
            alignSelf: 'center',
        },
    });