import {ScrollView, Text, useWindowDimensions, View} from 'react-native';
import {SceneMap, TabBar, TabView} from "react-native-tab-view";
import {useState} from "react";
import ConnectionStore from "../../store/connectionStore";
import {useSnapshot} from "valtio";

const Layout = ({title, children}) => {
    const {internet} = useSnapshot(ConnectionStore)
    return (
        <>
            {
                !internet &&
                <View style={{backgroundColor: '#E5352D', opacity: .8}}>
                    <Text style={{fontSize: 16, fontWeight: 'bold', paddingLeft: 20, paddingTop: 20, paddingBottom: 20, color: "#fefefe"}}>Нет подключения к сети, данные в офлайн режиме</Text>
                </View>
            }

            <Text style={{fontSize: 48, fontWeight: 'bold', paddingLeft: 20, paddingTop: 60}}>{title}</Text>

            {children}
        </>
    )
}
const renderTabBar = props => (
    <TabBar
        {...props}
        indicatorStyle={{ backgroundColor: '#E5352D' }}
        style={{ backgroundColor: "transparent" }}
        renderLabel={
            ({route, focused }) => (
                <Text style={focused ? {color: "#E5352D", opacity: 1, fontWeight: "bold"} : {color: "#646567", opacity: .4, fontWeight: "bold"}}>{route.title}</Text>
            )
        }
    />
);

export const LayoutWithTabs = ({components, primaryIdx}) => {
    const sceneData = Object.fromEntries(components.map(d => [d.key, d.elem]))
    const sceneRenderer = SceneMap(
       sceneData
    )
    const layout = useWindowDimensions();

    const [index, setIndex] = useState(primaryIdx || 0);
    const [routes] = useState(components.map(elem => ({key: elem.key, title: elem.title}
    ))
    );

    return (
        <Layout title={routes[index].title}>
            <TabView
                navigationState={{index, routes}}
                renderScene={sceneRenderer}
                onIndexChange={setIndex}
                initialLayout={{ width: layout.width }}
                renderTabBar={renderTabBar}>
            </TabView>
        </Layout>
    )
}

export const LayoutScrollView = ({children, title}) => {
    return (
        <Layout title={title}>
            <ScrollView style={{padding: 20}}>
                {children}
            </ScrollView>
        </Layout>
    )
}

export default Layout;