import React, { Component } from 'react'
import { View, Text, StyleSheet, TouchableOpacity, Image, ScrollView, TouchableHighlight, Keyboard } from 'react-native';
import BottomSheet from 'reanimated-bottom-sheet'
import Animated from 'react-native-reanimated';
import { px2dp, height, size, onePx, colors, toast } from '../../utils/base'

interface Props {
    options: Array<T>;
    isInTab?: boolean;
    onChange: Function;
    themeColor?: string;
    headerText?: string;
    disableReason?: string;
};

interface T {
    name: string;
    key: number;
    disable?: boolean
};

export default class ActionSheet extends Component<Props> {
    constructor(props: Props) {
        super(props);
        // const state = redux.getState();
        this.state = {
            height: height,
        };
        this.renderInner = this.renderInner.bind(this)
        this._onCloseEnd = this._onCloseEnd.bind(this);
    };

    public actionSheetHeaderHeight = px2dp(60);

    public decButtomOutLineWidth = px2dp(8)

    public sheetContainerRef = null;

    public sheetRef = null;

    public delayShow = null;

    public fall = new Animated.Value(1);

    public delayTimer = null;

    public delayHideTimer = null;

    componentWillUnmount() {
        this.delayTimer && clearTimeout(this.delayTimer);
        this.delayHideTimer && clearTimeout(this.delayHideTimer);
    };

    public handleHide = () => {
        this.sheetRef.snapTo(0);
        this.sheetRef.snapTo(0);
        this.delayHideTimer = setTimeout(() => {
            this._onCloseEnd();
        }, 250);
    };

    public show = () => {    //打开下拉框
        Keyboard.dismiss();
        this.delayHideTimer && clearTimeout(this.delayHideTimer);
        this.sheetContainerRef.setNativeProps({
            style: {
                display: 'flex',
                zIndex: 999
            }
        });
        this.sheetRef.snapTo(1);
        this.sheetRef.snapTo(1);
    };

    public _onCloseEnd = () => {
        this.sheetContainerRef.setNativeProps({
            style: {
                display: 'none',
                zIndex: -1
            }
        });
    };

    calculatSheetHeight() {
        const { isInTab = false, options = [{ name: '暂无数据', key: 1 }] } = this.props;  //null safety
        //@ts-ignore 
        const { height } = this.state;
        let maxHeight = height * 0.7;
        if (isInTab) {
            maxHeight = height * 0.7 - size.tab_height;
        }
        let contentHeight = this.actionSheetHeaderHeight + options.length * px2dp(53) + this.decButtomOutLineWidth + px2dp(60)
        if (contentHeight > maxHeight) {
            let callBackData = {
                sheetHeight: maxHeight,
                dargable: false
            }
            return callBackData
        } else {
            let callBackData = {
                sheetHeight: contentHeight,
                dargable: true
            }
            return callBackData
        };
    };

    handleChange = (option, index) => {
        this.handleHide();
        const { onChange, disableReason } = this.props;
        if (option.disable) {
            return toast(disableReason);
        }
        this.delayTimer = setTimeout(() => {
            onChange && onChange(index, option);
        }, 100);
    };

    public render_option = (option: T, index: number | undefined, len: number | undefined) => {
        const { onChange, themeColor = '#333' } = this.props;
        return (
            <TouchableOpacity onPress={() => this.handleChange(option, index)} style={[styles.optionLine, index === len - 1 ? { borderBottomColor: '#fff' } : null]} key={index + ''}>
                <Text
                    style={[{ color: themeColor, fontWeight: '500' }, option.disable ? { textDecorationLine: 'line-through' } : null]}
                >
                    {option.name}
                </Text>
            </TouchableOpacity>
        )
    };

    renderInner() {
        const { options, headerText } = this.props;
        const { sheetHeight, dargable } = this.calculatSheetHeight();
        // alert(sheetHeight)
        return (
            <View style={{ width: '100%', height: sheetHeight, alignItems: 'center', backgroundColor: '#fff', borderTopLeftRadius: px2dp(12), borderTopRightRadius: px2dp(12) }}>
                <View style={styles.sheetheader}>
                    <Text style={{ fontSize: 12, color: '#999', fontWeight: '500' }}>{headerText ? headerText : '请选择'}</Text>
                </View>
                {
                    dargable ?
                        options && options.map((option, index) => this.render_option(option, index, options.length))
                        :
                        <ScrollView style={{ flex: 1, width: '100%' }} scrollEnabled={true}>
                            {options && options.map((option, index) => this.render_option(option, index, options.length))}
                        </ScrollView>
                }
                <View style={{ width: '100%', height: px2dp(8), backgroundColor: '#f2f2f2' }}></View>
                <TouchableOpacity onPress={() => this.handleHide()} style={styles.decBtn}>
                    <Text style={{ fontSize: 15, color: colors.red, fontWeight: '500' }}>取消</Text>
                </TouchableOpacity>
            </View>
        )
    };

    render() {
        const { isInTab = false, options = [{ name: '暂无数据', key: 1 }] } = this.props;  //null safety
        const { sheetHeight, dargable } = this.calculatSheetHeight();
        return (
            <View
                ref={(c) => this.sheetContainerRef = c}
                style={styles.sheetContainer}>
                <Animated.View style={[styles.overlay, {
                    opacity: Animated.sub(0.6, Animated.multiply(this.fall, 0.6)),
                }]}>
                    <TouchableOpacity onPress={() => this.handleHide()} style={styles.touchOverlayContent}></TouchableOpacity>
                </Animated.View>
                <BottomSheet
                    snapPoints={[0, sheetHeight]}  // 高度
                    renderContent={this.renderInner}  // 内容
                    initialSnap={0}
                    enabledGestureInteraction={dargable} // 是否可以手势滑动 
                    enabledContentGestureInteraction={dargable} //内容区域是否可以滚动
                    callbackNode={this.fall}
                    ref={c => { this.sheetRef = c }}
                    borderRadius={px2dp(12)}
                    onCloseEnd={this._onCloseEnd}
                />
            </View>
        )
    }
};

const styles = StyleSheet.create({
    sheetContainer: {
        position: 'absolute',
        top: 0,
        left: 0,

        height: '100%',
        width: '100%',
        display: 'none',
        zIndex: -1
    },

    touchOverlayContent: {
        width: '100%',
        height: '100%',
    },

    overlay: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(0,0,0,0.7)',
        // zIndex: 0
    },

    sheetheader: {
        width: '100%',
        height: px2dp(60),
        borderBottomColor: '#eee',
        borderBottomWidth: onePx,
        justifyContent: 'center',
        alignItems: 'center'
    },

    decBtn: {
        width: '100%',
        height: px2dp(60),
        justifyContent: 'center',
        alignItems: 'center',
        borderTopColor: "#f2f2f2",
        // backgroundColor: 'red'
    },

    optionLine: {
        width: '100%',
        height: px2dp(52),
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomColor: '#eee',
        borderBottomWidth: onePx,
        marginBottom: 1
    }
})