import React, { Component } from 'react'
import {
	TouchableOpacity,
    TextInput,
    StyleSheet,
    View,
    ScrollView,
    Alert,
    Image,
    Slider,
    ImageBackground
} 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 GetWidthHeightDevice from '../../components/GetWidthHeightDevice'
import Color from '../../../src/color';
import { t } from 'src/utils/i18n'

export default class RepairServiceDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 2,
      point_selected: 0
    }
    this.sendEvaluate = this.sendEvaluate.bind(this)
  }

  sendEvaluate(){
    Alert.alert(null, 'ส่งผลประเมินสำเร็จ')
  }

  changeSlide(value) {
    this.setState({
      value: parseFloat(value),
      point_selected: value+1
    });
  }

  render() {
    const {value} = this.state;
    return (
        <ImageBackground source={require('../../../assets/images/tree2.png')} style={{width: '100%', height: '100%', backgroundColor:'#EEFFD7'}}>
          <View style={[styles.containerHeadbar,]}>
            <View>
            <LinearGradient colors={['#4BAF3B', '#0E5E29']} style={{width: null,height: null,resizeMode: 'cover', borderRadius:5}}>
              <View style={{padding:16,paddingVertical: 10}}>
                <View style={{flexDirection:'row'}}>
                  <Text style={{ flex:1,fontSize: 18, color: '#FFFFFF'}}>{t('room')} A1-1</Text>
                  <Text style={{ fontSize: 18, color: '#FFFFFF'}}>#123456</Text>
                </View>
                <Text style={{ fontSize: 14, color: '#FFFFFF'}}>โครงการเจริญสินธานี (CNE)</Text>
              </View>
            </LinearGradient>
            <View style={{backgroundColor: '#FFFFFF',padding:16}}>
              <Text style={{ fontSize: 14, color: Color.green_title}}>{t('make_appoint')}</Text>
              <View style={{ flexDirection: 'row',paddingVertical:5}}>
                <Text style={{ fontSize: 14, color: Color.gray_half}}>{t('date')}</Text>
                <Text style={{ fontSize: 14, color: '#000000'}}> 01-01-2019 </Text>
                <Text style={{ fontSize: 14, color: '#00000080'}}> เวลา </Text>
                <Text style={{ fontSize: 14, color: '#000000'}}> 12:00-13:00 </Text>
              </View>
              <View style={{ flexDirection: 'row',alignItems:'center'}}>
                <Text style={{ fontSize: 14, color: '#00000080'}}>{t('status')}</Text>
                <Image style={{marginHorizontal:10}} source={require('../../../assets/images/Ellipse2.png')} defaultSource={require('../../../assets/images/Ellipse2.png')} />
                <Text style={{ fontSize: 14, color: Color.green_title}}>{t('complete')}</Text>
              </View>
              <View style={[styles.hairline]}></View>
              <View>
                <Text style={{ fontSize: 14, color: Color.green_title}}>{t('information')}</Text>
              </View>
              <View style={styles.info_order_view}>
                <Text style={{ fontSize: 14, color: '#000000' }}>น้ำรั่ว</Text>
                <Text style={{ textAlign: 'right', fontSize: 14, color: '#7CBB33'}}>ค่าบริการขั้นต่ำ 200 {t('baht')}</Text>
              </View>
              <View style={styles.info_order_view}>
                <Text style={{ fontSize: 14, color: '#000000' }}>เปลี่ยนก๊อกน้ำ</Text>
                <Text style={{ textAlign: 'right', fontSize: 14, color: '#7CBB33'}}>ค่าบริการขั้นต่ำ 150 {t('baht')}</Text>
              </View>
              <View style={styles.info_order_view}>
                <Text style={{ fontSize: 14, color: '#000000' }}>ไฟฟ้าช๊อต</Text>
                <Text style={{ textAlign: 'right', fontSize: 14, color: '#7CBB33'}}>ค่าบริการขั้นต่ำ 500 {t('baht')}</Text>
              </View>
              <View style={[styles.hairline]}></View>
              <View style={styles.info_order_view}>
                <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 style={{width: '100%', marginTop:10,padding:16, backgroundColor: '#FFFFFF',borderRadius:5, height:100}}>
              <View>
                <Text style={{ fontSize: 14, color: Color.green_title}} >{t('rating')}</Text>
                <View style={{flexDirection:'row',justifyContent:'space-around',marginTop:10}}>
                    <Text style={{ fontSize: 12, color: '#000000'}} >1</Text>
                    <Text style={{ fontSize: 12, color: '#000000'}} >2</Text>
                    <Text style={{ fontSize: 12, color: '#000000'}} >3</Text>
                    <Text style={{ fontSize: 12, color: '#000000'}} >4</Text>
                    <Text style={{ fontSize: 12, color: '#000000'}} >5</Text>
                </View>
                <Slider
                  style={{ width: '90%', alignSelf:'center',}}
                  step={1}
                  maximumTrackTintColor='#EAEAF4'
                  minimumTrackTintColor='#269A21'
                  maximumValue={4}
                  onValueChange={this.changeSlide.bind(this)}
                  value={value}
                />
              </View>
            </View>
          </View>
            <CustomButton style={[styles.button_style]}
              onPress={() => {
                Alert.alert(
                  'แจ้งเตือน !',
                  'ยืนยันการส่งข้อมูล ?',
                  [
                    { text: 'Cancel', style: 'cancel' },
                    { text: 'OK', onPress: () => this.sendEvaluate() },
                  ],
                  { cancelable: false }
                )
              }}
              title={'ส่งประเมิน'} />
          </View>
        </ImageBackground>
    )
  }
}



const styles = {
  containerHeadbar: {
    flex: 1,
    flexDirection: 'column',
    height: GetWidthHeightDevice.HeightContainer,
    padding:16,
    fontStyle: "normal",
    justifyContent:'space-between'
  },
  hairline: {
    marginVertical: 17,
    backgroundColor: '#A2A2A2',
    height: 1,
    width: '100%'
  },
  button_style: {
    backgroundColor: '#145EB3',
    height: 40,
    borderRadius: 5,
    width: "100%",
  },
   row: {
    flex: 1, flexDirection: "row",
  },
  info_order_view:{
    paddingVertical:5,
    flexDirection: 'row',
    justifyContent:'space-between'
  }
}
