import React, {Component} from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableHighlight,
  TouchableOpacity,
  Dimensions,
  Linking,
  FlatList,
  ImageBackground,
  Image,
  Alert
} from 'react-native';
import NaviBar from '../../components/navi-bar';
import history from '../../common/history';
import {inject, observer} from 'mobx-react';
import LoadingView from '../../common/loading';
import Icon from 'react-native-vector-icons/FontAwesome5';
import {observable} from 'mobx';
import BackHeader from '../../components/backHeader';
import {width, height} from '../../common/screen';
import HistoryList from '../history/historyList';
import {Fonts} from '../../assets/styles/fonts-theme';
import {colors} from '../../assets/styles/colors-theme';
import Swiper from 'react-native-swiper';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
@inject('appStore')
@observer
export default class InFoForGuest extends Component {
  constructor(props) {
    super(props);
    this.store = props.appStore;
  }

  componentWillMount(index) {
    this.store.getbanner();
  }

  clickAction(index) {
    switch (index) {
      case 0:
        //   history.push(this, '/oneClickRental');
        Alert.alert(
          '即將推出',
          '',
          [{text: 'OK', onPress: () => console.log('ok')}],
          {cancelable: false},
        );
        break;
      case 1:
        history.push(this, '/repair');
        break;
      case 2:
        history.push(this, '/news');
        break;
      case 3:
        history.push(this, '/property');
        break;
      case 4:
        history.push(this, '/industrialBuilding');
        break;
      case 5:
        // history.push(this, '/industrialBuilding');
        Alert.alert(
          '即將推出',
          '',
          [{text: 'OK', onPress: () => console.log('ok')}],
          {cancelable: false},
        );
        break;
      case 6:
          history.push(this, '/oneClickRental');
        // Alert.alert(
        //   '即將推出',
        //   '',
        //   [{text: 'OK', onPress: () => console.log('ok')}],
        //   {cancelable: false},
        // );
        break;
    }
  }
  renderBackIcon() {
    return (
      <TouchableOpacity
        style={{
          position: 'absolute',
          left: 20,
          justifyContent: 'center',
          alignItems: 'center',
          height: 40,
          width: 40,
        }}
        onPress={() => {
          console.log('back');
          this.props.navigation.navigate('SelectChar');
        }}>
        <Icon
          name={'arrow-left'}
          size={22}
          color={'white'}
          style={{
            ...Platform.select({
              ios: {},
              android: {
             //   top: 40,
              },
            }),
          }}
        />
      </TouchableOpacity>
    );
  }

  renderList() {
    const selectList = [
      {
        title: this.store.text.downloadrentdoc,
        uri: require('../../assets/images/rentdoc.png'),
      },
      {
        title: this.store.text.homeservice,
        uri: require('../../assets/images/services.png'),
      },
      {
        title: this.store.text.new,
        uri: require('../../assets/images/news.png'),
      },
      {
        title: this.store.text.rentalInfo + '(' + this.store.text.housing + ')',
        uri: require('../../assets/images/apartment.png'),
      },
      {
        title:
          this.store.text.rentalInfo + '(' + this.store.text.business + ')',
        uri: require('../../assets/images/commercialbuilding.png'),
      },
      {
        title: this.store.text.freeSecondhandFurniture,
        uri: require('../../assets/images/furniture.png'),
      },
      {
        title: this.store.text.oneClickRental,
        uri: require('../../assets/images/apartment.png'),
      },
    ];
    return selectList.map((items, index) => {
      return (
        <TouchableOpacity
          style={{width: width, height: 130, borderRadius: 20}}
          onPress={() => this.clickAction(index)}>
          <ImageBackground
            source={items.uri}
            style={{
              flex: 1,
              margin: 5,
              borderRadius: 20,
            }}>
            <View
              style={{
                flex: 1,
                backgroundColor: 'rgba(0,0,0,0.5)',
                alignItems: 'flex-end',
              }}>
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  position: 'absolute',
                  bottom: 10,
                  right: 10,
                }}>
                <Text
                  style={{
                    fontSize: 19,
                    color: 'white',
                    fontFamily: Fonts.ubuntu,
                    fontWeight: 'bold',
                    marginRight: 5,
                  }}>
                  {items.title}
                </Text>
                <Icon name={'chevron-right'} color={'white'} size={20} />
              </View>
            </View>
          </ImageBackground>
        </TouchableOpacity>
      );
    });
  }


  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <View
          style={{
            width: width,
            height: Platform.OS === 'ios' ? 65 : 80,
            backgroundColor: colors.mainColor,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text
            style={{fontFamily: Fonts.ubuntu, color: 'white', fontSize: 20}}>
            {this.store.text.rentTools}
          </Text>
          {this.renderBackIcon()}
        </View>
        <LoadingView visible={this.store.loading} />
        <ScrollView style={{flex: 1}}>
          <View
            style={{
              height: scale(198),
              width: width,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Swiper
              removeClippedSubviews={false}
              style={{
                height: scale(198),
                justifyContent: 'center',
                alignItems: 'center',
              }}
              activeDotColor={colors.mainColor}>
              {this.store.banner.map((items, index) => {
                console.log(items);
                return (
                  <TouchableOpacity
                    onPress={() => {
                      if (items.hasOwnProperty('link')) {
                        history.push(this, '/bannerDetails', {data: items});
                      }
                    }}
                    style={{
                      justifyContent: 'center',
                      alignItems: 'center',
                    }}>
                    <Image
                      source={{uri: items.image}}
                      style={{width: width, height: scale(198)}}
                      resizeMode="contain"
                    />
                  </TouchableOpacity>
                );
              })}
            </Swiper>
          </View>
          {this.renderList()}
        </ScrollView>
      </View>
    );
  }
}
