import React, { Component } from 'react';
import { View, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
import Image from 'react-native-fast-image'
import ImageBackground from 'react-native-fast-image'
import LinearGradient from 'react-native-linear-gradient'
import Text from '../../components/Text';
import Carousel from 'react-native-snap-carousel'
import { itemWidth, sliderWidth } from '../../styles/SliderEntry.style'
import Icon from '../../components/Icon'
import {getMeterList,getRoomSlideList} from '../../api/UserApi';
import moment from 'moment';
import ImagePicker from 'react-native-image-crop-picker'
import IndicatorLoading from '../../components/IndicatorLoading';
import { NavigationEvents } from 'react-navigation';
import { t } from '../../utils/i18n';


export default class Meter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      room_snap_index:0,
      room_list:[],
      cost_list:[],
      image_selected: {},
      selected_type: '',
      isLoading: true,
    };
    this.onTakeCamera = this.onTakeCamera.bind(this)
    this.selectedImage = this.selectedImage.bind(this)
    this.getSlideList = this.getSlideList.bind(this)
    this.getMeter = this.getMeter.bind(this)
  }

  componentWillUnmount() {
    if(this.props && this.props.navigation && this.props.navigation.state && this.props.navigation.state.params && this.props.navigation.state.params.getNotification){
      this.props.navigation.state.params.getNotification()
    }
  }

  getMeter(){
    this.setState({
      isLoading: true
    })
    getMeterList()
    .then(res => {
      console.log('check response meter list ----------> ',res.data);
      if(res.ok){
        // let room_list = [
        //   {id: 87576, name: 'CN1-005', project_name: 'CNK', electric: 1264, water: 0}
        // ]
        this.setState({
          room_list: res.data.rooms,
          // room_list,
          cost_list: res.data.data,
        })
      }
      this.setState({isLoading:false})
    })
  }

  getSlideList(room_id){
    this.setState({
      isLoading: true
    })
    getRoomSlideList(room_id)
    .then(res => {
      console.log('check response meter list ----------> ',res.data);
      if(res.ok){
        this.setState({
          // room_list: res.data.rooms,
          cost_list: res.data.data,
        })
      }
      this.setState({isLoading:false})
    })
  }

  onTakeCamera() {
    ImagePicker.openCamera({
      cropping: true,
      width: 300,
      height: 100,
      includeExif: true
    }).then(image => {
      console.log('received image', image)
      let image_meter = {
        uri: image.path,
        type: image.mime,
        name: 'image_meter.jpg',
      }
      this.setState({
        image_url: {uri: image.path, width: image.width, height: image.height, mime: image.mime},
        images: null,
      }, () => {
        this.selectedImage(this.state.image_url)
      })
    }).catch(e => {console.log('e >>>> ', e)})
  }

  selectedImage(image_meter){
    this.setState({
      image_selected: image_meter,
    },() => {
      console.log('selected image ',this.state.image_selected)
      if(this.state.selected_type == 'pea'){
        this.props.navigation.navigate('PEAMeter',{image: this.state.image_selected,room_id: this.state.room_list[this.state.room_snap_index].id})
      }else{
        this.props.navigation.navigate('WaterMeter',{image: this.state.image_selected,room_id: this.state.room_list[this.state.room_snap_index].id})
      }
    })
  }

  _keyExtractor = (item, index) => 'meter_room_'+index;

  _renderItem = ({item}) => (
    <LinearGradient colors={['#4BAF3B', '#0E5E29']} style={{ borderColor: 'white', borderRadius: 5, height: 120,paddingBottom:10, justifyContent:'space-between'}}>
      <View style={{  justifyContent: 'center',padding:16 }}>
        <Text style={{ color: 'white', fontSize: 16 }}>{item.name}</Text>
        <Text style={{ color: 'white', fontSize: 16 }}>{item.project_name}</Text>
        <View style={{flexDirection:'row',alignItems:'center'}}>
          <Icon name={'ic_water'} size={16} color={'#00BCD4'}/>
          <Text style={styles.cardText}>{item.water}</Text>
          <Icon name={'ic_check'} size={16} color={'white'}/>
        </View>
        <View style={{flexDirection:'row',alignItems:'center'}}>
          <Icon name={'ic_thunder'} size={16} color={'#FFCC00'}/>
          <Text style={styles.cardText}>{item.electric}</Text>
          <Icon name={'ic_time'} size={16} color={'white'}/>
        </View>
      </View>
    </LinearGradient>
  );

  _keyExtractorCost = (item, index) => 'cost_list_'+index

  _renderItemCost = ({item,index}) => (
    // <TouchableOpacity onPress={() => {}}>
      <View style={{paddingHorizontal:16,height: 96,backgroundColor:'white',borderWidth:1,borderColor:'#EAEAF4'}}>
        <View style={{flex:1,flexDirection:'row'}}>
          <View style={{height: 96,justifyContent:'center',marginRight:16}}>
            <Image source={{uri:item.media.url}} style={{height: 64,width: 64,}} resizeMode={'contain'}/>
          </View>
          <View style={{flex:1,justifyContent:'center'}}>
            <View style={styles.viewTextFlatlist}>
              <View style={{height: 20,width: 20,borderRadius: 10, marginRight:5 ,backgroundColor:item.type == 'ค่าน้ำ' ? '#00BCD4' : '#FFCC00',justifyContent:'center',alignItems:'center'}}>
                <Icon name={item.type == 'ค่าน้ำ' ? 'ic_water' : 'ic_thunder'} size={11} color={'white'}/>
              </View>
              <Text style={styles.textFliatlist}>{item.type == 'ค่าน้ำ' ?  t('water_bill') :  t('electric_unit')}</Text>
            </View>
            <View style={[styles.viewTextFlatlist,{marginVertical:5}]}>
              <Text style={styles.textFliatlist}>{t('unit')} {item.amount} {t('unit_price')}</Text>
              <Text style={[styles.textFliatlist,{marginLeft: 20}]}>{t('amount')} <Text style={[styles.textFliatlist,{color:'#269A21'}]}>{item.cost}</Text> {t('baht')} </Text>
            </View>
            <View style={styles.viewTextFlatlist}>
              <Icon name='ic_event_note' size={16} style={{marginRight:5}}/>
              <Text style={[styles.textFliatlist,{color:'#00000040'}]}>{moment(item.created_at).format('DD MMMM YYYY')}</Text>
            </View>
          </View>
        </View>
      </View>
    // </TouchableOpacity>
  );

  render() {
    return (
      <View style={{flex:1}}>
        <NavigationEvents
            onDidFocus={() => {
              this.getMeter()
            }}
          />
        {
          this.state.room_list.length > 0 &&
          <ImageBackground source={require('../../../assets/images/tree2.png')} style={{width: '100%',backgroundColor:'#EEFFD7',paddingTop:16}}>
            <Carousel
              ref={(c) => { this._carousel = c }}
              data={this.state.room_list}
              renderItem={this._renderItem}
              sliderWidth={sliderWidth}
              itemWidth={itemWidth}
              containerCustomStyle={{}}
              slideStyle={{ justifyContent: 'center' }}
              onSnapToItem={(item) => {
                this.setState({room_snap_index:item})
                this.getSlideList(this.state.room_list[item].id)
              }}
            />
            <View style={{ width: '100%', justifyContent: 'center', flexDirection: 'row',  marginTop:10 }}>
              {this.state.room_list.map((item, i) => <View key={'room_'+i} style={[{ width: 10, height: 10, borderRadius: 5, backgroundColor: this.state.room_snap_index == i ? '#269A21' : 'rgba(124, 187, 51, 0.3)', marginHorizontal: 4 }]}></View>)}
            </View>
            <View style={{padding:16,flexDirection:'row',alignItems:'center',justifyContent:'space-between'}}>
              <TouchableOpacity style={[styles.viewBtn,{backgroundColor:'#00BCD4',marginRight:8}]} onPress={() => {
                this.setState({
                  selected_type: 'water'
                },() => {
                  this.onTakeCamera()
                })
              }}>
                <Icon name={'ic_water'} size={22} color={'white'}/>
                <Text style={styles.textBtn}>{t('save_water_meter')}</Text>
              </TouchableOpacity>
              <TouchableOpacity style={[styles.viewBtn,{backgroundColor:'#FFCC00',marginLeft:8}]} onPress={() => {
                this.setState({
                  selected_type: 'pea'
                },() => {
                  this.onTakeCamera()
                })
              }}>
                <Icon name={'ic_thunder'} size={22} color={'white'}/>
                <Text style={styles.textBtn}>{t('save_electric_meter')}</Text>
              </TouchableOpacity>
            </View>
          </ImageBackground>
        }
        <View style={{flex:1}}>
          <FlatList
            data={this.state.cost_list}
            extraData={this.state}
            keyExtractor={this._keyExtractorCost}
            renderItem={this._renderItemCost}
            style={{flex:1}}
            ListEmptyComponent={() =>
              <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', margin: 16,padding:16,borderRadius:5,backgroundColor:'white'}}>
                <Text style={{fontSize: 16}}> {t('no_water_electric_bill')} </Text>
              </View>
            }
          />
        </View>
        <IndicatorLoading loadingVisible={this.state.isLoading}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  viewBtn:{
    flex:1,
    flexDirection:'row',
    height: 50,
    justifyContent:'center',
    alignItems:'center',
    borderRadius:5
  },
  textBtn:{
    color:'white',
    fontSize:14,
    marginLeft:10,
  },
  cardText:{
    marginHorizontal: 10,
    color: 'white',
    fontSize: 16
  },
  viewTextFlatlist:{
    alignItems:'center',
    flexDirection:'row'
  },
  textFliatlist:{
    fontSize:12,
    color:'#000000'
  }
})