import * as React from "react";
import {BackHandler, KeyboardAvoidingView, Modal, Platform, StyleProp, View, ViewStyle} from "react-native";
import Animated from 'react-native-reanimated';
import {IPopupLayer, IProps} from "./popupLayer";
import {animatedType, configName, directionType, scaleType, storageArr} from "./config";
import _hooks from "./_hooks";
import app from "../app";
import Basic from "../basicPage";


const popupLayer: IPopupLayer = {
    animated: animatedType,
    direction: directionType,
    scale: scaleType,
    /**
     * 显示
     * @param name              名称
     * @param delayTime         延迟时间
     */
    show: (name: string, delayTime?: number): void => {
        setTimeout(() => app.emitter.set(`${configName}_${name}`, {display: true}), delayTime ?? 10)
    },
    /**
     * 隐藏
     * @param name              名称
     * @param delayTime         延迟时间
     */
    hide: function (name: string, delayTime?: number): void {
        setTimeout(() => app.emitter.set(`${configName}_${name}`, {display: false}), delayTime ?? 10)
    },
    has: function (name?: string): boolean {
        if (typeof name === "string") {
            const data = storageArr.getByParams({name: `${configName}_${name}`});
            return data ? data.display : false
        }
        const list = storageArr.queryByParams({display: true}) ?? [];
        return list.length > 0
    },
    openingList: function (): string[] {
        const list = storageArr.queryByParams({display: true}) ?? [];
        return list.map(item => item.name.substring(configName.length + 1, item.name.length));
    }
}

const PopupLayerView: React.FC<IProps> = (props) => {
    const {
        css,
        width, height,
        direction, isClickHide,
        isDisplay,
        layerAnimatedXYStyle, layerAnimatedOpacity,
    } = _hooks.useData(props);

    //  inner 样式
    const innerStyle: StyleProp<ViewStyle> = {
        width, height, position: 'absolute', overflow: 'hidden',
        borderWidth: 0.5, borderColor: props.borderColor ?? 'rgba(0,0,0,0)',
        backgroundColor: props.bg ?? css.color.white,
    }
    if (typeof props.edge === "number") {
        innerStyle.borderRadius = props.borderRadius ?? 15;
    }
    //  方向
    if (direction === popupLayer.direction.bottom) {
        //  bottom
        innerStyle.bottom = innerStyle.left = innerStyle.right = typeof props.edge === "number" ? props.edge : 0;
        if (typeof props.borderRadius !== "number") innerStyle.borderTopLeftRadius = innerStyle.borderTopRightRadius = innerStyle.borderTopStartRadius = innerStyle.borderTopEndRadius = props.borderRadius ?? 15
    } else if (direction === popupLayer.direction.top) {
        //  top
        innerStyle.top = innerStyle.left = innerStyle.right = typeof props.edge === "number" ? props.edge : 0;
        if (typeof props.borderRadius !== "number") innerStyle.borderBottomLeftRadius = innerStyle.borderBottomRightRadius = innerStyle.borderBottomStartRadius = innerStyle.borderBottomEndRadius = props.borderRadius ?? 15
    } else if (direction === popupLayer.direction.left) {
        //  left
        innerStyle.left = innerStyle.top = innerStyle.bottom = typeof props.edge === "number" ? props.edge : 0;
        if (typeof props.borderRadius !== "number") innerStyle.borderTopRightRadius = innerStyle.borderTopEndRadius = innerStyle.borderBottomRightRadius = innerStyle.borderBottomEndRadius = props.borderRadius ?? 15
    } else if (direction === popupLayer.direction.right) {
        //  right
        innerStyle.right = innerStyle.top = innerStyle.bottom = typeof props.edge === "number" ? props.edge : 0;
        if (typeof props.borderRadius !== "number") innerStyle.borderTopLeftRadius = innerStyle.borderTopStartRadius = innerStyle.borderBottomLeftRadius = innerStyle.borderBottomStartRadius = props.borderRadius ?? 15

    } else {
        // none
        innerStyle.bottom = innerStyle.left = innerStyle.right = typeof props.edge === "number" ? props.edge : 0;
    }

    return <Modal
        //  打开关闭
        visible={isDisplay}
        //  是否透明
        transparent={true}
        //  动画类型
        animationType={'none'}
        //  android 硬件加速
        hardwareAccelerated={true}
        //  android 是否headerBar也包含
        statusBarTranslucent={true}
        //  滑动物理按钮返回
        onRequestClose={() => {
            if (popupLayer.has()) {
                const list = popupLayer.openingList();
                list.map((item) => popupLayer.hide(item));
            }
            //  退出App
            if (app.system.exit()) setTimeout(() => BackHandler.exitApp(), 200)
        }}
    >
        <KeyboardAvoidingView
            style={{flex: 1}}
            behavior={Platform.OS === "ios" ? "padding" : 'height'}>
            <Animated.View style={[{flex: 1, backgroundColor: css.app.mask}, layerAnimatedOpacity]}>
                <Animated.View style={[{flex: 1, position: 'relative'}, layerAnimatedXYStyle]}>
                    <Basic.View style={{flex: 1}} onPress={() => {
                        if (isClickHide) popupLayer.hide(props.name);
                    }}/>
                    <View style={innerStyle}>
                        {props.children}
                    </View>
                </Animated.View>
            </Animated.View>
        </KeyboardAvoidingView>
    </Modal>
}


export default PopupLayerView
export {
    popupLayer
}