import * as React from "react";
import {Animated, StyleProp, StyleSheet, TextStyle, View} from "react-native";
import {reduxTools} from '@yoronsoft/js-utils';
import {IProps, ModalEmitterParams, ModalTypeData} from "./modal";
import {configEmitterParams, configName, modalType} from "./config";
import PopupLayerView, {popupLayer} from "../popupLayer";
import app from "../app";
import {ThemeCss} from "../app";
import Basic from '../basicPage'

const useEmitterParams = () => {
    const [anOpacity] = React.useState(new Animated.Value(0));
    const [anXY] = React.useState(new Animated.ValueXY({x: 0, y: 50}));
    const [type, setType] = React.useState<ModalTypeData>(undefined);
    const [space, setSpace] = React.useState<number>(0);
    const [isAnimated, setIsAnimated] = React.useState(false);
    const [title, setTitle] = React.useState(undefined);
    const [content, setContent] = React.useState(undefined);
    const [btn, setBtn] = React.useState(undefined);
    React.useEffect(() => {
        const emitterData = app.emitter.get(configEmitterParams, (res: ModalEmitterParams) => {
            setTitle(res.title);
            setContent(res.content);
            setBtn(res.btn);
            setIsAnimated(res.display);
            setType(res.type);
            if (res.type === modalType.default) setSpace(res.space ?? 0);
            else setSpace(res.space);
        })
        return () => emitterData.remove();
    }, [])
    return {
        anOpacity, anXY, isAnimated, type,
        title, content, btn, space
    }
}
const ModalInit: React.FC<IProps> = () => {
    const css = app.theme.useGet<ThemeCss>();
    const styles = styleSheet(css);
    const [display, setDisplay] = React.useState(false);
    const paramsData = useEmitterParams();

    React.useEffect(() => {
        const emitterData = app.emitter.get(configEmitterParams, (res: ModalEmitterParams) => {
            reduxTools.update(configEmitterParams, res);
            // if (res.display) setDisplay(true);
            if (res.display) popupLayer.show(configName);
            else popupLayer.hide(configName);
        })
        return () => emitterData.remove();
    }, [])

    //  执行动画
    React.useEffect(() => {
        if (!display) return;
        const defaultParams = {duration: 150, useNativeDriver: true};
        if (paramsData.isAnimated) {
            //  show
            Animated.parallel([
                Animated.timing(paramsData.anOpacity, {
                    toValue: 1, ...defaultParams
                }),
                Animated.timing(paramsData.anXY, {
                    toValue: {x: 0, y: 0}, ...defaultParams
                })
            ]).start();
        } else {
            //  hide
            Animated.parallel([
                Animated.timing(paramsData.anOpacity, {
                    toValue: 0, ...defaultParams
                }),
                Animated.timing(paramsData.anXY, {
                    toValue: {x: 0, y: 50}, ...defaultParams
                })
            ]).start(() => setDisplay(false));
        }
    }, [paramsData.isAnimated, display])


    let titleStyle: StyleProp<TextStyle> = {
        width: css.modal.width,
    }
    let modalStyle: StyleProp<TextStyle> = {
        width: css.modal.width,
        backgroundColor: css.modal.bg ?? css.color.white,
        borderRadius: css.modal.borderRadius ?? 10,
        overflow: 'hidden',
    };
    let contentStyle: StyleProp<TextStyle> = {
        maxHeight: css.height - 300,
        overflow: 'hidden',
    }
    let btnStyle: StyleProp<TextStyle> = {
        width: css.modal.width,
    }
    if (paramsData.type === modalType.bottom) {
        modalStyle.width = titleStyle.width = btnStyle.width = (css.width - (paramsData.space * 2));
        modalStyle.position = 'absolute';
        modalStyle.left = modalStyle.right = modalStyle.bottom = paramsData.space;
    }

    return <PopupLayerView name={configName} width={css.width} height={css.height} bg={'rgba(0,0,0,0)'}
                           direction={popupLayer.direction.none} animated={popupLayer.animated.fade}>
        <View style={[styles.view, css.rowAroundCenter, css.colAroundCenter]}>
            <Animated.View style={[css.colBetween, modalStyle,
                {
                    transform: [{translateY: paramsData.anXY.y}]
                }]}
            >
                <View>
                    <Basic.View style={titleStyle}>
                        {paramsData.title}
                    </Basic.View>
                    <Basic.View pv={20} ph={10} style={contentStyle}>
                        {paramsData.content}
                    </Basic.View>
                </View>
                <Basic.View style={btnStyle}>
                    {paramsData.btn}
                </Basic.View>
            </Animated.View>
        </View>
    </PopupLayerView>

}

const styleSheet = (css: ThemeCss) => StyleSheet.create({
    view: {
        flex: 1,
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 20,
        width: css.width,
    },
});

export default ModalInit