import * as React from "react";
import {Animated, StyleProp, StyleSheet, TextStyle, View} from "react-native";
import {reduxTools} from '@yoronsoft/js-utils';
import {configEmitterParams, popupDirection, configName} from "./config";
import {IProps, PopupDirectionData, PopupEmitterParams} from "./popup";
import PopupLayerView, {popupLayer} from "../popupLayer";
import app, {ThemeCss} from "../app";

const useEmitterParams = () => {
    const [anOpacity] = React.useState(new Animated.Value(0));
    const [anXY, setAnXY] = React.useState(new Animated.ValueXY({x: 0, y: 0}));
    const [direction, setDirection] = React.useState<PopupDirectionData>(popupDirection.bottom);
    const [space, setSpace] = React.useState<number>(0);
    const [isAnimated, setIsAnimated] = React.useState(false);
    const [value, setValue] = React.useState(undefined);
    React.useEffect(() => {
        const emitterData = app.emitter.get(configEmitterParams, (res: PopupEmitterParams) => {
            setValue(res.value);
            setIsAnimated(res.display);
            setSpace(res.space);
            setDirection(res.direction);
            if (res.display) setAnXY(new Animated.ValueXY(useDirectionParams(res.direction)))
        })
        return () => emitterData.remove();
    }, [])
    return {
        anOpacity, anXY, isAnimated,
        direction, space, value,
    }
}

const useDirectionParams = (direction: PopupDirectionData): { x: number, y: number } => {
    let value = {x: 0, y: 0};
    if (direction === popupDirection.top) value = {x: 0, y: -50};
    else if (direction === popupDirection.bottom) value = {x: 0, y: 50};
    else if (direction === popupDirection.left) value = {x: -50, y: 0};
    else if (direction === popupDirection.right) value = {x: 50, y: 0};
    return value;
}

const getAnimatedDirection = (direction: PopupDirectionData) => {
    let value = {};
    if (direction === popupDirection.top) value = {top: 0, left: 0, right: 0};
    else if (direction === popupDirection.bottom) value = {bottom: 0, left: 0, right: 0};
    else if (direction === popupDirection.left) value = {bottom: 0, left: 0, top: 0};
    else if (direction === popupDirection.right) value = {bottom: 0, right: 0, top: 0};
    return value;
}

const PopupInit: React.FC<IProps> = () => {
    const css = app.theme.useGet<ThemeCss>();
    const styles = styleSheet(css);
    const paramsData = useEmitterParams();
    React.useEffect(() => {
        const emitterData = app.emitter.get(configEmitterParams, (res: PopupEmitterParams) => {
            reduxTools.update(configEmitterParams, res);
            if (res.display) popupLayer.show(configName);
            else popupLayer.hide(configName);
        })
        return () => emitterData.remove();
    }, [])


    let popupStyle: StyleProp<TextStyle> = {
        position: 'absolute', padding: paramsData.space ?? 0, width: css.width,
        ...getAnimatedDirection(paramsData.direction),
    };

    const direction = paramsData.direction;
    return <PopupLayerView name={configName} width={css.width} height={css.height} bg={'rgba(0,0,0,0)'}
                           direction={direction} animated={direction}>
        <View style={[styles.view, css.rowAroundCenter, css.colAroundCenter]}>
            <Animated.View style={[css.colBetween, popupStyle]}>
                {paramsData.value}
            </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 PopupInit