/**
 * Button component with icons and text
 */

import React, { memo } from 'react';
import { StyleSheet, TouchableOpacity, View, TextInput, Switch, Platform } from 'react-native';
import { connect } from 'react-redux';
import Palette from '../../../styles/palette';
import MainText from '~/components/UI/Text/MainText';
import ProfileNameText from '~/components/UI/Text/ProfileNameText';
import Badge from '../Badge';
import FastImage from '~/components/UI/FastImageWrapper';
import { createTestingProps } from '~/locators/utils';

const
    WRAPPER_VERTICAL_PADDING = 14,
    ICON_DIMENSIONS = 24,
    ICON_RIGHT_MARGIN = 15,
    SUBTITLE_FONT_SIZE = 16;

const BlockButton = ({ onPress, icon, tintColor, tinted, color, title, subtitle, grey, subtitleCustom, subtext, value, onChange, badge, arrow, image, switcher, switchVal, iconFlexStart, testID, ...props }) => (
    <TouchableOpacity {...props} {...createTestingProps(testID)} onPress={onPress} activeOpacity={onPress ? 0.16 : 1}>
        <View style={styles.wrapper}>
            {icon &&
                <FastImage style={[styles.icon, { tintColor }, tinted && { tintColor: color.mainColor }, iconFlexStart && { alignSelf: 'flex-start' }]} source={{ uri: icon }} />
            }
            <View style={styles.textWrap}>
                <View style={styles.titleWrap}>
                    <MainText style={styles.title}>{title}</MainText>
                </View>
                {subtitle &&
                    <View style={icon && styles.subtitleShift}>
                        <ProfileNameText style={[styles.subtext, grey && styles.subtitleGrey, subtitleCustom]} noBold>{subtitle}</ProfileNameText>
                    </View>
                }
                {subtext &&
                    <MainText warmGrey>{subtext}</MainText>
                }
                {value &&
                    <View style={icon && styles.subtitleShift}>
                        <TextInput
                            style={styles.textInput}
                            value={value}
                            onChangeText={onChange}
                            underlineColorAndroid='transparent'
                            placeholder=''
                        />
                    </View>
                }
            </View>
            {badge &&
                <Badge number={badge} />
            }
            {arrow &&
                <View style={styles.arrowWrap}>
                    <FastImage style={styles.arrowImg} source={{ uri: image.button_arrow, }} />
                </View>
            }
            {switcher &&
                <View style={styles.arrowWrap}>
                    <Switch
                        value={switchVal}
                        onValueChange={onChange}
                        trackColor={switchVal ? color.mainColor : Palette.inactive}
                    />
                </View>
            }
        </View>
    </TouchableOpacity>
);

const mapStateToProps = ({ statics: { image, color } }) => ({ image, color });

export default memo(connect(mapStateToProps)(BlockButton));

const styles = StyleSheet.create({
    wrapper: {
        alignSelf: 'stretch',
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: WRAPPER_VERTICAL_PADDING
    },
    icon: {
        width: ICON_DIMENSIONS,
        height: ICON_DIMENSIONS,
        marginRight: ICON_RIGHT_MARGIN,
    },
    arrowWrap: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    arrowImg: {
        width: 24,
        height: 24,
    },
    textWrap: {
        flex: 1,
    },
    titleWrap: {
        justifyContent: 'center',
    },
    title: {
        fontWeight: 'bold',
        fontSize: 16,
    },
    subtitleShift: {
        paddingLeft: ICON_RIGHT_MARGIN * 2 + ICON_DIMENSIONS,
    },
    subtext: {
        marginTop: 8,
    },
    textInput: {
        fontSize: SUBTITLE_FONT_SIZE,
        color: Palette.black,
        marginTop: 8,
    },
    subtitleGrey: {
        color: Palette.warmGrey,
    },
});