import React from "react";
import { View, Image, Text, TouchableOpacity, StyleSheet } from "react-native";

import images from "../../../assets/images";
import { responsiveWidth } from "react-native-responsive-dimensions";
import {connect} from 'react-redux';

/**
 * Created by MaRoCa on 02/18/2020.
 */
class BrandListItem extends React.Component {
  constructor(props) {
    super(props);

    const img = this.props.item.img_url;
    this.state = {
      searchField: "",
      items: [],
      allitems : [],
      img: img
        ? {
            uri: this.props.item.img_url
          }
        : images.imgBrandPlaceholder
    };
  }
  componentWillReceiveProps(nextProps){
    this.setState({searchField:nextProps.searchText})
  }
  formatToTitleCase = str => {
    let updatedStr = str.toLowerCase().split(" ");

    for (var i = 0; i < updatedStr.length; i++) {
      updatedStr[i] = updatedStr[i][0].toUpperCase() + updatedStr[i].slice(1);
    }
    updatedStr = updatedStr.join(" ");

    return updatedStr;
  };

  onErrorLoadingImg = img => {
    this.setState({ img: img });
  };
  brandItem = () =>{
    // const allItem= []
    const item = this.props.item
    // allItem.push(item)
    // this.setState({items:[...this.state.items,...allItem]})
    // const filteredItems = this.state.items.filter(value=>{
    //   return value.brand.toLowerCase().includes(this.state.searchField.toLowerCase())
    // })
    return item
  }

  render() {
    const item = this.brandItem()
    console.log("state",this.state.items)
    return (
      <View style={{ flex: 1 }}>
        <TouchableOpacity
          onPress={() => this.props.onPress(item.brand)}
          activeOpacity={0.7}
        >
          <View style={styles.listItemParent}>
            <Image
              style={styles.brandImg}
              source={this.state.img}
              defaultSource={images.imgBrandPlaceholder}
              onError={() => this.onErrorLoadingImg(images.imgBrandPlaceholder)}
            />
            <Text style={styles.brandName}>
              {item.brand ? this.formatToTitleCase(item.brand) : item.brand}
            </Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  listItemParent: {
    flexDirection: "row",
    borderBottomWidth: 1,
    borderBottomColor: "#127ebd",
    paddingTop: 10,
    paddingBottom: 20
  },
  brandImg: {
    width: responsiveWidth(10),
    height: responsiveWidth(10),
    marginHorizontal: 10
  },
  brandName: {
    textAlign: "left",
    textAlignVertical: "center",
    marginLeft: 20,
    fontSize: 18,
    color: "#127ebd"
  }
});

const mapStateToProps = state => {
  const searchText = state.searchme.searchField;
  return{
    searchText: searchText
  }
}
export default connect(mapStateToProps,null)(BrandListItem);