/**
 * V3版充电站信息页面
 * @邠心vbe on 2024/05/13
 */
import React, { Component } from 'react';
import { View, StyleSheet, ScrollView, RefreshControl, Text } from 'react-native';
import TextView from '../../components/TextView';
import PagerUtil from '../chargeV2/PagerUtil';
import { MyRefreshProps } from '../../components/ThemesConfig';
import utils from '../../utils/utils';
import SiteLabelView from '../../components/SiteLabelView';
import { ConnectTypeV2 } from '../search/ConnectType';
import { Pressable } from 'react-native';

export default class TabInfosV3 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
      stationInfo: {}
    };
  }

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

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

  onPullRefresh() {
    this.setState({
      refreshing: true
    })
    PagerUtil.setBackRefreshing();
  }

  getOperatingHours() {
    if (this.state.stationInfo?.endlessService) {
      return "24/7";
    } else if (this.state.stationInfo?.operatingHours) {
      return this.state.stationInfo?.operatingHours;
    } else {
      return $t('charging.toBeUpdated');
    }
  }

  getParkingFee() {
    if (this.state.stationInfo?.parkingFeeFree) {
      return $t('charging.free');
    } else if (this.state.stationInfo?.parkingFee) {
      return this.state.stationInfo.parkingFee;
    } else {
      return $t('charging.toBeUpdated');
    }
  }
  
  render() {
    return (
      <ScrollView
        style={styles.container}
        keyboardShouldPersistTaps={isIOS ? 'never' : 'handled'}
        contentContainerStyle={$padding(0, 16)}
        refreshControl={
          <RefreshControl
            {...MyRefreshProps()}
            refreshing={this.state.refreshing}
            onRefresh={() => this.onPullRefresh()}
          />
        }>
        <View style={styles.infoView}>
          <TextView style={styles.siteName}>{this.state.stationInfo?.name}</TextView>
          <View style={ui.flexc}>
            <TextView style={styles.siteTypes}>{this.state.stationInfo.siteType}</TextView>
            { (this.state.stationInfo.allConnector && this.state.stationInfo.allConnector.available > 0) &&
              <TextView style={styles.stationAvailable}>
                <MaterialCommunityIcons
                  name="circle"
                  size={10}
                  color={colorAccent}/>
                <Text>  </Text>
                {$t("charging.statusAvailable")}
              </TextView>
            }
            <ConnectTypeV2 {...this.state.stationInfo?.acConnector}/>
            <ConnectTypeV2 {...this.state.stationInfo?.dcConnector}/>
          </View>
        </View>
        <TextView style={styles.title}>{$t('charging.siteAddress')}</TextView>
        <View style={[styles.infoView, ui.flexc]}>
          <TextView style={[styles.infoText, ui.flex1]}>{this.state.stationInfo?.address}</TextView>
          <Pressable
            style={ui.center}
            android_ripple={rippleLess}
            onPress={() => {
              utils.directMaps(this.state.stationInfo.latitude, this.state.stationInfo.longitude, this.state.stationInfo.address);
            }}>
            <MaterialCommunityIcons
              name="directions"
              color={textPrimary}
              size={24}/>
          </Pressable>
        </View>
        <TextView style={styles.title}>{$t('charging.operatingHours')}</TextView>
        <View style={styles.infoView}>
          <TextView style={styles.infoText}>{this.getOperatingHours()}</TextView>
        </View>
        <TextView style={styles.title}>{$t('charging.parkingFees')}</TextView>
        <View style={styles.infoView}>
          <TextView style={styles.infoText}>{this.getParkingFee()}</TextView>
        </View>
        { utils.isNotEmpty(this.state.stationInfo?.additionalNotes) && <>
          <TextView style={styles.title}>{$t('charging.additionalInfo')}</TextView>
          <View style={styles.infoView}>
            <TextView style={styles.infoText}>{this.state.stationInfo?.additionalNotes}</TextView>
          </View>
        </>}
        { utils.isNotEmpty(this.state.stationInfo?.labels) && <>
          <TextView style={styles.title}>{$t('charging.labelTags')}</TextView>
          <View style={styles.labelRows}>
            <TextView style={styles.infoText}>
              {this.state.stationInfo?.labels.map((label, idx) =>
                (idx != 0 ? ", " : "") + label.label
              )}
            </TextView>
          </View>
        </>}
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  siteName: {
    color: textPrimary,
    fontSize: 24,
    fontWeight: 'bold',
    paddingBottom: 4
  },
  title: {
    color: '#000',
    fontSize: 16,
    fontWeight: 'bold',
    paddingTop: 8,
    //borderBottomColor: '#eee',
    //borderBottomWidth: 1
  },
  infoView: {
    paddingTop: 4,
    paddingBottom: 8
  },
  infoText: {
    color: '#444',
    fontSize: 14
  },
  siteTypes: {
    color: textLight,
    height: 20,
    fontSize: 10,
    marginRight: 6,
    borderRadius: 30,
    ...$padding(0, 10),
    backgroundColor: textPrimary
  },
  stationAvailable: {
    color: textPrimary,
    height: 20,
    fontSize: 10,
    marginRight: 6,
    borderRadius: 30,
    borderWidth: 1,
    borderColor: colorAccent,
    ...$padding(0, 8, 0, 4)
  },
  labelRows: {
    flexWrap: 'wrap',
    alignItems: 'center',
    flexDirection: 'row'
  }
})