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

export const AVATAR_BORDER_GRADIENT = [ '#4C9AFF', '#0052CC' ];

export const BACKGROUND_OVERLAY_GRADIENT = [ '#0052CC', '#4C9AFF' ];

const BUTTON_SIZE = 56;

const CALLER_AVATAR_BORDER_WIDTH = 3;

export const CALLER_AVATAR_SIZE = 128;

const CALLER_AVATAR_CIRCLE_SIZE
    = CALLER_AVATAR_SIZE + (2 * CALLER_AVATAR_BORDER_WIDTH);

const LINE_SPACING = 8;

const PAGE_PADDING = 48;

const _icon = {
    alignSelf: 'center',
    color: ColorPalette.white,
    fontSize: 32
};

const _responseButton = {
    alignSelf: 'center',
    borderRadius: BUTTON_SIZE / 2,
    borderWidth: 0,
    flex: 0,
    flexDirection: 'row',
    height: BUTTON_SIZE,
    justifyContent: 'center',
    width: BUTTON_SIZE
};

const _text = {
    color: ColorPalette.white,
    fontSize: 16
};

export default createStyleSheet({
    answerButtonStyles: {
        iconStyle: {
            ..._icon,
            transform: [
                { rotateZ: '130deg' }
            ]
        },
        style: {
            ..._responseButton,
            backgroundColor: ColorPalette.green
        },
        underlayColor: ColorPalette.buttonUnderlay
    },

    avatar: {
        marginLeft: CALLER_AVATAR_BORDER_WIDTH,
        marginTop: CALLER_AVATAR_BORDER_WIDTH,
        position: 'absolute'
    },

    avatarBorder: {
        borderRadius: CALLER_AVATAR_CIRCLE_SIZE / 2,
        height: CALLER_AVATAR_CIRCLE_SIZE,
        position: 'absolute',
        width: CALLER_AVATAR_CIRCLE_SIZE
    },

    avatarContainer: {
        height: CALLER_AVATAR_CIRCLE_SIZE,
        marginTop: LINE_SPACING * 4,
        width: CALLER_AVATAR_CIRCLE_SIZE
    },

    backgroundAvatar: {
        bottom: 0,
        left: 0,
        position: 'absolute',
        right: 0,
        top: 0
    },

    backgroundAvatarImage: {
        flex: 1
    },

    backgroundOverlayGradient: {
        bottom: 0,
        left: 0,
        opacity: 0.9,
        position: 'absolute',
        right: 0,
        top: 0
    },

    buttonsContainer: {
        alignItems: 'flex-end',
        flex: 1,
        flexDirection: 'row'
    },

    buttonText: {
        ..._text,
        alignSelf: 'center',
        marginTop: 1.5 * LINE_SPACING
    },

    buttonWrapper: {
        flex: 1
    },

    callerName: {
        ..._text,
        fontSize: 36,
        marginBottom: LINE_SPACING,
        marginLeft: PAGE_PADDING,
        marginRight: PAGE_PADDING,
        marginTop: LINE_SPACING,
        textAlign: 'center'
    },

    declineButtonStyles: {
        iconStyle: _icon,
        style: {
            ..._responseButton,
            backgroundColor: ColorPalette.red
        },
        underlayColor: ColorPalette.buttonUnderlay
    },

    pageContainer: {
        alignItems: 'center',
        flex: 1,
        paddingBottom: PAGE_PADDING,
        paddingTop: PAGE_PADDING
    },

    productLabel: {
        ..._text
    },

    title: {
        ..._text
    }
});