import React,{Component} from 'react'

import {
	TouchableOpacity,
    TextInput,
    StyleSheet,
    View,
    ScrollView,
    Alert,
    Image,
    FlatList,
    ImageBackground,
    RefreshControl
} from 'react-native'
import Icon from "../../components/Icon";
import {  Button, Card, Body, Badge, ListItem, Left, Right,CheckBox, } from 'native-base'
import { BackgroundImage } from '../../components/BackgroundImage'
import Text from '../../components/Text';
import LinearGradient from 'react-native-linear-gradient';
import Color from '../../color';
import GetWidthHeightDevice from '../../components/GetWidthHeightDevice'
import {getRepairList} from '../../api/UserApi';
import IndicatorLoading from '../../components/IndicatorLoading';
import { t } from '../../utils/i18n'


export default class RepairHistory extends Component {

	constructor(props) {
    super(props)
    this.state = {
      isLoading: false,
      history_list:[
        // {
        //   title: 'A1-1',
        //   status: 'รอดำเนินการ',
        //   tag: '#124456'
        // },
        // {
        //   title: 'A1-2',
        //   status: 'แจ้งซ่อม',
        //   tag: '#546315'
        // },
        // {
        //   title: 'A1-2',
        //   status: 'เสร็จสิ้น',
        //   tag: '#148521'
        // },
        // {
        //   title: 'A1-2',
        //   status: 'เสร็จสิ้น',
        //   tag: '#986521'
        // },
      ]
    }
    this.onRefresh = this.onRefresh.bind(this)
    this.convertStatus = this.convertStatus.bind(this)
    this.convertColorStatus = this.convertColorStatus.bind(this)
  }

  componentDidMount = () => {
    this.getRepairHistoryList()
  };

  getRepairHistoryList(){
    this.setState({
      isLoading: true
    })
    getRepairList()
    .then(res => {
      if(res.ok){
        console.log('check data response ----------> ',res.data.data);
        this.setState({
          history_list: res.data.data,
        })
      }
      this.setState({
        isLoading: false
      })
    })
  }

  convertStatus(statusName){
    switch(statusName){
      case 'Pending':
        return t('pending')
      case 'InProgress':
        return 'ซ่อมแซม'
      case 'NewAppointment':
        return 'นัดหมายใหม่'
      case 'Cancel':
        return t('cancel')
      case 'Success':
        return 'สำเร็จ'
      default:
        return t('pending')
    }
  }

  convertColorStatus(statusName){
    switch(statusName){
      case 'Pending':
        return '#C4C4C4'
      case 'InProgress':
        return '#FFCC00'
      case 'NewAppointment':
        return '#145EB3'
      case 'Cancel':
        return '#FF2D55'
      case 'Success':
        return '#2C7C0B'
      default:
        return '#C4C4C4'
    }
  }

  renderItem = (item) => {
    return <TouchableOpacity style={{ borderBottomColor: '#00000040', borderBottomWidth: 1, backgroundColor: 'white' }}
              onPress={() => {this.props.navigation.navigate('RepairHistoryDetail',{repair_id:item.id})}}>
      <View style={{height: 104,justifyContent:'center',paddingHorizontal:16}}>
        <View style={{flexDirection:'row',justifyContent:'space-between'}}>
          <Text style={{color: Color.green_title, fontSize: 16,}}>{t('room')} {item.room_no}</Text>
          <View style={{flexDirection:'row',alignItems:'center'}}>
            <View style={{height: 10,width: 10,borderRadius: 5,backgroundColor:this.convertColorStatus(item.status)}}/>
            <Text style={{marginLeft:10, fontSize:14, color:this.convertColorStatus(item.status)}}>{this.convertStatus(item.status)}</Text>
          </View>
        </View>
        <View style={{flexDirection:'row',justifyContent:'space-between',marginVertical:5}}>
          <Text style={{fontSize:14}}>{item.services_name}</Text>
          <Text style={{fontSize:14}}>#{item.tag}</Text>
        </View>
        <View style={{flexDirection:'row',justifyContent:'space-between'}}>
          <View style={{flexDirection:'row',alignItems:'center'}}>
            <Icon name="ic_calendar_alt" size={14} color="#00000080" />
            <Text style={{marginLeft: 10, fontSize:12}}>{`${item.date}, ${item.time}`}</Text>
          </View>
          <Text style={{color: '#145EB3'}}>{item.points} คะแนน</Text>
        </View>
      </View>
    </TouchableOpacity>
  }

  onRefresh(){
    this.getRepairHistoryList()
  }

  _keyExtractor = (item, index) => 'history_'+index

  render() {
    return (
      <ImageBackground source={require('../../../assets/images/tree2.png')} style={{width: '100%', height: '100%', backgroundColor:'#EEFFD7'}}>
        <FlatList
          refreshControl={
            <RefreshControl
              refreshing={this.state.isLoading}
              onRefresh={this.onRefresh}
            />
          }
          data={this.state.history_list}
          renderItem={({ item }) => this.renderItem(item)}
          pagingEnabled={true}
          extraData={this.state}
          style={{backgroundColor:'#EEFFD7'}}
          keyExtractor={this._keyExtractor}
          ListEmptyComponent={() => (
            <View style={{height:64,margin:16,alignItems:'center',justifyContent:'center',backgroundColor:'white',borderRadius:5}}>
              <Text style={{color:'black'}}>{t('no_repair_history')}</Text>
            </View>
          )}
        />
        <IndicatorLoading loadingVisible={this.state.isLoading}/>
      </ImageBackground>
    )
  }
}
