import * as React from "react";
import {StyleProp, TextStyle} from 'react-native';
import {createIconSet} from 'react-native-vector-icons'
import app from "../../app";
import {IProps} from "./icon";
import BasicText from "../text";
import BasicView from "../view";

const css = app.themeCss.get();
const BasicIcon: React.FC<IProps> = (props) => {

    //  是否可点击
    const [isPress, setIsPress] = React.useState(true);

    const styleCss: StyleProp<TextStyle> = {color: css.font.color, fontSize: 14};
    if (props.color) styleCss.color = props.color;
    if (props.size) {
        styleCss.fontSize = Number(props.size);
        styleCss.lineHeight = Number(props.size);
    }
    if (props.width) styleCss.width = props.width;
    if (props.height) styleCss.height = props.height;
    if (props.weight) styleCss.fontWeight = props.weight;
    if (props.lineHeight) styleCss.lineHeight = Number(props.lineHeight);
    if (props.textAlign) styleCss.textAlign = props.textAlign;
    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 IconsView = createIconSet(app.iconfont.getDefaultInit(), 'iconfont', 'iconfont.ttf');
    //  icon name
    let name = props.name;
    //  name前面带 icon- 则去掉
    if (name.indexOf('icon-') === 0) name = name.substring(5, name.length);
    const contentView = <BasicText style={[props.style, styleCss]}>
        <IconsView name={name} color={styleCss.color} size={styleCss.fontSize}/>
    </BasicText>;
    if (typeof props.onPress === "function" || typeof props.onLongPress === "function") {
        //  是否可以连续点击
        const hasPress = typeof props.hasPress === 'boolean' ? props.hasPress : true;
        //  不可点击时长
        const notPressTimer = Math.ceil(props.notPressTimer ? Number(props.notPressTimer) : 300);
        return <BasicView
            onPress={event => {
                //  false 则不可点击
                if (!isPress) return;
                if (!hasPress) {
                    setIsPress(false);
                    const timeout = setTimeout(() => {
                        clearTimeout(timeout);
                        setIsPress(true);
                    }, notPressTimer);
                }
                if (typeof props.onPress === "function") props.onPress(event);
            }}
            onLongPress={event => typeof props.onLongPress === "function" ? props.onLongPress(event) : undefined}
        >
            {contentView}
        </BasicView>
    }
    return contentView
}


export default BasicIcon