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

import { Button } from '../../components'
import Icon from '../../components/Iconfont/Iconfont'
import { NavigationActions, createAction } from '../../utils'
import Input from '../../components/input/index'
import Checkbox from '../../components/checkbox/index'
import Grid from '../../components/Grid'
import Collapsible from 'react-native-collapsible'
import SearchModal from './SearchResults'

const { width, height } = Dimensions.get('window')
const data1 = [
  { a: 'aaa', id: 'a1' },
  { a: 'aaa', id: 'a2' },
  { a: 'aaa', id: 'a3' },
]
const data2 = [
  { a: 'bbb', id: 'b1' },
  { a: 'bbb', id: 'b2' },
  { a: 'bbb', id: 'b3' },
]

@connect(({ theme, home }) => ({ ...theme, ...home }))
class ChooseGoods extends Component {
  constructor(props) {
    super()
    this.state = {
      allProDatas: [],
      priceCompany: false,
      listRowBool: true,
      filterIndex1: 0,
      filterIndex2: 0,
      collapsed: true,
      collapsed1: false,
      collapsed2: false,
      gridStyle: {
        viewWid: {
          width: width,
          height: width * 0.4 + 1,
          borderBottomColor: '#F5F5F5',
          borderBottomWidth: 1 / PixelRatio.get(),
        },
        imgWid: {
          width: width * 0.4,
          height: width * 0.4,
        },
      },
    }
  }

  componentWillMount() {
    this.setState({ allProDatas: this.props.allProDatas })
  }
  gotoDetail = () => {
    this.props.dispatch(NavigationActions.navigate({ routeName: 'Detail' }))
  }

  toggleExpanded(e) {
    if (!this.state.collapsed1 && !this.state.collapsed2) {
      e == '1'
        ? this.setState({
            collapsed: !this.state.collapsed,
            collapsed1: !this.state.collapsed1,
          })
        : this.setState({
            collapsed: !this.state.collapsed,
            collapsed2: !this.state.collapsed2,
          })
    } else {
      this.state.collapsed1
        ? e == '1'
          ? this.setState({
              collapsed: !this.state.collapsed,
              collapsed1: !this.state.collapsed1,
            })
          : this.setState({
              collapsed1: !this.state.collapsed1,
              collapsed2: !this.state.collapsed2,
            })
        : e == '1'
          ? this.setState({
              collapsed1: !this.state.collapsed1,
              collapsed2: !this.state.collapsed2,
            })
          : this.setState({
              collapsed: !this.state.collapsed,
              collapsed2: !this.state.collapsed2,
            })
    }
  }

  filterIndexfun(index, selnum) {
    selnum == '1'
      ? this.setState({
          filterIndex1: index,
          collapsed: !this.state.collapsed,
          collapsed1: !this.state.collapsed1,
        })
      : this.setState({
          filterIndex2: index,
          collapsed: !this.state.collapsed,
          collapsed2: !this.state.collapsed2,
        })
  }

  filterRender(item) {
    if (this.state.collapsed1 && !this.state.collapsed2) {
      return (
        <TouchableOpacity
          key={item.item.id}
          style={{
            marginBottom: 10,
          }}
          onPress={() => this.filterIndexfun(item.index, '1')}
        >
          {this.state.filterIndex1 == item.index ? (
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
              }}
            >
              <Text style={{ color: 'red' }}>{item.item.a}</Text>
              <Icon name="icon-icon-duigou" size={16} color={'red'} />
            </View>
          ) : (
            <Text>{item.item.a}</Text>
          )}
        </TouchableOpacity>
      )
    } else {
      return (
        <TouchableOpacity
          key={item.item.id}
          style={{
            marginBottom: 10,
          }}
          onPress={() => this.filterIndexfun(item.index, '2')}
        >
          {this.state.filterIndex2 == item.index ? (
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
              }}
            >
              <Text style={{ color: 'red' }}>{item.item.a}</Text>
              <Icon name="icon-icon-duigou" size={16} color={'red'} />
            </View>
          ) : (
            <Text>{item.item.a}</Text>
          )}
        </TouchableOpacity>
      )
    }
  }

  checkClick(bool, checkname) {
    switch (checkname) {
      case 'newpro':
        console.log('newpro>>>>>' + bool)
        break
      case 'inventory':
        console.log('inventory>>>>' + bool)

        break
      case 'hotsale':
        console.log('hotsale>>>>>' + bool)

        break
    }
  }

  listRowCol() {
    if (this.state.listRowBool) {
      this.setState({
        listRowBool: !this.state.listRowBool,
        gridStyle: {
          viewWid: {
            borderRightColor: '#F5F5F5',
            borderRightWidth: 1 / PixelRatio.get(),
            borderBottomColor: '#F5F5F5',
            borderBottomWidth: 1 / PixelRatio.get(),
            width: width / 2,
            height: width / 2 + 110,
          },
          imgWid: {
            width: width / 2 - 1,
            height: width / 2,
          },
        },
      })
    } else {
      this.setState({
        listRowBool: !this.state.listRowBool,
        gridStyle: {
          viewWid: {
            width: width,
            height: width * 0.4 + 1,
            borderBottomColor: '#F5F5F5',
            borderBottomWidth: 1 / PixelRatio.get(),
          },
          imgWid: {
            width: width * 0.4,
            height: width * 0.4,
          },
        },
      })
    }
  }

  render() {
    const { appTheme } = this.props
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          backgroundColor={'transparent'}
          translucent={true}
        />
        <View
          style={{
            width: width,
            // height: 68,
            height: HEADERSTYLE.height + 8,
            backgroundColor: '#FFF',
            flexDirection: 'row',
            justifyContent: 'space-between',
            paddingHorizontal: 10,
            paddingBottom: 7,
            borderBottomColor: '#DDD',
            borderBottomWidth: 1 / PixelRatio.get(),
          }}
        >
          <TouchableOpacity
            style={{ alignSelf: 'flex-end' }}
            onPress={() => this.props.dispatch(NavigationActions.back())}
          >
            <Icon
              name="icon-icon-xiala"
              style={{ transform: [{ rotate: '90deg' }] }}
              size={28}
              color={'#666'}
            />
          </TouchableOpacity>
          <View style={{ flexDirection: 'row' }}>
            <Input
              touchBool={true}
              touchInput={() => this.mdl._openModal()}
              style={{
                height: 30,
                width: width / 1.36,
                borderRadius: width / 2,
                alignSelf: 'flex-end',
                paddingLeft: 14,
              }}
              placeholder={'商品名称/编码'}
              textInputBacg={'#EEE'}
              iconColor={'#999'}
              placeholderTextColor={'#999'}
              // onchangeFn={e => {
              //   console.log(e);
              // }}
            />
            <View
              style={{ alignSelf: 'flex-end', marginLeft: 8, marginBottom: 3 }}
            >
              <Icon
                name="icon-icon-shangpin"
                size={20}
                color={'#666'}
                onPress={() => this.listRowCol()}
              />
            </View>
          </View>
        </View>

        <SearchModal
          // cb={data => {
          //   this._refreshPlist(data);
          // }}
          ref={mdl => (this.mdl = mdl)}
          // fuleipro={this.state.footerdata}
          dispatch={this.props.dispatch}
          comFrom={'ChooseGoods'}
        />
      </View>
    )
  }
}

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

export default ChooseGoods