import * as React from "react";
import {StyleProp, TextStyle, TouchableOpacity, View} from "react-native";
import {utils} from '@yoronsoft/js-utils';
import {IProps} from "./view";

const BasicView: React.FC<IProps> = (props) => {
    //  时间戳
    const [timer, setTimer] = React.useState<number>(new Date().getTime());
    //  是否可以连续点击
    const hasContinuousClick = typeof props.hasContinuousClick === 'boolean' ? props.hasContinuousClick : false;
    //  不可点击时长
    const notPressTimer = Math.ceil(props.notPressTimer ? Number(props.notPressTimer) : 300);

    const styleCss: StyleProp<TextStyle> = {};
    if (props.width) styleCss.width = props.width;
    if (props.height) styleCss.height = props.height;
    if (props.t) styleCss.marginTop = props.t;
    if (props.b) styleCss.marginBottom = props.b;
    if (props.l) styleCss.marginLeft = props.l;
    if (props.r) styleCss.marginRight = props.r;
    if (props.p) styleCss.padding = props.p;
    if (props.pv) styleCss.paddingVertical = props.pv;
    if (props.ph) styleCss.paddingHorizontal = props.ph;
    if (props.pt) styleCss.paddingTop = props.pt;
    if (props.pb) styleCss.paddingBottom = props.pb;
    if (props.pl) styleCss.paddingLeft = props.pl;
    if (props.pr) styleCss.paddingRight = props.pr;
    if (props.m) styleCss.margin = props.m;
    if (props.mv) styleCss.marginVertical = props.mv;
    if (props.mh) styleCss.marginHorizontal = props.mh;
    if (props.mt) styleCss.marginTop = props.mt;
    if (props.mb) styleCss.marginBottom = props.mb;
    if (props.ml) styleCss.marginLeft = props.ml;
    if (props.mr) styleCss.marginRight = props.mr;

    const style = [props.style ?? {}, styleCss];
    //  内容view
    let contentView = <View style={style}/>;
    /**
     * children 多内容
     */
    if (props.children) contentView = <View style={style} onLayout={props.onLayer}>{props.children}</View>;
    /**
     * 是否存在点击事件
     */
    if (typeof props.onPress === 'function' || typeof props.onLongPress === "function") {
        /**
         * 获取 flex
         * 当style设置了flex，TouchableOpacity也需要设置flex
         */
        let flex = 0, propsStyle: any = props.style;
        const getFlex = (data) => {
            let result;
            for (let name in data) {
                if (name !== 'flex') continue;
                result = data[name];
            }
            return result;
        }
        if (utils.isArray(propsStyle)) {
            propsStyle.map((item) => {
                const data = getFlex(item);
                if (data) flex = data;
            })
        } else flex = getFlex(propsStyle);
        const styleFlex = flex ? {flex: flex} : undefined;

        return <TouchableOpacity
            style={styleFlex} activeOpacity={1}
            onPress={(event) => {
                if (!hasContinuousClick) {
                    const time = new Date().getTime();
                    if (timer > time) return;
                    setTimer(time + notPressTimer);
                }
                if (typeof props.onPress === "function") props.onPress(event);
            }}
            onLongPress={event => {
                if (typeof props.onLongPress === "function") props.onLongPress(event);
            }}
        >
            {contentView}
        </TouchableOpacity>
    }

    return contentView
}

export default BasicView