/**
 * 新版充电站信息页面
 * @邠心vbe on 2023/02/06
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import PagerUtil from './PagerUtil';

export default class TabInfos extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stationInfo: {}
    };
  }

  componentDidMount() {
    PagerUtil.addOnRefresh(this);
    this.onRefresh();
  }

  onRefresh() {
    console.log("info刷新", this.props.route.name);
    this.setState({
      stationInfo: PagerUtil.getStationInfo()
    });
  }

  getOperatingHours() {
    if (this.state.stationInfo?.endlessService) {
      return "24/7";
    } else if (this.state.stationInfo?.operatingHours) {
      return this.state.stationInfo?.operatingHours;
    } else {
      return 'To be updated';
    }
  }

  getParkingFee() {
    if (this.state.stationInfo?.parkingFeeFree) {
      return "Free";
    } else if (this.state.stationInfo?.parkingFee) {
      return this.state.stationInfo.parkingFee;
    } else {
      return 'To be updated';
    }
  }
  
  render() {
    return (
      <View style={$padding(0, 16)}>
        <Text style={styles.title}>Site Name</Text>
        <View style={styles.infoView}>
          <Text style={styles.infoText}>{this.state.stationInfo?.name}</Text>
        </View>
        <Text style={styles.title}>Address</Text>
        <View style={styles.infoView}>
          <Text style={styles.infoText}>{this.state.stationInfo?.address}</Text>
        </View>
        <Text style={styles.title}>Parking Fees</Text>
        <View style={styles.infoView}>
          <Text style={styles.infoText}>{this.getParkingFee()}</Text>
        </View>
        <Text style={styles.title}>Operating Hours</Text>
        <View style={styles.infoView}>
          <Text style={styles.infoText}>{this.getOperatingHours()}</Text>
        </View>
        <Text style={styles.title}>Additional Information</Text>
        <View style={styles.infoView}>
          <Text style={styles.infoText}>{this.state.stationInfo?.additionalNotes}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  title: {
    color: '#000',
    fontSize: 14,
    fontWeight: 'bold',
    ...$padding(16, 0, 8),
    borderBottomColor: '#eee',
    borderBottomWidth: 1
  },
  infoView: {
    paddingTop: 8,
    paddingBottom: 16
  },
  infoText: {
    color: '#444',
    fontSize: 14
  }
})