import React, { PureComponent } from 'react';
import {
  View,
  StyleSheet,
  Text,
  TouchableOpacity,
  Image,
  Platform,
  ScrollView,
} from 'react-native';
import TagInput from 'react-native-tag-input';
import { InputItem } from 'antd-mobile';
import { createOperations, editResource, uploadResource } from '../services/resource';
import { currentDomain } from '../services/domain';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  view_header_container: {
    height: 56,
    backgroundColor: 'white',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  text_right_title: {
    color: '#000',
  },
  text_left_title: {
    color: '#000',
  },
  text_title: {
    color: '#000',
    fontSize: 18,
  },
  // uploadImage: {
  //   height: Dimensions.get('window').height,
  //   width: Dimensions.get('window').width,
  // },
});
const inputProps = {
  keyboardType: 'default',
  placeholder: '如：身份证',
  autoFocus: true,
  style: {
    fontSize: 14,
    marginVertical: Platform.OS === 'ios' ? 10 : -2,
  },
};
class UploadPageComponent extends PureComponent {
  constructor(props) {
    super(props);
    const { imageURI, tableName, pID } = this.props.navigation.state.params;
    this.state = {
      imageURI,
      tableName,
      pID,
      tags: ['身份证', '红本', '绿本'],
      text: '',
      imageName: '',
    };
  }

  onChangeTags = (tags) => {
    this.setState({ tags });
  };
  onChangeText = (text) => {
    this.setState({ text });

    const lastTyped = text.charAt(text.length - 1);
    const parseWhen = [',', ' ', ';', '\n'];

    if (parseWhen.indexOf(lastTyped) > -1) {
      this.setState({
        tags: [...this.state.tags, this.state.text],
        text: '',
      });
    }
  };

  onCancel = () => {
    this.props.onCancel();
  };
  onUploadPhoto = () => {
    uploadResource(
      this.state.imageURI,
      (uploadId, arg) => console.info(arg),
      (uploadId, arg) => {
        currentDomain()
          .then((result) => {
            editResource(arg, createOperations().setName(this.state.imageName).setTags(this.state.tags).use(`rel://${result.path}/${this.state.tableName}/${this.state.pID}`)).then(cc => console.info(cc)).catch(err => console.info(`上传后改名字改tag:${err}`));
            console.info('跳转');
            this.props.navigation.navigate('DSRInfoDetail', { id: this.props.navigation.state.params.pID });
          })
          .catch(err => console.info(err));
      },
    )
      .then(uploadId => console.log(`start task ${uploadId}`))
      .catch(err => console.log(`上传失败：${err}`));
  };
  setImageName = (val) => {
    console.info(`val:${val}`);
    this.setState({ imageName: val });
  }
  labelExtractor = tag => tag;
  renderHeaderMenu = () => {
    return (
      <View style={[styles.view_header_container, { backgroundColor: 'lightgray' }]}>
        <TouchableOpacity
          onPress={this.onCancel}
        >
          <Text style={[styles.text_left_title, { color: '#2196F3' }]}>取消</Text>
        </TouchableOpacity>
        <Text style={styles.text_title}>传照片</Text>
        <TouchableOpacity
          onPress={this.onUploadPhoto}
        >
          <Text style={[styles.text_right_title, { color: '#2196F3' }]}>
            上传
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
  render() {
    return (
      <View style={styles.container}>
        {this.renderHeaderMenu()}
        <ScrollView>
          <Image
            style={{ height: 80, width: 80 }}
            source={{ uri: this.state.imageURI, isStatic: true }}
          />
          <InputItem
            placeholder="如：张三"
            data-seed="logId"
            onChange={this.setImageName}
          >照片名称
          </InputItem>
          <View style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: 'lightgray' }}>
            <Text>类型</Text>
            <TagInput
              value={this.state.tags}
              onChange={this.onChangeTags}
              labelExtractor={this.labelExtractor}
              text={this.state.text}
              onChangeText={this.onChangeText}
              tagColor="blue"
              tagTextColor="white"
              inputProps={inputProps}
              maxHeight={75}
            />
          </View>
        </ScrollView>
      </View>
    );
  }
}


export default UploadPageComponent;

