/*
 * @Author: QC.L
 * @Date: 2018-09-11 16:07:56
 * @Last Modified by: QC.L
 * @Last Modified time: 2018-09-11 16:14:40
 * @Description 弹框 Alert 效果
 */
'use strict';

import React from 'react';
import ReactNative from 'react-native';

const {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Modal,
} = ReactNative;
import PropTypes from 'prop-types';

/**
 * 参数1: showStatus 值 sure/cancel
 * 参数2: handleAction 要处理的事件
 */
function YHAlertItem(props) {
    return (
        <TouchableOpacity style={styles.click} onPress={() => {
            props.handleAction && props.handleAction(props.param ? props.param: {});
        }}>
            <Text style={styles[props.showStatus]}>{props.children}</Text>
        </TouchableOpacity>
    );
}

/**
 * 参数1: isShow true 显示 false 隐藏
 */
class YHAlert extends React.Component {

    static propTypes = {
        show: PropTypes.func, // 显示
        hide: PropTypes.func, // 隐藏
    };

    constructor(props) {
        super(props);
        this._renderChildren = this._renderChildren.bind(this);
    }

    static defaultProps = {
        confirmTitle:{},
    };

    _renderChildren(children) {

        if('[object Array]' == Object.prototype.toString.call(children)){
          return children.map((element, index) => {
              if (index === children.length) return element
              return (
                  <React.Fragment>
                      {element}
                      <View style={{width: 0.5, height: '100%', backgroundColor: '#e0e0e0'}}></View>
                  </React.Fragment>
              )
          });
        }else {
          return children
        }
    }

    render() {
        let { children } = this.props;
        return (
            <Modal
                visible={this.props.isShow}
                animationType={'none'}
                transparent={true}
                onRequestClose={() => {}}>
                <View style={styles.modalContainer}>
                    <View style={styles.modalView}>
                        {this.props.title ? <View style={styles.confirmTitleContainer}>
                            <Text style={[styles.confirmTitle,this.props.titleStyle]} numberOfLines={1}>{this.props.title}</Text>
                        </View>: null}

                        {this.props.content ? <View style={styles.confirmContentContainer}>
                            <Text style={[styles.confirmContent,this.props.contentStyle]}numberOfLines={3}>{this.props.content}</Text>
                        </View>: null}

                        <View style={{width: '100%', height: 0.5, backgroundColor: '#e0e0e0'}}/>
                        <View style={styles.confirmBtnContainer}>
                            {this._renderChildren(children)}
                        </View>
                    </View>
                </View>
            </Modal>
        );
    }
};

export { YHAlert, YHAlertItem };

let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
    modalContainer: {
        flex: 1,
        width: width,
        height: height,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.4)',
    },
    modalView: {
        width: 270,
        alignItems: 'center',
        backgroundColor: '#ffffff',
        borderRadius : 5
    },
    confirmBtnContainer: {
        width: '100%',
        height: 50,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    confirmTitleContainer: {
        alignItems: 'center'
    },
    confirmTitle: {
        paddingTop: 20,
        paddingLeft: 30,
        paddingRight: 30,
        paddingBottom: 10,
        color: '#000000',
        fontSize: 16,
        lineHeight: 24,
        textAlign: 'center',
        letterSpacing: -0.09,
        fontFamily: 'PingFang-SC-Regular',
        fontWeight: '600',
    },
    confirmContentContainer: {
        alignItems: 'center'
    },
    confirmContent: {
        paddingLeft: 30,
        paddingRight: 30,
        paddingBottom: 20,
        color: '#999999',
        fontSize: 14,
        lineHeight: 24,
        textAlign: 'center',
        letterSpacing: -0.09,
        fontFamily: 'PingFang-SC-Regular',
    },
    click: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    cancel: {
        fontSize: 17,
        color: '#000000',
        letterSpacing: -0.41,
        fontFamily: 'PingFang-SC-Regular',
        fontWeight: 'bold',
    },
    sure: {
        fontSize: 17,
        color: '#999999',
        letterSpacing: -0.41,
    },
    blackButton: {
        fontSize: 17,
        color: 'black',
        letterSpacing: -0.41,
    },
    LightGrayButton: {
        fontSize: 17,
        color: '#999999',
        letterSpacing: -0.41,
        fontFamily: 'PingFang-SC-Regular',
    },
    redButton: {
        fontSize: 17,
        color: 'red',
        letterSpacing: -0.41,
        fontFamily: 'PingFang-SC-Regular',
    },
});