/**
 * 充电评价页面
 * @邠心vbe on 2021/04/30
 */
import React from 'react';
import { Image, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
import apiUser from '../../api/apiUser';
import Button from '../../components/Button';
import Dialog from '../../components/Dialog';
import { PageList } from '../Router';

export default class Rating extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      amenitiesNearby: 0,
      chargingExperience: 0,
      locationOfStation: 0,
      other: '',
      sitePk: 0,
      stationInfo: this.props.route.params
    }
  }

  componentDidMount() {
    if (this.state.stationInfo.id) {
      this.setState({
        sitePk: this.state.stationInfo.id
      });
    }
  }

  submit() {
    //console.log(this.state);
    if (this.state.locationOfStation == 0) {
      toastShort('Please rate \'Location of Station\'');
      return;
    }
    if (this.state.amenitiesNearby == 0) {
      toastShort('Please rate \'Amenities Nearby\'');
      return;
    }
    if (this.state.chargingExperience == 0) {
      toastShort('Please rate \'Charging Experience\'');
      return;
    }
    this.rating();
  }

  rating() {
    Dialog.showProgressDialog();
    apiUser.rateCharge(this.state).then(res => {
      Dialog.dismissLoading();
      startPage(PageList.home)
    }).catch((err) => {
      Dialog.dismissLoading();
      toastShort(err);
    });
  }

  render() {
    return (
      <ScrollView
        style={styles.container}
        keyboardShouldPersistTaps={isIOS ? 'never' : 'handled'}
        contentInsetAdjustmentBehavior={'automatic'}>
        <View style={styles.stationInfoView}>
          <Image
            style={styles.stationIcon}
            source={require('../../images/charge/icon-station-no.png')}/>
          <View style={styles.stationInfo}>
            <Text
              numberOfLines={1}
              ellipsizeMode={'tail'}
              style={styles.stationName}>{this.state.stationInfo?.name}</Text>
            <Text style={styles.stationAddress}>{this.state.stationInfo?.address}</Text>
          </View>
        </View>
        <View style={styles.ratingView}>
          <Text style={styles.ratingTitle}>Location of Station</Text>
          <StarView 
            rating={this.state.locationOfStation}
            onChange={value => {
              this.setState({
                locationOfStation: value
              });
            }}
          />
          <Text style={styles.ratingTitle}>Amenities Nearby</Text>
          <StarView 
            rating={this.state.amenitiesNearby}
            onChange={value => {
              this.setState({
                amenitiesNearby: value
              });
            }}
          />
          <Text style={styles.ratingTitle}>Charging Experience</Text>
          <StarView 
            rating={this.state.chargingExperience}
            onChange={value => {
              this.setState({
                chargingExperience: value
              });
            }}
          />
          <Text style={styles.ratingTitle}>Others</Text>
          <TextInput
            style={styles.otherText}
            multiline={true}
            maxLength={500}
            numberOfLines={4}
            scrollEnabled={true}
            textAlignVertical='top'
            onChangeText={t => {
              this.setState({
                other: t
              });
            }}
          />
        </View>
        <Button
          style={styles.button}
          text='Submit Rating'
          onClick={() => {
            this.submit();
          }}
        />
      </ScrollView>
    );
  }
}

const StarView = ({rating, onChange}) => {
  const arr = [1,2,3,4,5];
  return (
    <View style={styles.starGroupView}>
      { arr.map((item, index) => {
          return (
            <AntDesign
              key={index}
              style={styles.starView}
              name={'star'}
              size={34}
              color={rating >= item ? colorAccent : '#eee'}
              onPress={() => {
                onChange(item);
              }}/>
          );
        })
      }
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  stationInfoView: {
    padding: 16,
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: colorLight
  },
  stationIcon: {
    width: 40,
    height: 40
  },
  stationInfo: {
    flex: 1,
    paddingLeft: 16
  },
  stationName: {
    color: '#000',
    fontSize: 16
  },
  stationAddress: {
    color: '#999',
    fontSize: 12
  },
  ratingView: {
    padding: 16,
    marginTop: 16,
    backgroundColor: colorLight
  },
  ratingTitle: {
    color: '#000',
    fontSize: 14
  },
  starGroupView: {
    paddingTop: 16,
    paddingBottom: 20,
    alignItems: 'center',
    flexDirection: 'row'
  },
  starView: {
    marginRight: 10
  },
  otherText: {
    color: textPrimary,
    minHeight: 120,
    marginTop: 16,
    borderWidth: 1,
    borderColor: '#999',
    borderRadius: 6,
    paddingLeft: 10,
    paddingRight: 10,
    backgroundColor: '#F5F5F5'
  },
  button: {
    elevation: 1.5,
    marginTop: 32,
    marginLeft: 16,
    marginRight: 16,
    marginBottom: 32
  }
});