/*
 * @Author: zogpap zogpap@163.com
 * @Date: 2022-05-31 15:37:39
 * @LastEditors: zogpap zogpap@163.com
 * @LastEditTime: 2022-06-06 16:05:28
 * @FilePath: /YMJRN/src/common/ui/react-native-head-tab-view-4_0_0/react-native-scrollable-tab-view-collapsible-header/createHeaderTabsComponent.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import React, { useRef,useState} from 'react';
import {
    StyleSheet,
    View,
} from 'react-native';
import { GestureContainer, CollapsibleHeaderProps, GestureContainerRef } from '../react-native-head-tab-view-4_0_0'
import ScrollableTabView, { DefaultTabBar, ScrollableTabViewProperties } from '../react-native-scrollable-tab-view'
import Animated, { useSharedValue, useAnimatedStyle, useDerivedValue, interpolate, Extrapolate, runOnJS } from 'react-native-reanimated'

type ZTabViewProps = Omit<ScrollableTabViewProperties, 'ref'> & CollapsibleHeaderProps
type ForwardTabViewProps = ZTabViewProps & { forwardedRef: React.Ref<ScrollableTabView>, Component: typeof ScrollableTabView }

export default function createHeaderTabsComponent(Component: typeof ScrollableTabView, config?: {}): React.ForwardRefExoticComponent<React.PropsWithoutRef<ZTabViewProps> & React.RefAttributes<ScrollableTabView>> {

    return React.forwardRef((props: ZTabViewProps, ref) => {
        return <CollapsibleHeaderTabView {...props} forwardedRef={ref} Component={Component} />
    });

}

const CollapsibleHeaderTabView: React.FC<ForwardTabViewProps> = (props: ForwardTabViewProps) => {
    const [scrollTrans, setScrollTrans] = useState(useSharedValue(0))
    const mRef = useRef<GestureContainerRef>()

    const transYValue = useDerivedValue(() => {
        props.getScrollValue&&runOnJS(props.getScrollValue)(scrollTrans.value);
        return scrollTrans.value;
    })

    const _onChangeTab = (e: any) => {
        props.onChangeTab && props.onChangeTab(e)
        mRef.current && mRef.current.setCurrentIndex(e.i)
    }

    const makeScrollTrans = (scrollTrans: Animated.SharedValue<number>) => {
        setScrollTrans(scrollTrans);
    }

    const _renderTabBar = (mProps: any) => {
        if (props.renderTabBar) return props.renderTabBar(mProps)
        return <DefaultTabBar {...mProps} style={styles.tabbarStyle} />
    }

    const renderTabView = (mProps: {
        renderTabBarContainer: any,
    }) => {
        const { Component } = props
        return <Component
            ref={props.forwardedRef}
            tabBarBackgroundColor={'transparent'}
            {...props}
            renderTabBar={(tabbarProps) => {
                const newProps = { ...tabbarProps }
                delete tabbarProps.scrollValue
                return mProps.renderTabBarContainer(_renderTabBar(newProps))
            }}
            onChangeTab={_onChangeTab}
        />
    }

    return <GestureContainer
        ref={mRef}
        initialPage={props.initialPage || 0}
        renderTabView={renderTabView}
        makeScrollTrans={props.getScrollValue?makeScrollTrans:undefined}
        {...props} />
}


const styles = StyleSheet.create({
    tabbarStyle: {
        backgroundColor: '#fff'
    }
})