import React, {Component} from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableHighlight,
  TouchableOpacity,
  Dimensions,
  Linking,
  FlatList,
  ImageBackground,
  StyleSheet,
  TextInput,
  Image,
} 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 Icon2 from 'react-native-vector-icons/MaterialCommunityIcons';
import {observable} from 'mobx';
import ImagePicker from 'react-native-image-crop-picker';
import BackHeader from '../../components/backHeader';
import Swiper from 'react-native-swiper';
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 Menu, {
  MenuProvider,
  MenuTrigger,
  MenuOptions,
  MenuOption,
  renderers,
} from 'react-native-popup-menu';
const {SlideInMenu} = renderers;
@inject('appStore')
@observer
export default class sompleAddApartment extends Component {
  @observable
  imageIndex = 0;
  constructor(props) {
    super(props);
    this.store = props.appStore;
  }

  componentWillMount() {
    this.store.apartmentData.floor = 'middle';
  }
  renderBackIcon() {
    return (
      <TouchableOpacity
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          height: 40,
          width: 40,
          marginLeft: 20,
        }}
        onPress={() => {
          console.log('back');
          history.goBack(this);
        }}>
        <Icon
          name={'arrow-left'}
          size={22}
          color={'white'}
          style={{
            ...Platform.select({
              ios: {},
              android: {
               // top: 40,
              },
            }),
          }}
        />
      </TouchableOpacity>
    );
  }

  apartmentNameReturn() {
    if (
      this.store.apartmentData.name == '' ||
      this.store.apartmentData.name == null
    ) {
      return '屋苑，大厦名';
    } else {
      return this.store.apartmentData.name;
    }
  }

  floorSelect(data) {
    console.log(data);
    this.store.apartmentData.floor = data;
  }

  floorStringReturn() {
    switch (this.store.apartmentData.floor) {
      case 'low':
        return this.store.text.low + this.store.text.floor;
        break;
      case 'middle':
        return this.store.text.middle + this.store.text.floor;
        break;
      case 'high':
        return this.store.text.high + this.store.text.floor;
        break;
    }
  }

  saveImageHandler(image) {
    var photoId = this.store.idGenerator();
    console.log(photoId);
    return {
      id: photoId,
      name: image.filename,
      type: 1,
      createDate: new Date(),
      uri: image.path,
      mime: image.mime,
      height: image.height,
      width: image.width,
    };
  }

  saveAndroidImageHandler(image) {
    var photoId = this.store.idGenerator();
    return {
      id: photoId,
      name: photoId,
      type: 1,
      createDate: new Date(),
      uri: image.path,
      mime: image.mime,
      height: image.height,
      width: image.width,
    };
  }

  avatarHander() {
    ImagePicker.openPicker({
      includeBase64: false,
      writeTempFile: false,
      multiple: true,
      mediaType: 'photo',
      cropping: false,
    }).then(image => {
      console.log(image);
      var response = image;
      response.map((item, index) => {
        if (Platform.OS === 'ios') {
          const uri = this.store.convertLocalIdentifierToAssetLibrary(
            item.localIdentifier,
            'JPG',
          );
          item.path = uri;
          console.log(item.path);
          this.store.apartmentDataDoc.push(this.saveImageHandler(item));
        } else {
          this.store.apartmentDataDoc.push(this.saveAndroidImageHandler(item));
        }
      });
    });
  }

  nextAction(){
    
  }

  render() {
    return (
      <MenuProvider style={{flex: 1, backgroundColor: 'white'}}>
        <LoadingView visible={this.store.loading} />
        <View
          style={{
            width: width,
            height: Platform.OS === 'ios' ? 65 : 80,
            backgroundColor: colors.mainColor,
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <View style={{flex: 1, justifyContent: 'center'}}>
            {this.renderBackIcon()}
          </View>

          <View
            style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <Text
              style={{fontFamily: Fonts.ubuntu, color: 'white', fontSize: 20}}>
              {'樓盤資料'}
            </Text>
          </View>
          <View
            style={{flex: 1, justifyContent: 'center', alignItems: 'flex-end'}}>
            <Text
              style={{
                fontFamily: Fonts.ubuntu,
                color: 'white',
                fontSize: 17,
                marginRight: 20,
              }}>
              {this.store.text.next}
            </Text>
          </View>
        </View>
        {this.store.apartmentDataDoc.length <= 0 ? (
          <TouchableOpacity
            onPress={() => this.avatarHander()}
            style={{
              width: width,
              height: 250,
              backgroundColor: colors.inputBgc,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Icon name="plus" color={colors.textColor} size={50} />
          </TouchableOpacity>
        ) : (
          <View style={styles.imageView}>
            <Swiper
              onIndexChanged={index => (this.imageIndex = index)}
              showsButtons={false}
              dot={
                <View
                  style={{
                    backgroundColor: colors.textColor,
                    width: 8,
                    height: 8,
                    borderRadius: 4,
                    marginLeft: 3,
                    marginRight: 3,
                    marginTop: 3,
                    marginBottom: 3,
                  }}
                />
              }
              activeDot={
                <View
                  style={{
                    backgroundColor: colors.mainColor,
                    width: 8,
                    height: 8,
                    borderRadius: 4,
                    marginLeft: 3,
                    marginRight: 3,
                    marginTop: 3,
                    marginBottom: 3,
                  }}
                />
              }>
              {this.store.apartmentDataDoc.map((items, index) => {
                return (
                  <View style={styles.imageView}>
                    <Image style={styles.imageView} source={{uri: items.uri}} />
                  </View>
                );
              })}
            </Swiper>
            <TouchableOpacity
              onPress={() =>
                this.store.apartmentDataDoc.splice(this.imageIndex, 1)
              }
              style={{
                position: 'absolute',
                bottom: 20,
                left: 20,
                justifyContent: 'center',
                alignItems: 'center',
                height: 40,
                width: 40,
                borderRadius: 40,
                borderWidth: 1,
                borderColor: 'white',
                backgroundColor: colors.mainColor,
              }}>
              <Icon2
                name="close"
                size={30}
                color="white"
                style={{marginTop: 5}}
              />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                this.avatarHander();
              }}
              style={{
                position: 'absolute',
                bottom: 20,
                right: 20,
                justifyContent: 'center',
                alignItems: 'center',
                height: 40,
                width: 40,
                borderRadius: 40,
                borderWidth: 1,
                borderColor: 'white',
                backgroundColor: colors.mainColor,
              }}>
              <Icon2
                name="file-plus"
                size={20}
                color="white"
                style={{marginTop: 3}}
              />
            </TouchableOpacity>
          </View>
        )}

        <View style={{flex: 1, marginRight: 20, marginLeft: 20, marginTop: 20}}>
          <Text style={{fontFamily: Fonts.ubuntu, fontSize: 20}}>
            {'樓盤資料'}
          </Text>
          <TouchableOpacity
            style={styles.inputTextView}
            onPress={() => {
              history.push(this, '/apartmentNameAddressEdit');
            }}>
            <View style={{flexDirection: 'row', marginBottom: 5}}>
              <View style={{flex: 0.8}}>
                <Text
                  style={{
                    fontSize: 20,
                    color: colors.textColor,
                    fontFamily: Fonts.ubuntuTh,
                  }}>
                  {this.apartmentNameReturn()}
                </Text>
              </View>
              <TouchableOpacity
                style={{flex: 0.2, alignItems: 'flex-end', marginRight: 10}}
                onPress={() => {
                  this.store.apartmentData.name = '';
                }}>
                <Icon name="times-circle" color={'black'} size={20} solid />
              </TouchableOpacity>
            </View>
          </TouchableOpacity>
          <View style={[styles.inputTextView, {marginTop: 20}]}>
            <View style={{flexDirection: 'row', marginBottom: 5}}>
              <View style={{flex: 0.8}}>
                <TextInput
                  placeholder={this.store.text.address}
                  placeholderTextColor={colors.textColor}
                  style={{
                    fontSize: 20,
                    color: colors.textColor,
                    fontFamily: Fonts.ubuntuTh,
                  }}
                  onChangeText={text =>
                    (this.store.apartmentData.address = text)
                  }
                  value={this.store.apartmentData.address}
                />
              </View>
              <TouchableOpacity
                style={{flex: 0.2, alignItems: 'flex-end', marginRight: 10}}
                onPress={() => {
                  this.store.apartmentData.address = '';
                }}>
                <Icon name="times-circle" color={'black'} size={20} solid />
              </TouchableOpacity>
            </View>
          </View>
          <Menu
            name="floor"
            renderer={SlideInMenu}
            onSelect={value => this.floorSelect(value)}>
            <MenuTrigger style={styles.inputTextView}>
              <View style={{flexDirection: 'row', marginBottom: 5}}>
                <View style={{flex: 1}}>
                  <Text
                    style={{
                      fontSize: 20,
                      color: colors.textColor,
                      fontFamily: Fonts.ubuntuTh,
                    }}>
                    {this.floorStringReturn()}
                  </Text>
                </View>
              </View>
            </MenuTrigger>
            <MenuOptions
              customStyles={{
                optionText: {
                  margin: 5,
                  fontFamily: Fonts.ubuntu,
                  color: 'white',
                },
                optionWrapper: {
                  backgroundColor: colors.mainColor,
                  alignItems: 'center',
                },
              }}>
              <MenuOption
                value={'low'}
                text={this.store.text.low + this.store.text.floor}
              />
              <MenuOption
                value={'middle'}
                text={this.store.text.middle + this.store.text.floor}
              />
              <MenuOption
                value={'high'}
                text={this.store.text.high + this.store.text.floor}
              />
            </MenuOptions>
          </Menu>
          <View style={[styles.inputTextView, {marginTop: 20}]}>
            <View style={{flexDirection: 'row', marginBottom: 5}}>
              <View style={{flex: 0.8}}>
                <TextInput
                  placeholder={this.store.text.unit}
                  placeholderTextColor={colors.textColor}
                  style={{
                    fontSize: 20,
                    color: colors.textColor,
                    fontFamily: Fonts.ubuntuTh,
                  }}
                  onChangeText={text => (this.store.apartmentData.unit = text)}
                  value={this.store.apartmentData.unit}
                />
              </View>
              <TouchableOpacity
                style={{flex: 0.2, alignItems: 'flex-end', marginRight: 10}}
                onPress={() => {
                  this.store.apartmentData.unit = '';
                }}>
                <Icon name="times-circle" color={'black'} size={20} solid />
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </MenuProvider>
    );
  }
}
const styles = StyleSheet.flatten({
  inputTextView: {
    marginTop: 20,
    borderBottomWidth: 1,
    borderBottomColor: colors.line2Color,
    height: 30,
  },
  imageView: {
    width: width,
    height: 250,
  },
});
