
/**
*  选择项
*/
import React, { useState } from 'react';
import { Modal, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
import defaultStyle from '../../configs/defaultStyle';
import Icon from '../icon';



interface Props {

    /**
    *  样式
    */
    style?: ViewStyle,

    /**
    *  文字描述
    */
    labelText?: string,

    /**
    *  是否 
    */
    useCheckBox?: boolean,

    /**
    *  数据源,请参考
    */
    source?: IconModal[];

    /**
    *  选择事件
    */
    onSelect: (title: string, checked?: boolean) => void;

    /**
    *  显示选择页面的钩子
    */
    getShowRef: (func: () => any) => void


}

export default function ShareModal(props: Readonly<Props>) {

    const [visible, setVisible] = useState(false)
    const [check, setCheck] = useState(false)

    let iconSource: IconModal[] = [{ icon: 0xe63d, title: '微信', iconBGColor: '#2ECC71' }, { icon: 0xe6b4, title: '朋友圈', iconBGColor: '#69D400' }, ...(props.source || [])]
    let itemWidth = defaultStyle.device.width / 3 - 1


    props.getShowRef(() => {
        setVisible(true)
    })

    let selectItem = (title: string, check: boolean) => {
        props.onSelect(title, check);
        setVisible(false)
    }

    return (
        <Modal visible={visible}
            transparent={true}
            animationType='none'>
            <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'flex-end' }}>
                <View style={{ borderBottomColor: '#eee', borderBottomWidth: 0.5, backgroundColor: '#fff' }}>
                    <View style={{ flexDirection: 'row', marginTop: 20, paddingHorizontal: 20 }}>
                        {
                            (props.useCheckBox) && <Icon style={{ color: check ? defaultStyle.color.mainColor : 'rgba(0,0,0,0.3)', fontSize: 12, marginTop: 3 }}
                                onPress={() => setCheck(!check)}
                                iconCode={check ? 0xe850 : 0xe84e} />
                        }
                        <Text style={{ color: 'rgba(0,0,0,0.3)', fontSize: 12, marginLeft: 6, flex: 1, lineHeight: 16 }} >{props.labelText}</Text>
                    </View>
                    <View style={{ flexDirection: 'row', flexWrap: 'wrap', marginBottom: 22 }}>
                        {
                            iconSource.map((icon, index) => {
                                return (
                                    <TouchableOpacity style={{ marginTop: 24, width: itemWidth, alignItems: 'center' }}
                                        onPress={() => selectItem(icon.title, check)}>
                                        <View style={{ width: 50, height: 50, borderRadius: 25, backgroundColor: icon.iconBGColor, justifyContent: 'center', alignItems: 'center' }}>
                                            <Icon style={{ color: '#fff', fontSize: 30 }} iconCode={icon.icon} />
                                        </View>
                                        <Text style={{ color: 'rgba(0,0,0,0.6)', fontSize: 12, marginTop: 7, lineHeight: 17 }}>{icon.title}</Text>
                                    </TouchableOpacity>
                                )
                            })
                        }
                    </View>
                </View>
                <TouchableOpacity style={{ height: 55, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff' }}
                    activeOpacity={0.8}
                    onPress={() => setVisible(false)}>
                    <Text style={{ color: 'rgba(0,0,0,0.8)', fontSize: 16 }}>取消</Text>
                </TouchableOpacity>
            </View>
        </Modal>
    )

}


interface IconModal { icon: number, iconBGColor: string, title: string }