import React, { useCallback, useEffect, useRef, useState } from 'react'
import { Dimensions, FlatList, StyleSheet, View } from 'react-native'
import SegmentedControl from '@react-native-community/segmented-control'
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import { useSelector } from 'react-redux'
import { Feather } from '@expo/vector-icons'
import Timeline from '@components/Timelines/Timeline'
import sharedScreens from '@screens/Shared/sharedScreens'
import {
getLocalUrl,
getRemoteUrl,
InstancesState
} from '@utils/slices/instancesSlice'
import { useTheme } from '@utils/styles/ThemeManager'
import { useNavigation } from '@react-navigation/native'
import getCurrentTab from '@utils/getCurrentTab'
import PleaseLogin from '@components/PleaseLogin'
const Stack = createNativeStackNavigator()
const Page = ({
item: { page },
localRegistered
}: {
item: { page: App.Pages }
localRegistered: InstancesState['local']['url'] | undefined
}) => {
return (
{localRegistered || page === 'RemotePublic' ? (
) : (
)}
)
}
export interface Props {
name: 'Screen-Local-Root' | 'Screen-Public-Root'
content: { title: string; page: App.Pages }[]
}
const Timelines: React.FC = ({ name, content }) => {
const navigation = useNavigation()
const { mode, theme } = useTheme()
const localRegistered = useSelector(getLocalUrl)
const publicDomain = useSelector(getRemoteUrl)
const [segment, setSegment] = useState(0)
const [renderHeader, setRenderHeader] = useState(false)
useEffect(() => {
const nbr = setTimeout(() => setRenderHeader(true), 50)
return
}, [])
const horizontalPaging = useRef(null!)
const onChangeSegment = useCallback(({ nativeEvent }) => {
horizontalPaging.current.scrollToIndex({
index: nativeEvent.selectedSegmentIndex
})
}, [])
const onPressSearch = useCallback(() => {
navigation.navigate(getCurrentTab(navigation), {
screen: 'Screen-Shared-Search'
})
}, [])
const flGetItemLayout = useCallback(
(data, index) => ({
length: Dimensions.get('window').width,
offset: Dimensions.get('window').width * index,
index
}),
[]
)
const flKeyExtrator = useCallback(({ page }) => page, [])
const flRenderItem = useCallback(
({ item, index }) => {
if (!localRegistered && index === 0) {
return null
}
return
},
[localRegistered]
)
const flOnScroll = useCallback(
({ nativeEvent }) =>
setSegment(
nativeEvent.contentOffset.x <= Dimensions.get('window').width / 2
? 0
: 1
),
[]
)
return (
(
),
headerRight: () => (
)
})
}}
>
{() => {
return (
)
}}
{sharedScreens(Stack)}
)
}
const styles = StyleSheet.create({
segmentsContainer: {
flexBasis: '60%'
},
flatList: {
width: Dimensions.get('window').width,
height: '100%'
}
})
export default React.memo(Timelines, () => true)