import * as React from 'react';

import { SafeAreaView,
Text,ImageBackground,StatusBar,ScrollView,useWindowDimensions,FlatList,Pressable,To
uchableOpacity,Image,View,Dimensions ,StyleSheet} from 'react-native';
import { TabView, SceneMap,TabBar } from 'react-native-tab-view';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import LinearGradient from 'react-native-linear-gradient';
import {Picker} from "@react-native-picker/picker"
function FirstRoute() {

const images = [

{id: '1', image:"../assets/images/Episode.png" ,title:'Season 1',name:'1. To

You, in 2000 Years: The Fall of Shiganshina, Part 1'},
]

const [selectedValue, setSelectedValue] = useState("java");

const[season,setSeason]=useState([{title:"Attack on Titan-S1"},{title:"Attack on
Titan-S2"},{title:"Attack on Titan-S3"} ])
const pickerRef = useRef();
const WIDTH=Dimensions.get('window').width;
const HEIGHT=Dimensions.get('window').height;

return(

<View style={styles.browseScreenBody} >

<View style={styles.browseScreenAvatarFlatlist}>
<Image
style={[styles.browserScreenAvatarImage]}
resizeMode='contain'
source={require("../assets/images/Episode1.png")}
></Image>
</View>
<View style={styles. browseScreenTextElement}>
<Text style={styles.avatarText}>{images[0].name}</Text>
</View>
<View style={styles. browseScreenTittleTextElement}>
<Text style={styles.tittleText}>{images[0].title}</Text>
</View>

</View>

);

function click(avatar) {

navigation.navigate('BrowserChildScreen',{avatar})
}
}

const SecondRoute = () => (

<SafeAreaView style={{ flex: 1, backgroundColor: '#000000' }} />
 );

const ThirdRoute = () => (

<SafeAreaView style={{ flex: 1, backgroundColor: '#000000' }} />
);

const renderScene = SceneMap({

first: FirstRoute,
second: SecondRoute,
third:ThirdRoute,
});
const renderTabBar = props => (
<TabBar
{...props}
indicatorStyle={{ backgroundColor: '#6B22FF' }}
style={{ backgroundColor: '#000000',height:50, }}
/>
);

export default function App({navigation}) {

const layout = useWindowDimensions();

const [index, setIndex] = React.useState(0);

const [routes] = React.useState([
{ key: 'first', title: 'Episodes'},
{ key: 'second', title: 'More likethis' },
{ key: 'third', title: 'Tab3' },
]);
const background=[
{title:'Attack on Titan ',text:'Adventure • Fantasy', japanese:'進撃の巨人'}
]

return (
<ScrollView>
<ScrollView vertical style={styles.screenBody} >
<SafeAreaView style={styles.homeScreenContainer}>
<StatusBar hidden/>
<ImageBackground source={require('../assets/images/Episode.png')}
style={styles.TempImage}>
<LinearGradient
colors={['black','transparent' ,'transparent','black']}
style={{
position: 'absolute',
left: 0,
right: 0,
top: 0,
height: '100%'
}}

/>
<MaterialIcons name="arrow-back-ios" size={25} color="#fff"
style={styles.leftIcon} />
<MaterialIcons name="bookmark-outline" size={25} color="#fff"
style={styles.bookMarkIcon} />
<View style={styles.backgroundTextContainer}>
<Text style={styles. backgroundJapaneseText}>
 {background[0].japanese}
</Text>
<Text style={styles. backgroundTitleText}>
{background[0].title}
</Text>
<Text style={styles. backgroundJapaneseText}>
{background[0].text}
</Text>
</View>
<Text style={styles.SeriesText}>
Series
</Text>

</ImageBackground>
<View style={styles.lineViewContainer}>
<View style={styles.lineStyle}/>
<View style={{flex:1,flexDirection:'row'}}>
<Text style={styles.showDetailText}>5 Seasons</Text>
<Text style={styles.showDetailText}>70 Episodes</Text>
<Text style={styles.showDetailText}>Spring 2013</Text>
</View>
<View style={styles.lineStyle}/>
</View>
<View>

<Pressable style={styles.nextButton}>

<MaterialIcons name="play-circle-filled" size={30} color="#000"

style={styles.outerCircle} />

<Text style={styles.buttonText}>Start Watching</Text>

</Pressable>
<Text style={styles.DescriptionText}>Centuries ago, mankind was slaughtered
to near extinction by monstrous humanoid creatures called titans, forcing humans to
hide in fear behind enormous concentric walls. What makes these giants truly
terrifying is ...</Text>
<Text style={styles.readMoreText}>read more</Text>
</View>

<View style={styles.contentView} >

<Picker
selectedValue={selectedValue}
style={{ height: 50, width: 320 }}
onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
style={{color:'#58FFF9', width:300,fontFamily:'serif'}}
mode={'dropdown'}
dropdownIconColor={'#58FFF9'}
>
{
season.map(season=>(
<Picker.Item label={season.title} value={season.title}
key={season.title}/>
))
}
 </Picker>
</View>

</SafeAreaView>
</ScrollView>
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
renderTabBar={renderTabBar}
initialLayout={{ width: layout.width }}
navigation={navigation }
style={{flex:1,height:300}}

/>

</ScrollView>

);
}

const styles = StyleSheet.create({

screenBody: {

width: '100%',
height: '100%',
backgroundColor: '#000',
},
homeScreenContainer:{
backgroundColor:'#000',
flex: 1,
},
textOverImage:{
fontWeight: 'bold',
color: 'white',
position: 'absolute', // child
bottom: 0, // position where you want
left: 0
},

lineViewContainer:{

marginHorizontal:20
},
lineStyle:{
flex:1,
height:1,
backgroundColor:'rgba(255, 255, 255, 0.4)',
marginVertical:20
},
backgroundTextContainer:{
position: 'absolute',
left: 20,
bottom: 20,
},
backgroundTitleText:{
 fontSize:24,
color:'#fff',
fontWeight: 'bold',

},
backgroundJapaneseText:{
fontSize:16,
color:'#fff',
fontWeight: 'bold',

},

readMoreText:{

fontSize:14,
fontFamily:'serif',
color: '#fff',
marginTop:0,
fontWeight: 'bold',
marginHorizontal:20
},

DescriptionText:{

fontSize:14,
fontFamily:'serif',
color: 'rgba(255, 255, 255, 0.8)',
marginTop:20,
marginHorizontal:20
},
nextButton: {
flexDirection:'row',
backgroundColor: '#F9CB24',
borderRadius: 8,
alignItems:'center',

width: 320,
height: 44,
marginTop: 10,
marginLeft: 20,
marginRight: 20,

},
buttonText: {
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
fontFamily: 'serif',
fontSize: 16,
color: '#101010',
fontWeight: 'bold',
letterSpacing: 0.02,
marginLeft:124,
},
TempImage:{

height: 480,
width:360,
 },
showDetailText:{
fontSize:14,
fontFamily:'serif',
color: 'rgba(255, 255, 255, 0.8)',
marginRight:55
},
outerCircle:{
marginLeft:92,

},
leftIcon:{
position: 'absolute',
left: 20,
top: 20,
},
bookMarkIcon:{
position: 'absolute',
right: 20,
top: 20,

},
SeriesText:{
position: 'absolute',
right: 20,
bottom: 20,
color:'#58FFF9',
fontSize:14,
fontWeight: 'bold'
},
contentView:{
marginHorizontal:20,
borderColor:'#58FFF9',
borderWidth:1,
borderRadius:8,
alignItems:'center',

marginTop:40,
flexDirection:'row'
},
contentText:{
color:'#58FFF9',
fontSize:16,
marginHorizontal:20,
marginVertical:15
},

browseScreenTextElement:{

left:60,
textDecorationLine:'line-through'
},

browseScreenTittleTextElement:{
 bottom:218,
left:60,

alignItems:'flex-start'
},
tittleText:{
color:'#fff',
fontFamily:'serif',
fontSize:16,
letterSpacing:0,
right:40,
justifyContent:'center',
alignItems:'center',

},

avatarText:{
color:'#fff',
fontFamily:'serif',
fontSize:12,
letterSpacing:0,
right:40,
justifyContent:'center',
alignItems:'center',
},

browseScreenBody: {
position: 'absolute',
width: '100%',
height: '100%',
backgroundColor: '#101010',
},

browserScreenAvatarImage:{
flex:1,
width: 216,
height: 148,
margin:0,
borderRadius:8,
justifyContent: 'center',
alignItems: 'center',
resizeMode: 'contain',

},
browseScreenAvatarFlatlist:{
height:250,
width:250,
flex: 1,
top:25,
padding:1,
flexDirection: 'row',
margin:10,
resizeMode: 'contain',

},

}
)