/**
 * 过滤器
 * @邠心vbe on 2021/03/24
 */
import React from 'react'
import { Image, Pressable, StyleSheet, Text, TouchableOpacity, TouchableOpacityBase, View } from 'react-native'
import BadgeSelectItem from '../../../components/BadgeSelectItem';
import Button, { ElevationObject } from '../../../components/Button';
import { TypeImageList } from '../../charge/Charging';

class Filter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      connectorType: TypeImageList,
      parkingFee: [{
        name: 'All',
        value: 'ALL'
      },{
        name: 'Free',
        value: 'FREE'
      },{
        name: 'Chargeable',
        value: 'CHARGEABLE'
      }],
      activationType: [/*'SCAN QR', 'RFID Card needed', 'Reservation Required'*/],
      providerType: [/*'All', 'SP', 'GreenLots', 'Juice+Stations'*/],
      filterIndex: {
        providerIndex: -1,
        connectorIndex: -1,
        activationIndex: -1,
        parkingIndex: 0
      }
    };
  }

  componentDidMount() {
    if (this.props.index.connectorIndex || this.props.index.parkingIndex) {
      this.setState({
        filterIndex: this.props.index
      });
    }
    this.setState({
      count: this.props.count
    })
  }

  selectConnector(index) {
    const indexs = this.state.filterIndex;
    indexs.connectorIndex = index;
    this.setState({
      count: 0,
      filterIndex: indexs
    });
  }

  selectActivation(index) {
    const indexs = this.state.filterIndex;
    indexs.activationIndex = index;
    this.setState({
      count: 0,
      filterIndex: indexs
    });
  }

  selectProvidor(index) {
    const indexs = this.state.filterIndex;
    indexs.providerIndex = index;
    this.setState({
      count: 0,
      filterIndex: indexs
    });
  }

  selectParkingFee(index) {
    const indexs = this.state.filterIndex;
    indexs.parkingIndex = index;
    this.setState({
      count: 0,
      filterIndex: indexs
    });
  }

  done() {
    if (this.props.onDone) {
      const index = this.state.filterIndex;
      const filter = {
        connectorType: '',
        activationType: '',
        providerType: '',
        parkingFee: 'ALL'
      }
      try {
        if (index.connectorIndex >= 0)
          filter.connectorType = this.state.connectorType[index.connectorIndex].key;
        if (index.activationIndex >= 0)
          filter.activationType = this.state.activationType[index.activationIndex];
        if (index.providerIndex >= 0)
          filter.providerType = this.state.providerType[index.providerIndex];
        filter.parkingFee = this.state.parkingFee[index.parkingIndex].value;
      } catch {

      }
      this.props.onDone(filter, index);
    }
  }

  render() {
    return (
      <View style={styles.filterView}>
        <View style={ui.flexc}>
          <Text style={styles.titleText}>Filters</Text>
          {/* <Pressable
            android_ripple = {rippleLess}
            onPress={() => {
              if (this.props.onHide) {
                this.props.onHide();
              }
            }}>
            <AntDesign name='close' size={24} color='#999'/>
          </Pressable> */}
        </View>
        {/* Connector Type */}
        <Text style={styles.labelText}>Choose Connector Type</Text>
        <View style={styles.connectorView}>
          { this.state.connectorType.map((item, index) => {
              return (
                <BadgeSelectItem
                  key={index}
                  style={styles.ctypeView}
                  borderColor={textCancel}
                  checked={index==this.state.filterIndex.connectorIndex}
                  onPress={() => this.selectConnector(index)}>
                  <Image 
                    style={styles.typeIcon}
                    source={item.icon}/>
                  <Text style={styles.typeName}>{item.name}</Text>
                </BadgeSelectItem>
              )
            })
          }
        </View>
        { /* Choose Parking Fee */
          this.state.parkingFee.length > 0 &&
          <>
            <Text style={styles.labelText}>Choose Parking Fee</Text>
            <View style={styles.activationView}>
              { this.state.parkingFee.map((item, index) => {
                return (
                  <TouchableOpacity
                    key={index}
                    activeOpacity={0.7}
                    style={[
                      styles.ptypeView,
                      index < this.state.parkingFee.length - 1 && { marginRight: 16 },
                      index==this.state.filterIndex.parkingIndex && styles.actived
                    ]}
                    onPressOut={() => {
                      this.selectParkingFee(index);
                    }}>
                      <Text style={styles.typeText}>{item.name}</Text>
                    </TouchableOpacity>
                )
              })}
            </View>
          </>
        }
        { /* Activation Type */
          this.state.activationType.length > 0 &&
          <>
            <Text style={styles.labelText}>Choose Activation Type</Text>
            <View style={styles.activationView}>
              { this.state.activationType.map((item, index) => {
                return (
                  <TouchableOpacity
                    key={index}
                    activeOpacity={0.7}
                    style={[
                      styles.ptypeView,
                      index < this.state.activationType.length - 1 && { marginRight: 16 },
                      index==this.state.filterIndex.activationIndex && styles.actived
                    ]}
                    onPress={() => {
                      this.selectActivation(index);
                    }}>
                    <Text style={styles.typeText}>{item}</Text>
                  </TouchableOpacity>
                )
              })}
            </View>
          </>
        }
        { /* Provider Type */
          this.state.providerType.length > 0 &&
          <>
            <Text style={styles.labelText}>Choose Provider</Text>
            <View style={styles.activationView}>
            { this.state.providerType.map((item, index) => {
                return (
                  <TouchableOpacity
                    key={index}
                    activeOpacity={0.7}
                    style={[
                      styles.ptypeView,
                      index < this.state.providerType.length - 1 && { marginRight: 16 },
                      index==this.state.filterIndex.providerIndex && styles.actived
                    ]}
                    onPress={() => {
                      this.selectProvidor(index);
                    }}>
                    <Text style={styles.typeText}>{item}</Text>
                  </TouchableOpacity>
                )
              })}
            </View>
          </>
        }
        <View style={styles.bottomView}>
          { this.state.count > 0 &&
            <Text style={{
              color: '#000',
              fontSize: 15,
              fontWeight: 'bold',
              marginRight: 16
            }}>{this.state.count} Results</Text>
          }
          <Button
            viewStyle={styles.done}
            text='Done'
            borderRadius={3}
            onClick={() => this.done()}/>
        </View>
      </View>
    )
  }
}

export default Filter

const styles = StyleSheet.create({
  filterView: {
    padding: 16,
    //backgroundColor: 'white'
  },
  titleText: {
    flex: 1,
    color: '#222',
    fontSize: 17,
    paddingLeft: 24,
    textAlign: 'center',
  },
  labelText: {
    color: textPrimary,
    fontSize: 16,
    fontWeight: 'bold',
    paddingTop: 16,
    paddingBottom: 8,
    textShadowOffset: {
      width: 0,
      height: 1
    },
    textShadowRadius: 4,
    textShadowColor: "rgba(0, 0, 0, 0.25)",
  },
  connectorView: {
    paddingTop: 8,
    alignItems: 'center',
    flexDirection: 'row'
  },
  ctypeView: {
    minWidth: 90,
    padding: 8,
    borderRadius: 6,
    marginRight: 16,
    marginBottom: 8,
    borderWidth: 1.5,
    alignItems: 'center',
    /*...ElevationObject(5),
    backgroundColor: colorLight*/
  },
  ptypeView: {
    minWidth: 54,
    fontSize: 14,
    paddingTop: 8,
    paddingLeft: 12,
    paddingRight: 12,
    paddingBottom: 8,
    borderRadius: 6,
    marginTop: 12,
    borderWidth: 1.5,
    borderColor: textCancel,
    textAlign: 'center',
    /*...ElevationObject(5),
    backgroundColor: colorLight*/
  },
  actived: {
    borderColor: colorAccent
  },
  typeText: {
    color: textPrimary,
    fontSize: 14,
    textAlign: 'center'
  },
  typeIcon: {
    width: 38,
    height: 38
  },
  typeName: {
    color: '#000',
    fontSize: 15,
    textAlign: 'center',
    paddingTop: 8
  },
  activationView: {
    flexWrap: 'wrap',
    alignItems: 'center',
    flexDirection: 'row'
  },
  bottomView: {
    padding: 16,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'flex-end'
  },
  done: {
    height: 40,
    paddingLeft: 14,
    paddingRight: 14,
    alignItems: 'center',
    justifyContent: 'center'
  }
})