import React, { Component } from "react"
import { View, Text, TouchableOpacity, StyleSheet, Modal, ListView, Button, TextInput } from 'react-native';
import { IbaseStyleExtend, IbaseEventExpand } from "../aim/face"

import Icon from '../item/icon'

import BaseFunc from '../base/func'
import BaseDefine from '../base/define'
import { IformState, IformProp, IformOption } from '../aim/form'
import OperateForm from '../operate/form'
import OperateData from '../operate/data'
import PlusItemBook from '../item/book'
interface State extends IformState {

  modalVisible: boolean,
  dataSource,
  maxNumber: number
  inputText: string

  sourceInfo: IformOption[]
}

interface Prop extends IformProp, IbaseStyleExtend, IbaseEventExpand {

  //文本样式
  styleMainText,
  style,
  /**
   * 最多选择数量  默认为1
   * 
   * @type {number}
   * @memberOf Prop
   */
  formMaxSize: string
  /**
   * 选择文本
   * 
   * @type {string}
   * @memberOf Prop
   */
  styleHeaderText: string


}




var styles: IbaseStyleExtend = {

  styleMainView: {
    flex: 1
  },

  styleMainTouch: {
    flexDirection: 'row',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  styleMainText: {
    flex: 1,
    paddingLeft: 10,
    paddingRight: 10
  },
  styleMainIcon: {
    fontSize: 24
  },

  styleModalBox: {
    flex: 1,
    justifyContent: 'space-between',

    backgroundColor: "rgba(0, 0, 0, 0.5)"
  },
  styleLayoutTop: {
    

  },
  styleLayoutCenter: {


    backgroundColor: '#ffffff',

  },
  styleHeaderBox: {
    padding: 10,
    flexDirection: "row",
    borderBottomWidth: 1,
    backgroundColor: '#fefefe',
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomColor: '#d8d8d8'
  },

  styleHeaderText: {
    flex: 1,
    textAlign: 'center',
    lineHeight: 25,
    fontSize: 18,
    color: '#333333'
  },
  styleModalContent: {
    paddingLeft:20,
    paddingBottom:15,
    paddingTop:17,
    maxHeight:450
  },

  styleItemBox: {
    flexDirection: "row",
    flex: 1,
  },
  styleItemTouch: {
    flexDirection: "row",
    alignItems:'center',
    
    paddingBottom:6
  },

  styleItemIcon: {
    fontSize: 20,
   
  },
  styleItemText: {
    fontSize: 16,
    
    paddingLeft: 10,
    paddingRight: 10,
  },
  styleInputBox: {
    flex: 1,
    borderBottomWidth: 1,
    borderBottomColor: '#d8d8d8'
  },
  styleInputText: {
    flex: 1,
    height: 30,


  }
};



/**
 * Hello
 */
export default class extends Component<Prop, State>{


  currentDataSource: IformOption[] = []



  upSelect(iType) {
    var aReturn = [];


    this.currentDataSource.forEach(
      (forItem) => {
        if (forItem.checked) {



          if (forItem.type == "input") {

            aReturn.push(iType == 0 ? '#' + this.state.inputText : forItem.text + this.state.inputText);
          }
          else {
            aReturn.push(iType == 0 ? forItem.value : forItem.text);
          }
        }
      }
    );


    return aReturn.join(',');
  }


  constructor(props: Prop) {
    super(props);
    var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    OperateForm.inRegexField(props.name, props.formRegexCode);

    //let dataSource: IformOption[] = [];

    let sSourceItem = "20041001";
    //console.warn(props.formSourceItems);

    if (props.formSourceItems != undefined) {

      sSourceItem = props.formSourceItems;
    }



    let formData = OperateData.dataItem.upValue(sSourceItem);




    let sNowValue = OperateForm.upFormValue(props.name, props.formDefaultValue != undefined ? props.formDefaultValue : '');


    let oObjectValue = {}



    if (formData != undefined) {

      let jsonData = formData;

      for (var p in jsonData) {

        this.currentDataSource.push({
          text: jsonData[p],
          value: p,
          checked: BaseFunc.stringArrayOption(sNowValue, p, 5) != '' ? true : false,
          type: p.endsWith('9999') ? 'input' : ''
        }
        );

      }

    }

    let iMaxNumber = 1;
    if (props.formMaxSize != undefined) {
      iMaxNumber = parseInt(props.formMaxSize);
    }


    let sInputText = '';
    sNowValue.split(',').forEach(
      (fStr) => {
        if (fStr.startsWith('#')) {
          sInputText = fStr.substr(1);
        }
      }
    );


    //console.warn(this.props.formDataItems);
    //console.warn(JSON.stringify(props));


    //let dataSource = [{ text: '1234', value: '1234' }, { text: '5678', value: '9012' }];

    this.state = { currentText: this.upSelect(1), currentValue: sNowValue, sourceInfo: this.currentDataSource, inputText: '', modalVisible: false, dataSource: ds, maxNumber: iMaxNumber };


  }

  saveValue(sValue) {
    OperateForm.inFormValue(this.props.name, this.upSelect(0));

    OperateForm.inFormFieldExtendText(this.props.name, this.upSelect(1));
    //OperateForm.inFormValue(this.props.name + BaseDefine.upPlusDefine().formFieldText, this.upSelect(1));
  }



  componentDidMount() {
    this.setState({ dataSource: this.state.dataSource.cloneWithRows(this.currentDataSource) });


  }

  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  }

  clickOk() {
    this.saveValue(this.state.currentValue);


    this.setState({ currentText: this.upSelect(1), modalVisible: false });
    //this.setModalVisible(false);

  }

  _pressRow(item: IformOption) {



    let bVisible = true;

    if (this.state.maxNumber > 1) {


      //let oNewData = [];

      for (var i = 0, j = this.currentDataSource.length; i < j; i++) {
        if (this.currentDataSource[i].value === item.value) {

          this.currentDataSource[i].checked = !this.currentDataSource[i].checked;

        }


      }


      var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
      this.setState({ currentValue: this.upSelect(0), dataSource: ds.cloneWithRows(this.currentDataSource), modalVisible: bVisible });



    } else {


      for (var i = 0, j = this.currentDataSource.length; i < j; i++) {
        if (this.currentDataSource[i].value === item.value) {
          this.currentDataSource[i].checked = true;
        } else {
          this.currentDataSource[i].checked = false;
        }
      }
      //如果是单个  直接保存值
      this.saveValue(item.value);

      bVisible = false;

      this.setState({ currentText: this.upSelect(1), currentValue: this.upSelect(0), modalVisible: bVisible });

    }




  }

  _renderRow(item: IformOption) {

    return (
      <View>

        <View style={[styles.styleItemBox]}>
          <TouchableOpacity style={[styles.styleItemTouch]} onPress={() => this._pressRow(item)}>
            
              {
                item.checked ?
                  <Icon pName={this.state.maxNumber > 1 ? "checkbox-marked" : "radiobox-marked"} style={styles.styleItemIcon} /> :
                  <Icon pName={this.state.maxNumber > 1 ? "checkbox-blank-outline" : "radiobox-blank"} style={styles.styleItemIcon} />
              }

            
            <Text style={[this.props.styleItemText,styles.styleItemText]}>{item.text}</Text>
          </TouchableOpacity>
          {item.type == 'input' && item.checked ? (<View style={styles.styleInputBox}><TextInput style={styles.styleInputText} onChangeText={(value) => { this.setState({ inputText: value }) }} value={this.state.inputText}  ></TextInput></View>) : null}
        </View>


      </View>
    );
  }



  _pressReport(item: IformOption) {



    if (this.state.maxNumber > 1) {


      //let oNewData = [];

      for (var i = 0, j = this.currentDataSource.length; i < j; i++) {
        if (this.currentDataSource[i].value === item.value) {

          this.currentDataSource[i].checked = !this.currentDataSource[i].checked;

        }


      }

    } else {


      for (var i = 0, j = this.currentDataSource.length; i < j; i++) {
        if (this.currentDataSource[i].value === item.value) {
          this.currentDataSource[i].checked = true;
        } else {
          this.currentDataSource[i].checked = false;
        }
      }

    }

    this.saveValue(this.upSelect(0));

    this.setState({ currentText: this.upSelect(1), currentValue: this.upSelect(0), sourceInfo: this.currentDataSource });

    if (this.props.onValueChange != undefined) {
      this.props.onValueChange(item);
    }

  }



  render() {



    let sShowType = this.props.formShowType;
    if (sShowType === "report") {


      var aItems = [];

      this.state.sourceInfo.forEach((fItem) => {

        aItems.push(
          <TouchableOpacity style={fItem.checked ? [this.props.styleItemTouch, this.props.styleItemActive] : [this.props.styleItemTouch]} key={fItem.value} onPress={() => this._pressReport(fItem)} >
            <View style={this.props.styleItemBox}>
              {
                fItem.checked ?
                  <Icon pName={this.state.maxNumber > 1 ? "checkbox-marked" : "radiobox-marked"} style={this.props.styleItemIcon} /> :
                  <Icon pName={this.state.maxNumber > 1 ? "checkbox-blank-outline" : "radiobox-blank"} style={this.props.styleItemIcon} />
              }
              <Text style={[this.props.styleItemText]}>{fItem.text}</Text>
            </View>
          </TouchableOpacity>
        )
      });



      return (
        <View style={this.props.styleMainView}>

          {
            aItems
          }
        </View>



      )


    }
    else if (OperateForm.upFormType(this.props.name) === "book") {
      return (
        <PlusItemBook pText={this.state.currentText}>
        </PlusItemBook>
      );
    }
    else {
      return (

        <TouchableOpacity style={[styles.styleMainTouch, this.props.style]} onPress={() => this.setModalVisible(true)}>
          <Text style={[styles.styleMainText, this.props.styleMainText]}>{this.state.currentText}</Text>
          <Icon style={styles.styleMainIcon} pName="chevron-right" />
          <Modal
            animationType={"none"}
            transparent={true}
            visible={this.state.modalVisible}
            onRequestClose={() => { }}
          >
            <View style={[styles.styleModalBox]}>
              <View style={styles.styleLayoutTop}>
              </View>
              <View style={[styles.styleLayoutCenter]}>
                <View style={[styles.styleHeaderBox]}>
                  <View>
                    <Button onPress={() => {
                      this.setModalVisible(false);
                    }} title={BaseFunc.upLang(12002)}></Button>
                  </View>
                  <Text style={[styles.styleHeaderText]}>
                    {BaseFunc.stringEmptyDefault(this.props.styleHeaderText, BaseFunc.upLang(12191))}
                  </Text>
                  <View>
                    <Button onPress={() => {
                      this.clickOk()
                    }} title={BaseFunc.upLang(12001)}></Button>
                  </View>
                </View>


                <View style={[styles.styleModalContent]}>
                  <ListView 
                    dataSource={this.state.dataSource}
                    renderRow={this._renderRow.bind(this)}
                  />
                  
                </View>
                
                <View>





                </View>



              </View>
            </View>
          </Modal>
        </TouchableOpacity>

      );
    }
  }


}