import React,{Component} from 'react'
import {
	TouchableOpacity,
    TextInput,
    StyleSheet,
    View,
    ScrollView,
    Alert,
    Image,
    ImageBackground,
    FlatList
} from 'react-native'
import Icon from "../../components/Icon";
import { CustomButton } from '../../components/CustomButton';
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 { getRepairById } from '../../api/UserApi';
import IndicatorLoading from '../../components/IndicatorLoading';
import { t } from '../../utils/i18n'
import moment from 'moment';

export default class RepairHistoryDetail extends Component {
	constructor(props) {
    super(props)
    this.state = {
      isLoading: false,
      repair_id: this.props.navigation.getParam('repair_id','NO_ITEM'),
      repair:{},
      order_list:[
        // {
        //   title: 'น้ำรั่ว',
        //   price: '200'
        // },
        // {
        //   title: 'เปลี่ยนก๊อกน้ำ',
        //   price: '150'
        // },
        // {
        //   title: 'ไฟฟ้าช๊อต',
        //   price: '500'
        // },
      ]
    }
    this.convertStatus = this.convertStatus.bind(this)
    this.convertColorStatus = this.convertColorStatus.bind(this)
  }

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


  getRepairData(){
    this.setState({
      isLoading: true
    })
    getRepairById(this.state.repair_id)
    .then(res => {
      console.log('repair data -------------> ',res.data.data)
      this.setState({
        repair: res.data.data,
        order_list: res.data.data.services,
        isLoading: false
      })
    })
  }

  renderItem = (item) => {
    return <View style={{ flexDirection: 'row', marginVertical:3, justifyContent:'space-between'}}>
      <Text style={{ fontSize: 14, color: '#000000' }}>{item.name}</Text>
      <Text style={{ textAlign: 'right', fontSize: 14, color: '#7CBB33' }}>{item.service_fee} {t('baht')}</Text>
    </View>
  }

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

  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'
    }
  }

  render() {
    return (
      <ImageBackground source={require('../../../assets/images/tree2.png')} style={{width: '100%', height: '100%', backgroundColor:'#EEFFD7'}}>
        <View style={{padding:16}}>
          <View>
            <LinearGradient colors={['#4BAF3B', '#0E5E29']} style={{borderRadius:5, padding:16}}>
              <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                <Text style={{ fontSize: 18, color: '#FFFFFF'}} >{t('room')} A1-1</Text>
                <Text style={{ textAlign:'right', fontSize: 18, color: '#FFFFFF', }} >#{this.state.repair.tag}</Text>
              </View>
              <Text style={{ fontSize: 14, color: '#FFFFFF', }}>โครงการเจริญสินธานี (CNE)</Text>
            </LinearGradient>
            <View style={{backgroundColor: '#FFFFFF',borderRadius:5,padding:16}}>
              <Text style={styles.textTitle}>{t('make_appoint')}</Text>
              <View style={{ flexDirection: 'row',}}>
                <Text style={{ fontSize: 14, color: '#C4C4C4', }}>{t('date')}</Text>
                <Text style={{ fontSize: 14, color: '#000000', paddingHorizontal: 10,}}>{moment(this.state.repair.date).format('DD-MM-YYYY') }</Text>
                <Text style={{ fontSize: 14, color: '#C4C4C4', }}>เวลา</Text>
                <Text style={{ fontSize: 14, color: '#000000', paddingHorizontal: 10,}}>{moment(this.state.repair.time).format('HH:mm') }</Text>
              </View>
              <View style={{ flexDirection: 'row',alignItems:'center',marginVertical:3}}>
                <Text style={{ fontSize: 14, color: '#C4C4C4',}}>{t('status')}</Text>
                <View style={{backgroundColor:this.convertColorStatus(this.state.repair.status),height: 10,width: 10,borderRadius:5, marginHorizontal:10}}/>
                <Text style={{ fontSize: 14, color:this.convertColorStatus(this.state.repair.status)}}>{this.convertStatus(this.state.repair.status)}</Text>
              </View>
              <View style={{borderWidth:1,marginVertical:16,borderColor:'silver'}}></View>
              <Text style={styles.textTitle} >{t('information')}</Text>
              <FlatList
                data={this.state.order_list}
                renderItem={({ item }) => this.renderItem(item)}
                pagingEnabled={true}
                extraData={this.state}
                keyExtractor={this._keyExtractor}
              />
              <View style={{borderWidth:1,marginVertical:16,borderColor:'silver'}}></View>
              <View style={{ flexDirection:'row',justifyContent:'space-between'}}>
                <Text style={{ fontSize: 14, color: Color.green_title }}>{t('estimate_charge')}</Text>
                <Text style={{ textAlign: 'right', fontSize: 14, color: '#7CBB33'}}>850 {t('baht')}</Text>
              </View>
            </View>
          </View>
        </View>
        <IndicatorLoading loadingVisible={this.state.isLoading} />
      </ImageBackground>
    )
  }
}

const styles = {
  textTitle:{
    fontSize: 14,
    color: Color.green_title,
    marginBottom: 10
  }
}
