import React from 'react';
import PropTypes from 'prop-types';

import {
View,
StyleSheet,
Text,
Modal,
TouchableOpacity,
Dimensions
} from 'react-native'
const {width,height} =Dimensions.get('window')

export default class YH_ActionSheet extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            modalVisible:false,
        }
    }

    static propTypes={
        items:PropTypes.array,
        itemStyle:PropTypes.object,
        actionTitleStyle:PropTypes.object,
        itemTitleStyle:PropTypes.object,
        modalTitle:PropTypes.string,
    }
    static defaultProps={
        items:[],
        itemStyle:{},
        actionTitleStyle:{},
        itemTitleStyle:{},
        modalTitle:''
    }

    showModal(){
        this.setState({modalVisible:true})
    }

    cancelModal(){
        this.setState({modalVisible:false})
    }

    clickItem(id){
        this.props.actionsheetItemClick(id);
    }

    render(){
        let actionSheets = this.props.items.map((item,i)=>{
            return(
                <TouchableOpacity
                    key={i}
                    style={[styles.actionItem,this.props.itemStyle]}
                    onPress={()=>this.clickItem(item.id)}>
                    <Text style={[styles.actionItemTitle,this.props.itemTitleStyle]}
                    >{item.title}</Text>
                </TouchableOpacity>
            )
        })


        return <Modal animationType="fade"  //slide
                                    visible={this.state.modalVisible}
                                    transparent={true}
                                    onRequestClose={()=>this.setState({modalVisible:false})}>
                <View style={styles.modalStyle}>
                    <View style={styles.subView}>
                        <View style={styles.itemContainer}>
                        {this.props.modalTitle ? <View style={[styles.itemContainer,{height:55,marginTop:5}]}>
                            <Text style={[styles.actionTitle,this.props.actionTitleStyle]}
                            >{this.props.modalTitle}</Text>
                            </View> : null}
                            {actionSheets}
                        </View>
                        <View style={[styles.itemContainer]}>
                            <TouchableOpacity
                                style={[styles.actionItem,this.props.itemStyle,{height:70,marginBottom:-5,backgroundColor:'white'}]}
                                onPress={()=>this.setState({modalVisible:false})}>
                                <Text style={[styles.actionItemTitle,this.props.itemTitleStyle,{color:'#999999',}]}>取消</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
             </Modal>
    }
}

const styles = StyleSheet.create({
    modalStyle:{
        justifyContent:'flex-end',
        alignItems:'center',
        flex:1,
        backgroundColor:'rgba(0,0,0,0.2)',
    },
    subView:{
        justifyContent:'flex-end',
        alignItems:'center',
        alignSelf:'stretch',
        width:width,
        backgroundColor:'white',
    },
    itemContainer:{
        marginLeft:15,
        marginRight:15,
        marginBottom:0.5,
        backgroundColor:'#fff',
        justifyContent:'center',
        alignItems:'center',
    },
    actionItem:{
        width:width,
        height:70,
        alignItems:'center',
        justifyContent:'center',
        borderTopColor:'#EEEEEE',
        borderTopWidth:0.5,
    },
    actionTitle:{
        fontSize:14,
        color:'#9EA3AD',
        textAlign:'center',
    },
    actionItemTitle:{
        fontSize:16,
        color:'#000000',
        textAlign:'center',
    },
})