/**
 * 顶部过滤器
 * @邠心vbe on 2024/05/09
 */
import React from 'react'
import { View, Pressable, StyleSheet, ScrollView, Text, Image } from 'react-native'
import TextView from '../../../components/TextView';

export default class FilterTop extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      connectorType: [{
        name: 'charging.onlyAC',
        key: 'AC',
        icon: 'ev-plug-type2'
      }, {
        name:'charging.onlyDC',
        key: 'DC',
        icon: 'ev-plug-ccs2'
      }],
      parkingFee: [{
        name: 'home.free',
        value: 'FREE'
      },{
        name: 'home.chargeable',
        value: 'CHARGEABLE'
      }],
      filterIndex: {
        bookmark: false,
        currentLocation: true,
        connectorIndex: -1,
        parkingIndex: -1
      }
    };
  }

  currentLocation() {
    if (this.props.onLocation) {
      this.props.onLocation();
    }
  }

  changeBookmark() {
    const indexs = this.state.filterIndex;
    indexs.bookmark = !indexs.bookmark;
    this.setState({
      filterIndex: indexs
    }, () => {
      this.onFilter()
    });
  }

  changeConnector(index) {
    const indexs = this.state.filterIndex;
    if (indexs.connectorIndex != index) {
      indexs.connectorIndex = index;
    } else {
      indexs.connectorIndex = -1;
    }
    this.setState({
      filterIndex: indexs
    }, () => {
      this.onFilter()
    });
  }

  changeParkingFee(index) {
    const indexs = this.state.filterIndex;
    if (indexs.parkingIndex != index) {
      indexs.parkingIndex = index;
    } else {
      indexs.parkingIndex = -1;
    }
    this.setState({
      filterIndex: indexs
    }, () => {
      this.onFilter()
    });
  }

  onFilter() {
    if (this.props.onFilter) {
      const index = this.state.filterIndex;
      const filter = {
        connectorType: '',
        parkingFee: 'ALL',
        bookmark: index.bookmark
      }
      if (index.connectorIndex >= 0) {
        filter.connectorType = this.state.connectorType[index.connectorIndex].key;
      }
      if (index.parkingIndex >= 0) {
        filter.parkingFee = this.state.parkingFee[index.parkingIndex].value;
      }
      this.props.onFilter(filter);
    }
  }

  render() {
    return (
      <ScrollView
        style={styles.filterTopView}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={$padding(16)}>
        <Pressable
          style={[styles.filterItem, styles.selected]}
          onPress={() => this.currentLocation()}>
          <MaterialCommunityIcons
            name="map-marker-outline"
            size={15}
            color={textLight}
          />
          <TextView style={[styles.filterText, styles.active]}>Current Location</TextView>
        </Pressable>
        <Pressable
          style={[styles.filterItem, this.state.filterIndex.bookmark ? styles.selected : {}]}
          onPress={() => this.changeBookmark()}>
          <MaterialCommunityIcons
            name="star"
            size={15}
            color={this.state.filterIndex.bookmark ? textLight : textPrimary}
          />
          <TextView style={[styles.filterText, this.state.filterIndex.bookmark ? styles.active : {}]}>{$t("route.bookmarks")}</TextView>
        </Pressable>
        { this.state.connectorType.map((item, index) => (
          <Pressable
            style={[styles.filterItem, this.state.filterIndex.connectorIndex == index ? styles.selected : {}]}
            key={item.key}
            onPress={() => this.changeConnector(index)}>
            <MaterialCommunityIcons
              name={item.icon}
              size={15}
              color={this.state.filterIndex.connectorIndex == index ? textLight : textPrimary}
            />
            <TextView style={[styles.filterText, this.state.filterIndex.connectorIndex == index ? styles.active : {}]}>{$t(item.name)}</TextView>
          </Pressable>
        ))}
        { this.state.parkingFee.map((item, index) => (
          <Pressable
            style={[styles.filterItem, this.state.filterIndex.parkingIndex == index ? styles.selected : {}]}
            key={item.value}
            onPress={() => this.changeParkingFee(index)}>
            <MaterialCommunityIcons
              name={"parking"}
              size={15}
              color={this.state.filterIndex.parkingIndex == index ? textLight : textPrimary}
            />
            <TextView style={[styles.filterText, this.state.filterIndex.parkingIndex == index ? styles.active : {}]}>{$t(item.name)}</TextView>
          </Pressable>
        ))}
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  filterTopView: {
    top: 45 + statusHeight,
    position: 'absolute'
  },
  typeIcon: {
    width: 14,
    height: 14
  },
  filterItem: {
    marginRight: 8,
    borderWidth: 1,
    borderColor: '#DADADA',
    borderRadius: 30,
    ...$padding(6, 12),
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: colorLight,
  },
  filterText: {
    fontSize: 10,
    paddingLeft: 4,
    color: textPrimary
  },
  selected: {
    borderColor: colorPrimary,
    backgroundColor: colorPrimary
  },
  active: {
    color: textLight
  }
})