import React, { Component, Fragment } from 'react'
import {
  View, ScrollView, Dimensions, TouchableOpacity, StyleSheet, FlatList, RefreshControl, Animated, ActivityIndicator, Alert
} from 'react-native'
import Image from 'react-native-fast-image'
import ImageBackground from 'react-native-fast-image'
import Icon from '../../components/Icon'
import { Card, Body, Badge, ListItem, Left, Right, } from 'native-base'
import { BackgroundImage_RegisterForm } from '../../components/BackgroundImage_RegisterForm'
import LinearGradient from 'react-native-linear-gradient'
import { BackgroundImage } from '../../components/BackgroundImage'
import Text from '../../components/Text'
import { NavigationEvents } from 'react-navigation'
import { getNews, getNewsPage, getUserProfile, getNewsByProject, login } from '../../api/UserApi'
import { bindActionCreators } from 'redux'
import {
  appSetDevice,
  appSetPushToken,
  appSetToken,
  appSetUser,
  appCleanToken,
  appCleanUser,
  appSetNotification,
  appSetProjectID
} from '../../redux/app/action'
import { connect } from 'react-redux'
import moment from 'moment'
import IndicatorLoading from '../../components/IndicatorLoading'
import { loginWithFacebook } from '../../components/FacebookUtils'
import { from } from 'rxjs'
//import Slideshow from 'react-native-image-slider-show';
import { t, locale } from '../../utils/i18n'

const { height, width } = Dimensions.get('window')
console.disableYellowBox = true

class NewsScreen extends Component {
  constructor (props) {
    super(props)
    this.state = {
      isLoading: false,
      refreshing: false,
      auth: null,
      position: 0,
      user: {
        point: 0
      },
      interval: null,
      news_head: [{
        title: 'กำลังโหลดข้อมูลข่าว',
        content: 'กำลังโหลดข้อมูลข่าว',
        date: 'กำลังโหลดข้อมูลข่าว',
        is_new: false
      }],
      new_all: [{
        title: 'กำลังโหลดข้อมูลข่าว',
        content: 'กำลังโหลดข้อมูลข่าว',
        date: 'กำลังโหลดข้อมูลข่าว',
        is_new: false
      }],
      due_at: '',
      pending_payment: '',
      noti_count: 0,
      isFirstTime: true,
      user_point: 0,
      user_project_id: 0,
      isBilling: false,
      isMeter: false,
      isShipping: false,
      scrollY: new Animated.Value(0),
      loadMore: false,
      loadPage: 1,
      isLoadmore: false,
      fb_is_link: false,
      email: '',
    }

    this._onCarouselScroll = this._onCarouselScroll.bind(this)
    this.initData = this.initData.bind(this)
  }

  componentDidMount () {
    this.initData()
  }

  async getUser () {
    if (this.props.token != null) {
      return await getUserProfile()
        .then(res => {
          if (res.ok) {
            console.log("News:: res.data:")
            console.log(res.data)
            this.setState({
              pending_payment: res.data.pending_payment != null ? res.data.pending_payment : 0,
              noti_count: res.data.count_noti,
              user_point: res.data.point_balance,
              user_project_id: res.data.project_id,
              isBilling: res.data.user.enable_billing == null ? false : res.data.user.enable_billing,
              isMeter: res.data.user.enable_meter == null ? false : res.data.user.enable_meter,
              isShipping: res.data.user.enable_shipping == null ? false : res.data.user.enable_shipping,
              fb_is_link: res.data.user.fb_is_link,
              email: res.data.user.email,
            }, () => {
              if (res.data.message != null) {
                Alert.alert('แจ้งเตือนจากระบบ', res.data.message)
              }
            })
          } else {
            setTimeout(() => {
              this.setState({
                isLoading: false
              }, () => {
                this.props.appCleanUser()
                this.props.appCleanToken()
              })
            }, 600)

          }
        })
    }
    return true
  }

  async getAllNewsList () {
    // return getNews()
    return getNewsPage(this.state.loadPage)
      .then(res => {
        if ((res.data.data).length > 5) {
          var cut = []
          for (let index = 0; index < 5; index++) {
            cut.push(res.data.data[index])
          }

          this.setState({
            user: this.props.user,
            news_head: cut,
            new_all: res.data.data,
            refreshing: false,
            isLoading: false
          })
        } else {
          this.setState({
            news_head: res.data.data,
            new_all: res.data.data,
            refreshing: false,
            isLoading: false
          })
        }
      })
  }

  initData () {
    this.setState({ isLoading: true })
    Promise.all([
      this.getUser(),
      this.getAllNewsList()
    ])
      .then(() => {
        let user_id = 0
        let user_noti_id = 0
        if (this.props.token != null) {
          if (this.state.isFirstTime) {
            this.props.appSetNotification(this.state.noti_count)
            this.props.appSetProjectID(this.state.user_project_id)
            this.setState({ isFirstTime: false })
          }
        }

        if (this.props.user && this.props.user.id) {
          user_id = this.props.user.id
          user_noti_id = this.props.user.id
        } else if (this.props.device && this.props.device.customer_id) {
          user_noti_id = this.props.device.customer_id
        }

        if (this.props.token != null && this.props.user != null) {
          this.setState({
            auth: true,
          })
        } else {
          this.setState({
            auth: false
          })
        }

        this.setState({ isLoading: false })
      })
      .catch(() => {
        // console.log('catch ------------------>');
        // this.setState({isLoading:false})
        // this.props.appCleanUser()
        // this.props.appCleanToken()

        setTimeout(() => {
          this.setState({
            isLoading: false
          }, () => {
            this.props.appCleanUser()
            this.props.appCleanToken()
          })
        }, 600)
        this.initData()
      })
  }

  _onRefresh = () => {
    this.setState({
      refreshing: true, loadPage: 1, loadMore: false
    }, () => {
      this.initData()
    })
  }

  renderNativeItem = ({ item }) => (
    <TouchableOpacity style={{ padding: 8, backgroundColor: '#FFFFFF33', height: 85, borderWidth: 1, borderColor: 'white', borderRadius: 5, flexDirection: 'row' }}
                      onPress={() => {this.props.navigation.navigate('NewsDetail', { news_id: item.id })}}>
      <Image source={{ uri: item.url }} defaultSource={require('../../../assets/images/default_small.png')} style={styles.image_style} resizeMode={'contain'}/>
      <View style={{ flex: 1, marginLeft: 8, justifyContent: 'space-between' }}>
        <Text style={{ fontSize: 14, color: 'white', width: '100%', }} ellipsizeMode={'tail'} numberOfLines={2}>{item.title}</Text>
        <View style={{ flexDirection: 'row' }}>
          <Icon name="ic_calendar_alt" size={16} color="white"/>
          <Text style={{ flex: 1, fontSize: 12, color: 'white', marginLeft: 5 }}>{item.date}</Text>
              <View style={{ backgroundColor: '#FF9500', height: 20, paddingHorizontal: 10, borderRadius: 10, justifyContent: 'center', alignItems: 'center' }}>
                <Text style={{ fontSize: 12, color: 'white' }}>{item.type == "promotion" ? t('latest_promotion') : t('latest_news')}</Text>
              </View>
        </View>
      </View>
    </TouchableOpacity>
  )

  renderNativeItemImages = (item) => {
    return <TouchableOpacity onPress={() => {
      this.props.navigation.navigate('NewsDetail', { news_id: item.id })
    }}>
      <ImageBackground source={{ uri: item.url }} onError={(e) => { this.props.source = require('../../../assets/images/default_big.png') }} style={styles.imgBg}>
        <LinearGradient colors={['rgba(0, 0, 0, 0)', '#000000']}>
          <View style={{ padding: 15, }}>
            {item.is_new == true  ?
                <View style={{ backgroundColor: '#FF9500', borderRadius: 10, height: 20, width: 100, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 10 }}><Text style={{ fontSize: 12, color: 'white' }}>{item.type == "promotion" ? t('latest_promotion') : t('latest_news')} </Text></View>
                : null }
            <Text style={styles.textNewsName} ellipsizeMode={'tail'} numberOfLines={2}>{item.title}</Text>
            <View style={{ flexDirection: 'row', marginTop: 5 }}>
              <Icon name="ic_calendar_alt" size={14} color="rgba(255, 255, 255, 0.65)"/>
              <Text style={{ color: 'rgba(255, 255, 255, 0.65)', fontSize: 12, marginLeft: 5, marginTop: -1 }}>
                {item.date}
              </Text>
            </View>
          </View>
        </LinearGradient>
      </ImageBackground>
    </TouchableOpacity>
  }

  getDueAt (date) {
    let d = moment(date).format('D')
    let m = moment(date).format('MM')
    let y = parseInt(moment(date).format('Y')) + 543
    let new_date = moment().format('DD/MM/Y')
    new_date = d + '/' + m + '/' + y
    return new_date
  }

  _onCarouselScroll (e) {
    const scrollX = e.nativeEvent.contentOffset.x
    this.setState({
      position: Math.ceil(scrollX / width)
    })

    // console.log(this.state.position)
  }

  isCloseToBottom = ({ layoutMeasurement, contentOffset, contentSize }) => {
    const paddingToBottom = 20
    return layoutMeasurement.height + contentOffset.y >=
      contentSize.height - paddingToBottom
  }

  loadMoreData = async () => {
    const { loadMore } = this.state
    if (loadMore) {
      return
    }
    this.setState({ loadMore: true, isLoadmore: true })

    let loadpage = this.state.loadPage + 1

    /*loading - set loadMore = false when done*/
    getNewsPage(loadpage)
      .then(res => {
        if (res.ok) {
          let resData = res.data.data
          let news_arr = this.state.new_all
          resData.forEach(item => {
            // console.log('data >>>>>><<<< ',item);
            news_arr.push(item)
          })

          this.setState({
            loadPage: loadpage,
            new_all: news_arr,
            refreshing: false,
            loadMore: false,
            isLoadmore: false
          })

          if (resData.length < 10) {
            this.setState({
              loadMore: true
            })
            return
          }
        }
      })
  }

  _keyExtractorNewHead = (item, index) => 'new_head_' + index
  _keyExtractorNewAll = (item, index) => 'new_all_' + index

  render () {
    return (
      <LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
      }}>
        <NavigationEvents
          onDidFocus={() => {
            this.setState({ isLoading: true })
            let checkNav = this.props.navigation.getParam('isLogin')
            if (checkNav) {
              this.props.navigation.setParams({ isLogin: false })
              this.initData()
            } else {
              this.setState({ isLoading: false })
            }
          }}
        />
        <BackgroundImage>
          <ScrollView contentContainerStyle={styles.contentContainer}
                      refreshControl={
                        <RefreshControl
                          refreshing={this.state.refreshing}
                          onRefresh={this._onRefresh}
                        />
                      }
                      showsVerticalScrollIndicator={false}
                      scrollEventThrottle={16}
                      onScroll={Animated.event(
                        [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }]
                      )}
                      onMomentumScrollEnd={({ nativeEvent }) => {
                        if (this.isCloseToBottom(nativeEvent)) {
                          this.loadMoreData()
                        }
                      }}
          >
            <View style={[styles.row]}>
              <FlatList
                data={this.state.news_head}
                renderItem={({ item }) => this.renderNativeItemImages(item)}
                horizontal={true}
                showsHorizontalScrollIndicator={false}
                pagingEnabled={true}
                keyExtractor={this._keyExtractorNewHead}
                onScroll={this._onCarouselScroll}
              />
              <View style={{ position: 'absolute', bottom: 10, width: '100%', justifyContent: 'center', flexDirection: 'row' }}>
                {(this.state.news_head).map((item, i) => <View key={'news_heade_' + i} style={[{ width: 10, height: 10, borderRadius: 5, backgroundColor: this.state.position == i ? '#269A21' : 'rgba(255,255,255,0.3)', marginHorizontal: 4 }]}></View>)}
              </View>
            </View>
            {this.state.auth !== null &&
            (
              !this.state.auth ? (
                <Card style={{ borderRadius: 5, backgroundColor: '#00420A', borderColor: 'rbga(0,0,0,0)', paddingBottom: 10 }}>
                  <BackgroundImage_RegisterForm>
                    <View style={{ flex: 1, alignItems: 'center', padding: 10 }}>
                      <View>
                        <Text style={{ color: 'white', fontSize: 16, textAlign: 'center' }}>{t('for_csa_customer')}</Text>
                        <Text style={{ color: 'white', fontSize: 16, textAlign: 'center' }}>{t('create_account')} {t('to_view_outstanding_balance')}</Text>
                      </View>
                      <TouchableOpacity onPress={() => {
                        // this.props.navigation.navigate('Register')
                        this.props.navigation.navigate('Terms')
                      }}>
                        <View>
                          <Badge style={{ backgroundColor: '#145EB3', borderRadius: 5, borderColor: 'rbga(0,0,0,0)', marginTop: 10, height: null, width: 150 }}>
                            <Text style={{ fontSize: 16, color: 'white', padding: 5, textAlign: 'center' }}>{t('create_account')}</Text>
                          </Badge>
                        </View>
                      </TouchableOpacity>
                      <Text style={{ color: 'white', marginTop: 10 }}>{t('or')}</Text>
                      <TouchableOpacity onPress={() => { this.props.navigation.navigate('Login') }}>
                        <View>
                          <Badge style={{ backgroundColor: '#145EB3', borderRadius: 5, borderColor: 'rbga(0,0,0,0)', marginTop: 10, height: null, width: 150 }}>
                            <Text style={{ fontSize: 16, color: 'white', padding: 5, textAlign: 'center' }}>{t('login')}</Text>
                          </Badge>
                        </View>
                      </TouchableOpacity>
                      <Text style={{ color: 'white', marginTop: 10 }}>{t('or')}</Text>

                        <TouchableOpacity onPress={() => {

                          loginWithFacebook(() => {
                            this.initData()
                          })
                          /*if(this.state.fb_is_link !== false){
                            loginWithFacebook(() => {
                              this.initData()
                            })
                          }else{
                            Alert.alert(
                                "",
                                "อิเมล์ "+this.state.email+" ยังไม่ได้ลงทะเบียนในระบบ กรุณาสมัครสมาชิก",
                                [
                                  { text: "OK", onPress: () => console.log("OK Pressed") }
                                ],
                                { cancelable: false }
                            )
                          }*/

                        }}>


                        <View>
                          <Badge style={{ backgroundColor: '#145EB3', borderRadius: 5, borderColor: 'rbga(0,0,0,0)', marginTop: 10, height: null, width: 150 }}>
                            <Text style={{ fontSize: 16, color: 'white', padding: 5, textAlign: 'center' }}>{t('login_facebook')}</Text>
                          </Badge>
                        </View>
                      </TouchableOpacity>
                    </View>
                  </BackgroundImage_RegisterForm>
                </Card>
              ) : (
                <View style={{ padding: 5 }}>
                  <View style={[styles.row, { alignItems: 'stretch' }]}>
                    <View style={styles.custom_card}>
                      <Card style={{ borderRadius: 5, backgroundColor: '#00420A', borderColor: 'rbga(0,0,0,0)' }}>
                        <BackgroundImage_RegisterForm>
                          <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 10, minHeight: 177 }}>
                            <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                              <Icon name='ic_shop_receive' color='white' size={24}/>
                              {/*<Text style={{ color: 'white', fontSize: 14, marginTop:5 }}>คุณมียอดค้างชำระ</Text>*/}
                              <Text style={{ color: 'white', fontSize: 14, marginTop: 5, textAlign: 'center' }}> {t('have_outstanding_balance')} </Text>
                            </View>
                            <View style={{ justifyContent: 'center', alignItems: 'center', marginBottom: 5 }}>
                              <Text style={{ color: 'white', fontSize: 28 }}>{this.state.isBilling ? this.state.pending_payment : 'N/A'}</Text>
                              {/*<Text style={{ color: 'white', fontSize: 12 }}>{parseFloat(this.state.pending_payment) > 0 ?'โปรดชำระก่อนวันที่':'ยังไม่มียอดค้างชำระ'}</Text>*/}
                              <Text style={{ color: 'white', fontSize: 12, textAlign: 'center' }}>{parseFloat(this.state.pending_payment) > 0 ? t('to_view_outstanding_balance') : t('no_outstanding_balance_yet')}</Text>
                              {this.state.due_at !== '' && <Text style={{ color: 'white', fontSize: 12 }}>{parseFloat(this.state.pending_payment) > 0 && this.state.due_at !== '' ? this.getDueAt(this.state.due_at) : ''} </Text>}
                            </View>
                            <TouchableOpacity disabled={!this.state.isBilling} onPress={() => {this.props.navigation.navigate('Bill')}}>
                              {/*<Badge style={{ backgroundColor: this.state.isBilling ? '#145EB3' : 'gray', borderRadius: 5, borderColor: 'rbga(0,0,0,0)', justifyContent:'center' }}><Text style={{ fontSize: 12, color: 'white' }}>ดูเพิ่มเติม</Text></Badge>*/}
                              <Badge style={{ backgroundColor: this.state.isBilling ? '#145EB3' : 'gray', borderRadius: 5, borderColor: 'rbga(0,0,0,0)', justifyContent: 'center' }}><Text style={{ fontSize: 12, color: 'white' }}>{t('view_more')}</Text></Badge>
                            </TouchableOpacity>
                          </View>
                        </BackgroundImage_RegisterForm>
                      </Card>
                    </View>
                    <View style={[styles.custom_card, { paddingLeft: 5 }]}>
                      <Card title='' style={{ borderRadius: 5, backgroundColor: '#003114', borderColor: 'rbga(0,0,0,0)', flex: 1 }}>
                        <BackgroundImage_RegisterForm>
                          <View style={{
                            flex: 1,
                            flexDirection: 'column',
                            justifyContent: 'space-between',
                            alignItems: 'center',
                            padding: 10,
                            minHeight: 177,
                          }}>
                            <Icon name='ic_star' color='white' size={24}/>
                            {/*<Text style={{ color: 'white', fontSize: 14, marginTop:5 }}>คะแนนสะสม</Text>*/}
                            <Text style={{ color: 'white', fontSize: 14, marginTop: 5 }}>{t('view_points')}</Text>
                            <Text style={{ color: 'white', fontSize: 28 }}>{this.state.user_point}</Text>
                            {/*<Text style={{ color: 'white', fontSize: 18 }}>พอยต์</Text>*/}
                            <Text style={{ color: 'white', fontSize: 14 }}>{t('point')}</Text>
                            <TouchableOpacity style={{ marginTop: 5 }} disabled={true} onPress={() => {}}>
                              {/*<Badge style={{ backgroundColor: 'gray', borderRadius: 5, borderColor: 'rbga(0,0,0,0)', justifyContent:'center' }}><Text style={{ fontSize: 12, color: 'white' }}>แลกคะแนน</Text></Badge>*/}
                              <Badge style={{ backgroundColor: 'gray', borderRadius: 5, borderColor: 'rbga(0,0,0,0)', justifyContent: 'center' }}><Text style={{ fontSize: 12, color: 'white' }}>{t('redeem')}</Text></Badge>
                            </TouchableOpacity>
                          </View>
                        </BackgroundImage_RegisterForm>
                      </Card>
                    </View>
                  </View>
                  <View style={[styles.row, { flexWrap: 'wrap', alignItems: 'stretch' }]}>
                    {this.state.isMeter ?
                      <View style={[styles.custom_card]}>
                        <TouchableOpacity disabled={false} onPress={() => {
                          this.props.navigation.navigate('Meter')
                        }} style={{ flex: 1 }}>
                          <Card title='' style={{ borderRadius: 5, backgroundColor: '#145EB3', borderColor: 'rbga(0,0,0,0)', flex: 1 }}>
                            <View style={{
                              flex: 1,
                              flexDirection: 'column',
                              alignItems: 'center',
                              padding: 10,
                              justifyContent: 'center'
                            }}>
                              <View style={{ alignItems: 'center' }}>
                                <Icon name='ic_meter' color='white' size={24}/>
                                <Text style={{ color: 'white', fontSize: 14, textAlign: 'center', marginTop: 5 }}> {t('smart_meter')} </Text>
                              </View>
                            </View>
                          </Card>
                        </TouchableOpacity>
                      </View>
                      : null}
                    {this.state.isShipping ?
                      <View style={[styles.custom_card]}>
                        <TouchableOpacity disabled={false} onPress={() => {
                          this.props.navigation.navigate('Object')
                        }} style={{ flex: 1 }}>
                          <Card title='' style={{ borderRadius: 5, backgroundColor: '#145EB3', borderColor: 'rbga(0,0,0,0)', flex: 1 }}>
                            <View style={{
                              flex: 1,
                              flexDirection: 'column',
                              alignItems: 'center',
                              padding: 10,
                              justifyContent: 'center'
                            }}>
                              <View style={{ alignItems: 'center' }}>
                                <Icon name='ic_cart' color='white' size={24}/>
                                <Text style={{ color: 'white', fontSize: 14, textAlign: 'center', marginTop: 5 }}>{t('mail_and_parcel')}</Text>
                              </View>
                            </View>
                          </Card>
                        </TouchableOpacity>
                      </View>
                      : null}
                    <View style={[styles.custom_card]}>
                      <TouchableOpacity disabled={false}
                        onPress={() => { this.props.navigation.navigate('RepairService',{
                          user:this.props.user
                        }) }}
                        style={{ flex: 1 }}>
                        <Card title='' style={{ borderRadius: 5, backgroundColor: '#145EB3', borderColor: 'rbga(0,0,0,0)', flex: 1 }}>
                          <View style={{
                            flex: 1,
                            flexDirection: 'column',
                            alignItems: 'center',
                            padding: 10,
                            justifyContent: 'center',
                          }}>
                            <View style={{ alignItems: 'center' }}>
                              <Icon name='icon_repair' color='white' size={24}/>
                              <Text style={{ color: 'white', fontSize: 14, textAlign: 'center', marginTop: 5 }}>{t('request_repair')}</Text>
                            </View>
                          </View>
                        </Card>
                      </TouchableOpacity>
                    </View>
                    <View style={[styles.custom_card]}>
                      <TouchableOpacity disabled={false} onPress={() => {this.props.navigation.navigate('Question')}} style={{ flex: 1 }}>
                        <Card title='' style={{ borderRadius: 5, backgroundColor: '#145EB3', borderColor: 'rbga(0,0,0,0)', flex: 1 }}>
                          <View style={{
                            flex: 1,
                            flexDirection: 'column',
                            alignItems: 'center',
                            padding: 10,
                            justifyContent: 'center',
                          }}>
                            <View style={{ alignItems: 'center' }}>
                              <Icon name='ic_qa' color='white' size={24}/>
                              <Text style={{ color: 'white', fontSize: 14, textAlign: 'center', marginTop: 5 }}>{t('inquire')}</Text>
                            </View>
                          </View>
                        </Card>
                      </TouchableOpacity>
                    </View>
                  </View>
                </View>
              ))
            }
            <View style={{ padding: 10 }}>
              <FlatList
                extraData={this.state}
                contentContainerStyle={{
                  height: '100%',
                  width: '100%'
                }}
                // scrollEnabled={false}
                data={this.state.new_all}
                renderItem={this.renderNativeItem}
                keyExtractor={this._keyExtractorNewAll}
                ItemSeparatorComponent={() => {
                  return <View style={{ width: '100%', height: 8 }}></View>
                }}
                ListFooterComponent={() => {
                  if (!this.state.isLoadmore) return null
                  return (<View style={{ padding: 16, flexDirection: 'row', borderRadius: 10, justifyContent: 'center', alignItems: 'center' }}>
                    <ActivityIndicator size="small" color="black"/>
                    <Text style={{ fontSize: 12, marginLeft: 10, color: 'black' }}>Loading...</Text>
                  </View>)
                }}
              />
            </View>
          </ScrollView>
        </BackgroundImage>
        <IndicatorLoading loadingVisible={this.state.isLoading}/>
      </LinearGradient>
    )
  }
}

//export default NewsScreen

const styles = StyleSheet.create({
  container: {
    flex: 1, flexDirection: 'column',
    padding: 7
  },
  row: {
    flex: 1, flexDirection: 'row',
  },
  textNews: {
    backgroundColor: '#0D8890',
    width: 60,
    color: '#FFFFFF',
    borderRadius: 5,

    textAlign: 'center',
    fontSize: 12
  },
  imgBg: {
    flex: 1,
    height: 200,
    width: width,
    justifyContent: 'flex-end'
  },
  textNewsName: {
    color: '#FFFFFF',
    fontSize: 18
  },
  textDate: {
    color: 'white',
    fontSize: 12,
    marginLeft: 5,
    marginTop: 10
  },
  contentContainer: {
    paddingVertical: 0,
  },
  image_style: {
    height: 64,
    width: 64,
    borderRadius: 5,
  },
  custom_card: {
    width: '50%', paddingHorizontal: 5,
    // width: '100%'
  }
})

const mapDisPatchToProps = state => {
  return state.app
}

const setUser = dispatch => bindActionCreators({ appSetToken, appSetPushToken, appSetDevice, appSetUser, appCleanToken, appCleanUser, appSetNotification, appSetProjectID }, dispatch)
export default connect(mapDisPatchToProps, setUser)(NewsScreen)
