/*
    Предрейсовые осмотры - мобильное приложение
    Стили компонента иконки/логотипа приложения
*/

//---------------------
//Подключение библиотек
//---------------------

const { StyleSheet } = require('react-native'); //StyleSheet React Native
const { responsiveSize } = require('../../utils/responsive'); //Адаптивные утилиты

//-----------
//Тело модуля
//-----------

//Цвета иконки
const TEAL_BACKGROUND = '#50AF95';
const ROBOT_WHITE = '#FFFFFF';

//Размеры для разных вариантов
const SIZES = {
    small: responsiveSize(32),
    medium: responsiveSize(40),
    large: responsiveSize(56)
};

//Стили логотипа
const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: TEAL_BACKGROUND,
        overflow: 'hidden'
    },
    containerSmall: {
        width: SIZES.small,
        height: SIZES.small,
        borderRadius: responsiveSize(6)
    },
    containerMedium: {
        width: SIZES.medium,
        height: SIZES.medium,
        borderRadius: responsiveSize(8)
    },
    containerLarge: {
        width: SIZES.large,
        height: SIZES.large,
        borderRadius: responsiveSize(10)
    },
    robotContainer: {
        alignItems: 'center',
        justifyContent: 'center'
    },
    antennasContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        marginBottom: responsiveSize(-1)
    },
    antenna: {
        backgroundColor: ROBOT_WHITE,
        borderRadius: responsiveSize(2)
    },
    antennaLeft: {
        transform: [{ rotate: '-30deg' }],
        marginRight: responsiveSize(4)
    },
    antennaRight: {
        transform: [{ rotate: '30deg' }],
        marginLeft: responsiveSize(4)
    },
    antennaSmall: {
        width: responsiveSize(1.5),
        height: responsiveSize(4)
    },
    antennaMedium: {
        width: responsiveSize(2),
        height: responsiveSize(5)
    },
    antennaLarge: {
        width: responsiveSize(2.5),
        height: responsiveSize(7)
    },
    head: {
        backgroundColor: ROBOT_WHITE,
        borderTopLeftRadius: responsiveSize(100),
        borderTopRightRadius: responsiveSize(100),
        borderBottomLeftRadius: responsiveSize(4),
        borderBottomRightRadius: responsiveSize(4),
        justifyContent: 'center',
        alignItems: 'center'
    },
    headSmall: {
        width: responsiveSize(18),
        height: responsiveSize(10),
        paddingTop: responsiveSize(3)
    },
    headMedium: {
        width: responsiveSize(22),
        height: responsiveSize(12),
        paddingTop: responsiveSize(4)
    },
    headLarge: {
        width: responsiveSize(32),
        height: responsiveSize(18),
        paddingTop: responsiveSize(5)
    },
    eyesContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: '50%'
    },
    eye: {
        backgroundColor: TEAL_BACKGROUND,
        borderRadius: responsiveSize(100)
    },
    eyeSmall: {
        width: responsiveSize(2),
        height: responsiveSize(2)
    },
    eyeMedium: {
        width: responsiveSize(2.5),
        height: responsiveSize(2.5)
    },
    eyeLarge: {
        width: responsiveSize(4),
        height: responsiveSize(4)
    }
});

//----------------
//Интерфейс модуля
//----------------

module.exports = styles;
