import * as React from "react";
import {countTools} from "@yoronsoft/js-utils";
import {useAnimatedStyle, useSharedValue, withTiming} from "react-native-reanimated";
import {IProps} from "./menu";

const useData = (props: IProps) => {
    //  动画线条大小
    const lineSize = typeof props.lineWidth === "number" ? props.lineWidth : 26;
    //  动画时间，默认 300
    const animatedDuration = typeof props.animatedDuration === "number" ? props.animatedDuration : 300;


    const [index, setIndex] = React.useState<number>(props.index);
    const [listW, setListW] = React.useState<number[]>([]);

    const edge = typeof props.edge === "number" ? props.edge : 20;

    const offset = useSharedValue(0);

    const animatedStyles = useAnimatedStyle(() => ({
        transform: [{translateX: offset.value}],
    }))

    React.useEffect(() => {
        setIndex(props.index);
        onClick(props.index);
    }, [props.index]);

    React.useEffect(() => {
        if (listW.length > 0) onClick(0);
    }, [listW])

    const onClick = (index: number) => {
        if (listW.length) {
            let x = 0;
            listW.map((item, key) => {
                if (key > index) return 0;
                else if (key === index) {
                    x = countTools.plus(x, (item - lineSize) / 2);
                } else {
                    x = countTools.plus(x, item);
                }
            });
            offset.value = withTiming(x,
                {
                    //  动画时间
                    duration: animatedDuration
                },
                //  操作执行
                (finished) => {
                    /**
                     * finished
                     * false：动画开始
                     * true：动画结束
                     */
                    // console.log(finished);
                }
            );
        }
    }


    return {
        lineSize,
        index, edge,
        setListW,
        animatedStyles,
        onClick,
    }
}

export default {
    useData
}