
import { View, Text, Image } from '@tarojs/components'
import './index.less'
import Taro from '@tarojs/taro'
import { Component } from 'react';
import searchPng from '../../icon/search.png'
import { observer, inject } from 'mobx-react'
import indexStore from '@src/store/index';
/**顶部自定义导航
 * 
 */
type Props = {
    children?: JSX.Element,             // 
    backgroundColor?: string,           // navbar 背景色
    color?: string                      // 头部显示内容 颜色
    fontSize?: number,                  // 头部显示内容字体大小
    title?: string,                     // 头部显示内容
    tab?: boolean,                      // 是否是tab类型
    tabVal?: {                          // tabs 内容
        text: number | string,                   // 展示内容
        value: number | string                   // 选中传回内容
    }[],
    tabSelect?: string,                   // tab默认展示第几个
    search?: boolean,                   // 是否展示搜索按钮
    searchBack?: boolean,            // 点击搜索触发
    isToBack?: boolean,                 // 是否可返回上一页
    zxTitle?: string,                   // 资讯头
    lastRead?: boolean,                 // 是否展示上次阅读
    isReloadBook?: boolean //是否阅读小说，小说展示小说名称
    store?: any,
    extraProp?: any,
    passThroughProps?: any
}


// function CustomNavbar(props: Props) {
//     let { children, title, color, fontSize, backgroundColor, tab = false, tabVal, search = false, searchBack = false, isToBack = false, isReloadBook = false } = props
//     interface Page {
//         props: {
//             store: {
//                 indexStore: {
//                     navBarTop: number,
//                 },
//                 bookStore: BookStore
//             },
//             extraProp: any,
//             passThroughProps: any
//         }
//     }


//     return Page
// }
interface CustomNavbar {
    props: Props
}
@inject('store')
@observer
class CustomNavbar extends Component {
    state = {
        navBar: 0,
        capsuleWidth: 0,
        navBarTop: 0,

    }
    componentDidMount() {
        const { indexStore: { navBarTop } } = this.props.store
        let buttonBounding = Taro.getMenuButtonBoundingClientRect()
        log(buttonBounding);
        let { height, top, width } = buttonBounding
        let navBar = (top - navBarTop) * 2 + height + 8
        this.setState({ capsuleWidth: width + 10, navBar, navBarTop })
        indexStore.setData({ navHeight: navBar + navBarTop + 5 })
    }

    selectHandle = (value: string | number) => {
        this.props.store.bookStore.setWorkDirection(value as 0 | 1)
    }
    //回上级
    gotoBack = () => {
        let pages = Taro.getCurrentPages(); //获取当前页面栈
        if (pages?.length > 1) {
            Taro.navigateBack()
        } else {
            this.gotoHome()
        }
    }
    //回主页
    gotoHome = () => {
        Taro.switchTab({
            url: '/pages/index/index'
        })
    }
    // 去搜索页面
    searchBackHandle = () => {
        Taro.navigateTo({
            url: '/pages/search/index'
        })
    }
    componentDidUpdate(props) {
        let oldNavBarTop = this.state.navBarTop
        let newNavBarTop = this.props.store.indexStore.navBarTop
        if (oldNavBarTop !== newNavBarTop) {
            let buttonBounding = Taro.getMenuButtonBoundingClientRect()
            log(buttonBounding);
            let { height, top, width } = buttonBounding
            this.setState({ capsuleWidth: width + 10, navBar: (top - newNavBarTop) * 2 + height + 8, navBarTop: newNavBarTop })

        }

    }

    render() {
        const { extraProp, ...passThroughProps } = this.props
        let { children, title, color, fontSize, backgroundColor, tab = false, tabVal, search = false, searchBack = false, isToBack = false, isReloadBook = false } = this.props
        let { navBar, capsuleWidth } = this.state
        const { indexStore: { navBarTop }, bookStore } = this.props.store
        let stateIndex = bookStore.workDirection
        return <View style={{ height: '100vh' }}>
            <View className='navbarWrap' style={{ paddingTop: navBarTop + 5, height: navBar, backgroundColor: isReloadBook ? bookStore.bookConfig?.off_on ? "#FFF" : "#363738" : "#FFF" }}>
                <View className='content'>
                    {
                        tab ? <View className="navbar">
                            <View className="tabs">
                                {
                                    tabVal?.map((item) => {
                                        return <View className={`tab ${item.value === stateIndex ? 'select' : ''}`} onClick={() => { this.selectHandle(item.value) }}>
                                            <Text>{item.text}</Text>
                                            {
                                                item.value === stateIndex && <View></View>
                                            }
                                        </View>
                                    })
                                }
                            </View>
                            {
                                search && <View className="search">
                                    <Image src={searchPng} className="searchImg" onClick={this.searchBackHandle} />
                                </View>
                            }
                        </View>
                            :
                            children ?
                                children :
                                <View className="title" style={{ color: color ? color : "#333333", fontSize: fontSize ? Taro.pxTransform(fontSize) : Taro.pxTransform(48) }}>
                                    {
                                        isToBack && <View className="back" >
                                            <View style={{ backgroundColor: color === '#fff' ? '#fff' : '#fff' }}>
                                                <View onClick={this.gotoBack} className="backBt">
                                                    <Image src={require('../../icon/backBlock.png')} className="searchImg" onClick={() => { }} />
                                                </View>
                                                <View className="line" style={{ backgroundColor: color === '#fff' ? '#e9e9e9' : '#e9e9e9' }}></View>
                                                <View onClick={this.gotoHome} className="homebt">
                                                    <Image src={require('../../icon/homeBlock.png')} className="searchImg" onClick={() => { }} mode='widthFix' />
                                                </View>
                                            </View>
                                        </View>
                                    }
                                    <View className="txt" style={{ color: color ? color : "#333333", textAlign: isReloadBook ? 'center' : "unset" }}>{isReloadBook ? bookStore.openBookData?.bookName : title}</View>
                                </View>
                    }
                </View>
                <View style={{ width: capsuleWidth + 'px' }}></View>
            </View>
            <View style={{ paddingTop: (navBar + navBarTop + 5), height: `clac(100vh - ${(navBar + navBarTop + 5)}px)`, boxSizing: 'border-box' }}>
                {/* <WrappedComponent {...passThroughProps} stateIndex={stateIndex} navBar={navBar + navBarTop + 5} />
                 */}
                {children}
            </View>
        </View>
    }
}
export default CustomNavbar