Toast

import React, { PureComponent } from 'react';
import { ListItem, Thumbnail, Left, Body, Button, Footer, Icon, Text, Toast } from 'native-base'
import { Image, TouchableOpacity, View, StyleSheet, ScrollView } from 'react-native'
import { Avatar } from 'react-native-elements';
import analytics from '@react-native-firebase/analytics';

import moment from 'moment/min/moment-with-locales'
moment.locale('id')


export default class extends PureComponent {
    render() {
      let jam = moment(this.props.item.tgl).fromNow(true)
      // jam = jam.replace('hours ago', 'j')
      if (this.props.index===0) {
        return(
          <View style={{flex: 1}}>
          <View style={darkStyles.tabs}>
            <ScrollView
            horizontal
            >
            <Button transparent style={darkStyles.buttonMainTabs}
              onPress={() => {
               this.props.navigation.navigate('HomeScreen')
              }}
            >


				// Toast Error

              <Text style={darkStyles.textMainTabs}>Terbaru</Text>
            </Button>
            <Button transparent style={darkStyles.buttonTabs}
              onPress={() => {
                Toast.show({text: 'Menu belum tersedia.', buttonText: 'OK'})
                analytics().logEvent('pilih_kategori_politik')
                // this.props.navigation.navigate('Tab1')
              }}
            >
              <Text style={darkStyles.textTabs}>Politik</Text>
            </Button>
            <Button transparent style={darkStyles.buttonTabs}
              onPress={() => {
                Toast.show({text: 'Menu belum tersedia.', buttonText: 'OK'})
                analytics().logEvent('pilih_kategori_ekonomi')
                // this.props.navigation.navigate('Tab2')
              }}
            >
              <Text style={darkStyles.textTabs}>Ekonomi</Text>
            </Button>
            <Button transparent style={darkStyles.buttonTabs}
              onPress={() => {
                Toast.show({text: 'Menu belum tersedia.', buttonText: 'OK'})
                analytics().logEvent('pilih_kategori_teknologi')
                // this.props.navigation.navigate('Tab3')
              }}
            >
              <Text style={darkStyles.textTabs}>Teknologi</Text>
            </Button>
            <Button transparent style={darkStyles.buttonTabs}
              onPress={() => {
                Toast.show({text: 'Menu belum tersedia.', buttonText: 'OK'})
                analytics().logEvent('pilih_kategori_olahraga')
                // this.props.navigation.navigate('Tab4')
              }}
            >
              <Text style={darkStyles.textTabs}>Olahraga</Text>
            </Button>
            </ScrollView>
          </View>
          <View style={darkStyles.container}>
           <TouchableOpacity
             onPress={() => {
              analytics().logEvent('touch_headline')
              this.props.navigation.navigate('DescScreen', { item: this.props.item  })
            }}>
            <Image source={{uri: this.props.item.ilustrasi}} style={darkStyles.imageHeadline} />
            <View style={darkStyles.backgroundHeadline}/>

            <Text numberOfLines={2} style={darkStyles.judulHeadline}>{ this.props.item.judul }</Text>
            <Text note numberOfLines={1} style={darkStyles.sumberHeadline}>{ this.props.item.sumber }</Text>
            <View style={darkStyles.containerJamImpresi}>
              <View style={darkStyles.viewJam}>
                <Icon name="time" style={darkStyles.iconHeadlineJam} />
                <Text style={darkStyles.textHeadlineJam}>{jam}</Text>
              </View>
              <View style={darkStyles.viewImpresi}>
                <Icon name="eye" style={darkStyles.iconHeadlineEye} />
                <Text style={darkStyles.textHeadlineEye}>{this.props.item.impresi}</Text>
              </View>
           </View>
           </TouchableOpacity>
           <TouchableOpacity
            onPress={() => {
              analytics().logEvent('touch_user_settings')
              this.props.navigation.navigate('UserSettingScreen')
            }}
            style={darkStyles.avatar}>
           <Avatar
              rounded
              size={'small'}
              icon={{name:'person'}}
              activeOpacity={0.7}
              />
          </TouchableOpacity>
          </View>
        </View>
        )
      }

      return (
        <View style={darkStyles.container}>
          <TouchableOpacity>
            <ListItem thumbnail onPress={() => {
              analytics().logEvent('touch_berita')
              this.props.navigation.navigate('DescScreen', { item: this.props.item  })
            }}>
              <Left>
                <Thumbnail square large source={{ uri: this.props.ilustrasi }} style={{borderRadius:16}}/>
              </Left>
              <Body style={darkStyles.body}>
                <Text numberOfLines={2} style={darkStyles.judulDesc}>{this.props.judul}</Text>
                <Text note numberOfLines={1} style={darkStyles.linkDesc}>{this.props.sumber}</Text>
                <Footer style={darkStyles.footerDesc}>
                  <Button transparent style={darkStyles.buttonJam}>
                    <Icon name="time" style={darkStyles.iconDescJam}/>
                    <Text numberOfLines={1} style={darkStyles.textDescJam}>{jam}</Text>
                  </Button>
                  <Button transparent style={darkStyles.buttonImpresi}>
                    <Icon name="eye" style={darkStyles.iconDescEye}/>
                    <Text style={darkStyles.textDescEye}>{this.props.impresi}</Text>
                  </Button>
                </Footer>
              </Body>
            </ListItem>
          </TouchableOpacity>
         </View>
      )
    }
  }

  // dark mode
  const darkStyles = StyleSheet.create({
    tabs: {
      height: 52,
      backgroundColor: '#2E3136',
      flexDirection: 'row'
    },
    buttonMainTabs: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      height: 52,
      borderBottomColor: '#2795D9',
      borderBottomWidth: 5
    },
    textMainTabs: {
      color: '#2795D9',
      fontSize: 15,
      fontWeight: '600',
      textTransform: 'capitalize'
    },
    buttonTabs: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      height: 52,
      backgroundColor: '#2E3136'
    },
    textTabs: {
      color: 'white',
      fontSize: 15,
      fontWeight: '600',
      textTransform: 'capitalize'
    },
    container: {
      flex: 1,
      backgroundColor: '#2E3136'
    },
    backgroundHeadline: {
      backgroundColor:'black',
      position:'absolute',
      width:'100%',
      height:220,
      opacity: 0.7
    },
    imageHeadline: {
      height: 220,
      width: null,
      flex: 1
    },
    judulHeadline: {
      marginHorizontal: 10,
      fontSize: 25 ,
      color: 'white',
      position: 'absolute',
      textAlign: 'center',
      alignSelf: 'center',
      marginTop: 70
    },
    sumberHeadline: {
      fontSize: 14 ,
      position: 'absolute',
      textAlign: 'center',
      lineHeight: 205,
      alignSelf: 'center',
      fontWeight: '500',
      marginTop: 45
    },
    avatar: {
      position: 'absolute',
      paddingTop: 12,
      paddingRight:12,
      alignSelf: 'flex-end'
    },
    containerJamImpresi: {
      flex: 1,
      flexDirection: 'row',
      position: 'absolute',
      alignItems: 'center',
      justifyContent: 'center',
      marginTop: 175,
      marginHorizontal: 100,
      flexDirection: 'row'
    },
    viewJam: {
      flex: 1,
      alignItems: 'center',
      flexDirection: 'row'
    },
    iconHeadlineJam: {
      color: '#FF7F00',
      fontSize: 17
    },
    iconHeadlineEye: {
      color: '#5BC97F',
      fontSize: 17
    },
    textHeadlineJam: {
      color: '#FF7F00',
      fontSize: 10,
      marginLeft: 10,
      fontWeight: '400',
      textTransform: 'capitalize'
    },
    textHeadlineEye: {
      color: '#5BC97F',
      fontSize: 10,
      marginLeft: 10,
      fontWeight: '400'
    },
    viewImpresi: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'row'
    },
    body : {
      marginTop: -15
    },
    judulDesc: {
      fontSize: 15,
      color: 'white',
      fontWeight: '500'
    },
    linkDesc: {
      fontSize: 12,
    },
    footerDesc: {
      flex: 1,
      backgroundColor: 'transparent',
      marginVertical: -20,
      marginBottom: -30,
      marginLeft: -17
    },
    buttonJam: {
      flex: 1,
      marginRight: 105,
      marginTop: 8
    },
    iconDescJam: {
      fontSize: 15,
      color: '#FF7F00',
    },
    iconDescEye: {
      fontSize: 15,
      color: '#5BC97F'
    },
    textDescJam: {
      right: 27,
      fontSize: 9,
      color: '#FF7F00',
      fontWeight: '500',
      textTransform: 'capitalize'
    },
    textDescEye: {
      right: 27,
      fontSize: 10,
      color: '#5BC97F',
      fontWeight: 'normal',
      textTransform: 'capitalize'
    },
    buttonImpresi: {
      flex: 1,
      right: 105,
      marginTop: 8
    }
  })

  const lightStyles = StyleSheet.create({
    container: {
      flex: 1,
    },
    imageHeadline: {
      height: 220,
      width: null,
      flex: 1
    },
    judulHeadline: {
      fontSize: 30 ,
      color: 'white',
      position: 'absolute',
      textAlign: 'center',
      lineHeight: 145,
      alignSelf: 'center',
      marginHorizontal: 5
    },
    sumberHeadline: {
      fontSize: 14 ,
      position: 'absolute',
      textAlign: 'center',
      lineHeight: 205,
      alignSelf: 'center',
      fontWeight: '500'
    },
    containerJamImpresi: {
      flex: 1,
      flexDirection: 'row',
      position: 'absolute',
      alignItems: 'center',
      justifyContent: 'center',
      marginTop: 140,
      marginHorizontal: 100,
      flexDirection: 'row'
    },
    viewJam: {
      flex: 1,
      alignItems: 'center',
      flexDirection: 'row'
    },
    iconHeadlineJam: {
      color: '#FF7F00',
      fontSize: 17
    },
    iconHeadlineEye: {
      color: '#5BC97F',
      fontSize: 17
    },
    textHeadlineJam: {
      color: '#FF7F00',
      fontSize: 10,
      marginLeft: 10,
      fontWeight: '400'
    },
    textHeadlineEye: {
      color: '#5BC97F',
      fontSize: 10,
      marginLeft: 10,
      fontWeight: '400'
    },
    viewImpresi: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'row'
    },
    body : {
      marginTop: -15
    },
    judulDesc: {
      fontSize: 15,
      fontWeight: '500'
    },
    linkDesc: {
      fontSize: 12,
    },
    footerDesc: {
      flex: 1,
      backgroundColor: 'transparent',
      marginVertical: -20,
      marginBottom: -30,
      marginLeft: -17
    },
    buttonJam: {
      flex: 1,
      marginRight: 105,
      marginTop: 8
    },
    iconDescJam: {
      fontSize: 15,
      color: '#FF7F00',
      fontWeight: 'bold'
    },
    iconDescEye: {
      fontSize: 15,
      color: '#5BC97F',
      fontWeight: 'bold'
    },
    textDescJam: {
      right: 27,
      fontSize: 9,
      color: '#FF7F00',
      fontWeight: 'bold'
    },
    textDescEye: {
      right: 27,
      fontSize: 10,
      color: '#5BC97F',
      fontWeight: 'normal'
    },
    buttonImpresi: {
      flex: 1,
      right: 105,
      marginTop: 8
    }
  })