import * as React from "react";
import {Platform, StyleProp, TextStyle, View, Image} from "react-native";
import {reduxTools} from '@yoronsoft/js-utils';
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import app from "../app";
import Basic from "../basicPage";
import {INavBottomTabs, NavBottomTabs, NavBottomTabsData, NavBottomTabsParams} from "./nav";
import {ThemeCss} from "../app";
import {appHeaderBar} from "../app/header";
import {getConfigName} from "./config";


const configName = `${getConfigName}_bottomTabs`;

class BottomTabs implements INavBottomTabs {
    private readonly list: NavBottomTabsData[]

    constructor() {
        this.list = [];
        //  没有，则创建第一个
        if (!this.hasDisplay()) reduxTools.create(configName, true);
    }

    hasDisplay(): boolean {
        const data: boolean | undefined = reduxTools.get(configName)
        return typeof data === 'boolean' ? data : false;
    }

    setIcon(pageName: string, component: any, title: string, data: string, params?: NavBottomTabsParams | undefined): void {
        params = params || {};
        this.list.push({
            type: 'icon', name: pageName, title, component, data,
            size: params.size ?? 16,
            select: params.select ?? data,
            titleSize: params.titleSize ?? 14,
            titleStyle: params.titleStyle ?? {},
            barStyle: params.barStyle,
            hasWeight: params.hasWeight
        })
    }

    setImage(pageName: string, component: any, title: string, data: number, params?: NavBottomTabsParams | undefined): void {
        params = params || {};
        this.list.push({
            type: 'image', name: pageName, title, component, data,
            size: params.size ?? 20,
            select: params.select ?? data,
            titleSize: params.titleSize ?? 14,
            titleStyle: params.titleStyle ?? {},
            barStyle: params.barStyle,
            hasWeight: params.hasWeight
        })
    }

    end(style?: StyleProp<TextStyle>): React.ReactNode {
        return <BottomTabsEnd list={this.list} style={style ?? {}}/>;
    }

}

const navBottomTabs: NavBottomTabs = {
    show: (): void => {
        app.emitter.set(configName, true);
    },
    hide: (): void => {
        app.emitter.set(configName, false);
    },
    hasDisplay: (): boolean => {
        return reduxTools.get(configName)
    }
}

type BottomTabsEndProps = {
    list: NavBottomTabsData[]
    style: StyleProp<TextStyle>
}


/**
 * 底部导航
 * @param props
 * @constructor
 */
const BottomTabsEnd: React.FC<BottomTabsEndProps> = (props) => {
    const css = app.theme.useGet<ThemeCss>();
    const [hasDisplay, setHasDisplay] = React.useState(true);
    React.useLayoutEffect(() => {
        const emitterData = app.emitter.get(configName, (data: boolean) => {
            setHasDisplay(data);
            reduxTools.update(configName, data);
        })
        return () => {
            emitterData.remove();
        }
    }, [])
    const Tabs = createBottomTabNavigator();
    const propsMain = props;
    return <Tabs.Navigator
        screenOptions={{headerShown: false}}
        tabBar={props => {
            if (!hasDisplay) return <View/>;
            const style = {width: css.width, height: css.nav.height, backgroundColor: css.nav.bg, paddingBottom: 0};
            if (Platform.OS === "ios" && parseFloat(Platform.Version) >= 10) {
                style.height = style.height + 20;
                style.paddingBottom = 20;
            }
            return <View style={[css.rowAroundCenter, style, propsMain.style]}>
                {tabItemView(css, propsMain.list, props.state, props.navigation)}
            </View>
        }}
    >
        {props.list.map((item, key) => {
            return <Tabs.Screen key={key} name={item.name} component={item.component} options={{title: item.title}}/>
        })}
    </Tabs.Navigator>;
}
/**
 * 底部导航Item
 * @param css
 * @param list              数据列表
 * @param state
 * @param navigation
 */
const tabItemView = (css: ThemeCss, list: NavBottomTabsData[], state, navigation) => {
    const length = state.routes.length;
    return state.routes.map((item, key) => {
        const tabItem: NavBottomTabsData = list[key];
        const hasSelect = state.index === key;
        const params = {color: css.nav.color, data: tabItem.data};
        const style = {width: css.width / length, height: css.nav.height, paddingVertical: 5};
        if (hasSelect) {
            params.color = css.nav.selectColor;
            params.data = tabItem.select;
        }
        return <Basic.Text key={key} onPress={() => {
            app.header.setBar(tabItem.barStyle ?? app.header.getDefaultBar());
            app.emitter.set(appHeaderBar, true);
            navigation.navigate(item.name)
        }}>
            <View style={[css.colAroundCenter, style]}>
                {
                    tabItem.type === 'icon' ?
                        <Basic.Icon name={tabItem.data.toString()} size={tabItem.size}
                                    color={params.color}/> : undefined
                }
                {
                    tabItem.type === 'image' ?
                        <Image source={Number(tabItem.data)} style={{
                            width: tabItem.size,
                            height: tabItem.size,
                        }}/> : undefined
                }
                <Basic.Text text={tabItem.title} size={tabItem.titleSize} color={params.color}
                            style={tabItem.titleStyle} weight={tabItem.hasWeight ? 'bold' : undefined}/>
            </View>
        </Basic.Text>
    })
}
export default BottomTabs;
export {
    navBottomTabs,
}
export type {
    INavBottomTabs, NavBottomTabsData, NavBottomTabsParams,
}