import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  StatusBar,
  Dimensions,
  ScrollView,
  FlatList,
  PixelRatio,
  TouchableOpacity,
  Text,
} from 'react-native'
import { connect } from 'react-redux'

import { NavigationActions, createAction, Storage } from '../../utils'
import Input from '../../components/input/index'
import Icon from '../../components/Iconfont/Iconfont'
import ModalEcx from '../../components/Modal'

const { width, height } = Dimensions.get('window')

// @connect(({ theme }) => ({ ...theme }))
class SearchResults extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
      rowPrice: 0,
      autoFocusBool: true,
      isShow: '请输入商品名称或商品编码',
      defaultValue: '',
    }
  }

  componentDidMount() {
    this.storageOperate()
  }

  async storageOperate(e) {
    let searchVals = []
    let SearchData = await Storage.get('queryCondition', false)
    if (SearchData) {
      searchVals = searchVals.concat(SearchData)
    }
    if (e && e.replace(/(^s*)|(s*$)/g, ' ') != ' ') {
      searchVals = searchVals.concat(e.replace(/(^\s*)|(\s*$)/g, ''))
      Storage.set('queryCondition', searchVals)
    }
    searchVals = Array.from(new Set(searchVals))
    this.setState({ data: searchVals })
  }

  _closeModal() {
    this.mdl._setModalVisible(false)
  }
  _openModal = va => {
    this.mdl._setModalVisible(true)
    // if (va) {
    this.setState({ defaultValue: va })
    // }
  }

  recentRender(item, index) {
    return (
      <TouchableOpacity
        onPress={() => {
          if (this.props.comFrom && this.props.comFrom == 'CommodityShowbase') {
            this.props.cb(item.item)
          } else {
            this.props.dispatch(
              NavigationActions.navigate({
                routeName: 'CommodityShowbase',
                params: { searchval: item.item },
              })
            )
          }
          this._closeModal()
          this.storageOperate(item.item)
        }}
        style={{
          paddingHorizontal: 16,
          paddingVertical: 4,
          backgroundColor: '#EEE',
          borderRadius: 100,
          marginRight: 10,
          marginTop: 13,
        }}
      >
        <Text style={{ fontSize: 12, color: '#666', lineHeight: 17 }}>
          {item.item}
        </Text>
      </TouchableOpacity>
    )
  }

  _renderModalContent() {
    return (
      <View
        style={{
          height: height,
          width: width,
          backgroundColor: '#EEE',
        }}
      >
        <StatusBar
          animated={true}
          // barStyle={appTheme.barStyle}
          barStyle={'dark-content'}
          backgroundColor={'transparent'}
          translucent={true}
        />
        <View
          style={{
            backgroundColor: '#FFF',
            height: HEADERSTYLE.height,
            // height: 68,
            borderBottomColor: '#DDD',
            borderBottomWidth: 1 / PixelRatio.get(),
            flexDirection: 'row',
            justifyContent: 'center',
          }}
        >
          <Input
            autoFocus={true}
            style={{
              height: 28,
              width: width / 1.2,
              borderRadius: width / 2,
              alignSelf: 'flex-end',
              marginBottom: 8,
              paddingLeft: 14,
            }}
            blurOnSubmit={true}
            placeholder={this.state.isShow}
            defaultValue={this.state.defaultValue}
            textInputBacg={'#EEE'}
            iconColor={'#999'}
            placeholderTextColor={'#999'}
            isBlurTrue={false}
            onchangeFn={e => {
              if (
                this.props.comFrom &&
                this.props.comFrom == 'CommodityShowbase'
              ) {
                this.props.cb(e)
              } else {
                this.props.dispatch(
                  NavigationActions.navigate({
                    routeName: 'CommodityShowbase',
                    params: { searchval: e },
                    // params: { searchval: e ? e : this.state.defaultValue }
                  })
                )
              }
              this._closeModal()
              this.storageOperate(e)
            }}
          />
          <TouchableOpacity
            style={{ alignSelf: 'flex-end', marginBottom: 15, marginLeft: 7 }}
            onPress={() => {
              this._closeModal()
            }}
          >
            <Text style={{ color: '#333' }}>取消</Text>
          </TouchableOpacity>
        </View>
        <View
          style={{
            width: width,
            backgroundColor: '#FFF',
            paddingVertical: 10,
            paddingLeft: 10,
            paddingRight: 15,
          }}
        >
          <Text style={{ fontSize: 14, color: '#333', lineHeight: 20 }}>
            最近搜索
          </Text>

          <FlatList
            data={this.state.data}
            keyExtractor={(item, index) => index}
            renderItem={(item, index) => this.recentRender(item, index)}
            columnWrapperStyle={{ flexWrap: 'wrap' }}
            numColumns={4}
          />
          <TouchableOpacity
            onPress={() => {
              Storage.set('queryCondition', false)
              this.storageOperate()
            }}
            style={{
              marginTop: 60,
              alignSelf: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}
          >
            <Icon name="icon-icon-qingkong" size={24} color={'#999'} />
            <Text
              style={{
                fontSize: 12,
                color: '#999',
                lineHeight: 17,
                marginLeft: 3,
                alignSelf: 'center',
                marginBottom: 3,
              }}
            >
              清空历史记录
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    )
  }

  render() {
    return (
      <ModalEcx
        ref={mdl => (this.mdl = mdl)}
        content={this._renderModalContent()}
      />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  icon: {
    width: 32,
    height: 32,
  },
})

export default SearchResults