import React, {Component} from 'react';
import {
  View,
  Image,
  Text,
  FlatList,
  TextInput,
  TouchableOpacity,
  DeviceEventEmitter,
  ScrollView,
  SafeAreaView,
  StyleSheet,
  Dimensions,
  PixelRatio,
} from 'react-native';
import {List, SwipeAction, WhiteSpace, Radio} from '@ant-design/react-native';
import DragSortableView from 'react-native-drag-sort/DragSortableView';

import {ShowToast} from '../../components/rootToast/root_toast';
import public_css from '../../source/css/public_css';

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

const parentWidth = width;
const childrenWidth = width;
const childrenHeight = 48;
const RadioItem = Radio.RadioItem;
export default class invoice_user extends Component {
  constructor(props) {
    super(props);
    this.state = {
      type: this.props.route.params.type,
      user: [],
      userName: '',
    };
  }

  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: '#ffffff',
          display: 'flex',
        }}>
        <View style={{alignItems: 'center'}}>
          <View style={[public_css.view, public_css.lineTopBottom]}>
            <Text style={public_css.text}>人员添加:</Text>
            <TextInput
              style={public_css.textInputStyle}
              placeholder="请输入需要添加的人员姓名"
              clearButtonMode="while-editing"
              secureTextEntry={false}
              onChangeText={value => {
                this.setState({
                  userName: value,
                });
              }}
              value={this.state.userName}
            />
            <View>
              <TouchableOpacity
                onPress={() => {
                  this.addUser();
                }}>
                <Image
                  source={require('../../source/img/productImg/addIcon.png')}
                  style={{height: 16, width: 16}}
                />
              </TouchableOpacity>
            </View>
          </View>
        </View>
        <View style={{alignItems: 'center', margin: 5}}>
          <Text>人员姓名</Text>
        </View>
        <View style={{flex: 1}}>
          <FlatList
            data={this.state.user}
            renderItem={item => this.renderItem(item)}
          />
        </View>
        <View style={public_css.bottomStaus}>
          <TouchableOpacity
            style={[public_css.statusBtn, public_css.statusLBtn]}
            onPress={() => {
              this.setState({
                user: '',
                userName: '',
              });
            }}>
            <Image
              source={require('../../source/img/productImg/clear.png')}
              style={{width: 32, height: 32}}
            />
            <Text>全部清除</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[public_css.statusBtn, public_css.statusRBtn]}
            onPress={() => this.submitData()}>
            <Image
              source={require('../../source/img/productImg/confirm.png')}
              style={{width: 32, height: 32}}
            />
            <Text style={{color: '#fff'}}>确定</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  //显示页面加载
  componentDidMount(): void {
    if (this.props.route.params.type == 1) {
      let payees = this.props.route.params.data.state.payees;
      if (payees != null || payees != '') {
        if (payees.length > 0) {
          let list = payees.split(',');
          let userList = list.map((_, i) => ({
            key: i,
            name: list[i],
          }));
          this.setState({
            user: this.state.user.concat(userList),
            userName: '',
          });
        }
      }
    }
    if (this.props.route.params.type == 2) {
      let reviewers = this.props.route.params.data.state.reviewers;
      if (reviewers != null) {
        if (reviewers.length > 0) {
          let list = reviewers.split(',');
          let userList = list.map((_, i) => ({
            key: i,
            name: list[i],
          }));
          this.setState({
            user: this.state.user.concat(userList),
            userName: '',
          });
        }
      }
    }
  }

  //关闭页面加载
  componentWillUnmount(): void {
    this.timer && clearTimeout(this.timer);
  }

  //显示侧滑按钮
  right = data => [
    {
      text: '删除',
      onPress: () => {
        this.deleteData(data);
      },
      style: {backgroundColor: 'red', color: 'white'},
    },
  ];

  //删除用户信息
  deleteData = data => {
    let listData = this.state.user;
    const prevIndex = listData.findIndex(item => item.key === data.key);
    listData.splice(prevIndex, 1);
    let userList = listData.map((_, i) => ({
      key: i,
      name: listData[i].name,
    }));
    this.setState({
      user: userList,
    });
  };

  //添加人员信息
  addUser = () => {
    if (this.state.userName.length > 0) {
      let user = {
        key: this.state.user.length,
        name: this.state.userName,
      };
      this.setState({
        user: this.state.user.concat(user),
        userName: '',
      });
    } else {
      ShowToast('请输入人员姓名！');
      return;
    }
  };

  //提交用户信息
  submitData = (data) => {
    if (this.state.type == 1) {
      this.props.route.params.data.setPayees(data.name);
    }
    if (this.state.type == 2) {
      this.props.route.params.data.setReviewers(data.name);
    }
    this.props.navigation.goBack();
  };

  //加载items
  renderItem = data => (
    <SwipeAction
      autoClose
      style={{backgroundColor: 'transparent'}}
      right={this.right(data)}>
      <List.Item onPress={() => this.submitData(data.item)}>
        <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
          <Text>{data.item.name} </Text>
        </View>
      </List.Item>
    </SwipeAction>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
  },
  item: {
    width: childrenWidth,
    height: childrenHeight,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
    borderBottomWidth: 3 / PixelRatio.get(),
    borderColor: 'rgb(208,208,208)',
  },
  item_children: {
    width: childrenWidth,
    height: childrenHeight - 4,
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    alignItems: 'center',
  },
  item_icon: {
    width: childrenHeight * 0.6,
    height: childrenHeight * 0.6,
    marginLeft: 15,
    resizeMode: 'contain',
  },
  item_text: {
    marginRight: 15,
    color: '#2ecc71',
  },
});