content: import React from 'react';
  import { View, StyleSheet, Dimensions, Alert, FlatList, TouchableHighlight, BackHandler, NativeEventEmitter  } from 'react-native';
  import Text from 'text/Text';
  import Form, {FormHeader, FormBody} from 'ui/Form';
  import AppStyles from 'dedicate/AppStyles';
  import Textbox from 'fields/Textbox';
  import Picker from 'fields/Picker';
  import ListPicker from 'fields/ListPicker';
  import Button from 'buttons/Button';
  import ButtonPlus from 'buttons/ButtonPlus';
  import ButtonClose from 'buttons/ButtonClose';
  import ButtonOutline from 'buttons/ButtonOutline';
  import ButtonAddListItem from 'buttons/ButtonAddListItem';
  import IconArrowRight from 'icons/IconArrowRight';
  import ToolTip from 'tooltip/Top';
  import DbTasks from 'db/DbTasks';
  import DbLists from 'db/DbLists';
  import DbCategories from 'db/DbCategories';
  import DataTypes from 'utility/DataTypes';
  import Currencies from 'utility/Currencies';
  
  export default class TaskScreen extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              title:'New Task',
              task:{
                  id: props.navigation.state.params ? props.navigation.state.params.taskId : null,
                  name:'',
                  inputs:[], // {name:'', type:0},
                  category:{id:-1, name:''}
              },
              existingTask:{},
              categories:[],
              categoryList:[{value:-1, label:'None'}],
              focusIndex:null,
              nameIndex: Math.floor(Math.random() * (this.placeHolderNames.length)),
              categoryIndex: Math.floor(Math.random() * (this.categories.length)),
              edited: false,
              newcat: {name:''}
          }
  
          //create emitter
          this.updateEmitter = new NativeEventEmitter();
  
          //bind methods
          this.hardwareBackPress = this.hardwareBackPress.bind(this);
          this.navigate = this.navigate.bind(this);
          this.loadToolbar = this.loadToolbar.bind(this);
          this.loadTask = this.loadTask.bind(this);
          this.onPressCreateCategory = this.onPressCreateCategory.bind(this);
          this.onNewCategoryTitleChangeText = this.onNewCategoryTitleChangeText.bind(this);
          this.shouldFocusInputField = this.shouldFocusInputField.bind(this);
          this.onFocusInputField = this.onFocusInputField.bind(this);
          this.onFocusTaskLabel = this.onFocusTaskLabel.bind(this);
          this.onInputLabelChangeText = this.onInputLabelChangeText.bind(this);
          this.onPickerValueChange = this.onPickerValueChange.bind(this);
          this.onOptionValueChange = this.onOptionValueChange.bind(this);
          this.onSubmitEditing = this.onSubmitEditing.bind(this);
          this.onRemoveInputField = this.onRemoveInputField.bind(this);
          this.onAddListItem = this.onAddListItem.bind(this);
          this.onUpdateListState = this.onUpdateListState.bind(this);
          this.onSelectList = this.onSelectList.bind(this);
      }
  
      // Component Events  //////////////////////////////////////////////////////////////////////////////////////
      componentWillMount(){
          BackHandler.addEventListener('hardwareBackPress', this.hardwareBackPress);
          //listen to navigation emitter
          this.navigatorEmitter = new NativeEventEmitter();
          this.navigatorSubscription = this.navigatorEmitter.addListener('navigate', this.navigate);
      }
  
      componentDidMount(){
          requestAnimationFrame(() => {
              const categories = this.getDbCategories();
              const categoryList = this.getCategoriesForPicker(categories);
              this.setState({categories:categories, categoryList:categoryList}, () => {
                  //load task (if specified)
                  this.loadTask();
                  this.loadToolbar();
              });
          });
      }
  
      componentWillUnmount () {
          BackHandler.removeEventListener('hardwareBackPress', this.hardwareBackPress);
          this.navigatorSubscription.remove();
      }
  
      componentDidUpdate(){
          if(this.props.navigation.state.params.taskId != null && this.props.navigation.state.params.taskId != this.state.task.id){
              this.loadTask();
              this.loadToolbar();
              this.props.navigation.state.params = {};
          }
      }
  
      hardwareBackPress() {
          const goback = this.props.navigation.getParam('goback', 'Tasks');
          global.navigate(this, goback);
          return true;
      }
  
      navigate(screen, props, prevScreen){
          if(screen == 'Task' && prevScreen != screen){
              this.loadToolbar();
          }
      }
  
      // Load Toolbar ////////////////////////////////////////////////////////////////////////////////////////////////////
  
      loadToolbar(){
          global.updateToolbar({
              ...this.props, 
              screen:'Task',
              buttonAdd:false, 
              buttonRecord:true, 
              bottomFade:true, 
              hasTasks:true, 
              hasRecords:true,
              footerMessage: ''
          });
      }
  
      // Load Task
      loadTask(){
          if(this.props.navigation.state.params.taskId != null){
              //load task details
              const dbTasks = new DbTasks();
              let task = {
                  id:this.props.navigation.state.params.taskId,
                  name:"",
                  inputs:[],
                  category:{id:-1, name:''}
              };
              const dbtask = dbTasks.GetTask(task.id);
              task.name = dbtask.name;
              task.inputs = [];
              if(dbtask.inputs != null){
                  for(let x in dbtask.inputs){
                      const input = dbtask.inputs[x];
                      task.inputs.push({name:input.name, key:input.id, type:input.type, option:input.option});
                  }
              }
              if(dbtask.category){
                  task.category = {id:dbtask.category.id, name:dbtask.category.name};
              }else{
                  task.category = {id:-1, name:''}
              }
              this.setState({
                  task:task, 
                  existingTask:JSON.parse(JSON.stringify(task)),
                  title: 'Edit Task'
              });
          }
      }
  
      // Placeholder Random Names ////////////////////////////////////////////////////////////////////////////////////////////////
  
      placeHolderNames = [
          "Pushups", "Exercise", "Jogging", "Cook food", "Read a book", "Watch a movie",
          "Go Swimming", "Ride bike", "Go camping", "Go hiking"
      ];
  
      placeHolderInputs = [
          "Count", "Sets", "Miles", "Recipe", "Pages", "Minutes",
          "Laps", "Miles", "Miles", "Miles"
      ];
  
      placeholderTaskName() {
          return this.placeHolderNames[this.state.nameIndex];
      }
  
      placeholderInputName() {
          return this.placeHolderInputs[this.state.nameIndex];
      }
  
      // Categories ////////////////////////////////////////////////////////////////////////////////////////////////
  
      categories = ['Personal Tasks', 'Side Projects', 'Exercise Routines', 'Dieting', 'Shopping', 'Research', 
      'Web Design', 'College', 'Cooking Recipes', 'Video Games', 'Vacation', 'Before Bed', 'Good Morning', 
      'Finances', 'Vehicle Maintenance', 'Medicine', 'Cleaning', 'Conventions', 'Concerts', 'Weekend Projects'];
      
      getDbCategories(){
          const dbCat = new DbCategories;
          return dbCat.GetCategoriesList().map((cat) => {
              return {id:cat.id, name:cat.name}  
          });
      }
  
      getCategoriesForPicker(categories){
          return categories.length > 0 ? 
              [{id:-1, name:'None'}, ...categories].map((cat) => {
                  return {id: cat.id, value:cat.id, label:cat.name};
              }) :
              [{id:-1, value:-1, label:'None'}];
      }
  
      onPressAddCategory = () => {
          this.setState({categoryIndex: Math.floor(Math.random() * (this.categories.length))});
          global.Modal.setContent('Add A New Category',(
              <View style={[this.styles.modalContainer, {minWidth:300}]}>
                  <Text style={this.styles.fieldTitle}>Label</Text>
                  <Textbox 
                      defaultValue={this.state.newcat.name}
                      style={this.styles.inputField} 
                      placeholder={this.categories[this.state.categoryIndex]}
                      returnKeyType={'done'}
                      onChangeText={this.onNewCategoryTitleChangeText}
                      maxLength={25}
                  />
                  <View style={this.styles.createCategoryButton}>
                      <Button text="Create Category" onPress={this.onPressCreateCategory}/>
                  </View>
              </View>
          ));
          global.Modal.show();
      }
  
      onNewCategoryTitleChangeText = (text) => {
          let newcat = this.state.newcat;
          newcat.name = text;
          this.setState({newcat:newcat});
      }
  
      onPressCreateCategory(){
          if(this.state.newcat.name == ''){
              Alert.alert('Create Category Error', 'You must provide a label for your new category');
              return;
          }
          const dbCat = new DbCategories;
          let task = this.state.task;
          
          const id = dbCat.CreateCategory(this.state.newcat);
          task.category.id = id;
          task.category.name = this.state.newcat.name;
          let cats = this.getDbCategories();
          this.setState({newcat:{name:''}, task:task, categories:cats}, 
          () => {
              this.setState({categoryList:this.getCategoriesForPicker(cats)});
              this.validateForm();
              global.Modal.hide();
          });
      }
  
      onCategoryValueChange = (value, index, label) => {
          let task = this.state.task;
          if(task.category == null){ task.category = {}; }
          task.category.name = label;
          task.category.id = value;
          this.setState({task:task});
          this.validateForm();
      }
  
      // Add Input ////////////////////////////////////////////////////////////////////////////////////////////////
  
      onPressAddInput = () => {
          const inputs = this.state.task.inputs;
          let show = true;
          if(inputs.length == 9){
              show = false;
          }
          let task = this.state.task;
          let max = inputs.map(function(attrs){return attrs.key;}).reduce(function (a, b) { return (b > a) ? b : a; }, 0);
          task.inputs.push({name:'', type:0, option:null, key:max + 1, isnew:true, isnewkey:true});
          this.setState({
             task:task,
             ButtonAddShow:show //show Button
          }, () => {
              this.validateForm();
          });
          
      }
  
      // Input Changes ////////////////////////////////////////////////////////////////////////////////////////////////
  
      onLabelChangeText = text => {
          let task = this.state.task;
          task.name = text;
          this.setState({task:task});
          this.validateForm();
      }
  
      onInputLabelChangeText = (index, text) => {
          let task = this.state.task;
          task.inputs[index - 1].name = text;
          this.setState({ task: task });
          this.validateForm();
      }
  
      onPickerValueChange = (index, itemValue) => {
          let task = this.state.task;
          task.inputs[index - 1].type = itemValue;
          switch(itemValue){
              case 5: //currency
                  task.inputs[index - 1].option = global.config.currency;
                  break;
              case 8: //location
                  task.inputs[index - 1].option = 0;
                  break;
          }
          this.setState({task: task});
          this.validateForm();
      }
  
      onOptionValueChange = (index, itemValue) => {
          let task = this.state.task;
          task.inputs[index - 1].option = itemValue;
          this.setState({task: task});
          this.validateForm();
      }
  
      onSubmitEditing = (keyType, index) => {
          if(keyType == 'next'){
              this.refs['taskInput' + (index + 1)].refs['inputLabel'].focus();
          }else{
              this.refs['taskInput' + index].refs['inputLabel'].blur();
          }
          this.validateForm();
      }
  
      shouldFocusInputField = (index) => {
          let task = this.state.task;
          if(task.inputs[index-1].isnew === true){
              task.inputs[index-1].isnew = false;
              this.setState({task:task, focusIndex:index});
              return true;
          }
          return false;
      }
  
      onFocusInputField(event, index){
          if(this.state.focusIndex != index){
              this.setState({focusIndex:index});
          }
      }
  
      onFocusTaskLabel(){}
  
      // Input Field List Items //////////////////////////////////////////////////////////////////////////////////////
  
      onAddListItem(index, item){
          let task = this.state.task;
          let input = task.inputs[index-1];
          let exists = false;
          const dbLists = new DbLists();
  
          if(input.list == null){
              input.list = {id:null, add:[], remove:[], update:[]};
          }
          if(input.list.id != null){
              //list exists in database, check for duplicates in existing database
              if(dbLists.ListItemExists(input.list.id, item) == true){
                  //check remove array to see if duplicate item is set to be removed
                  if(input.list.remove.filter(a => a.label.toLowerCase() == item.label.toLowerCase()).length == 0){
                      exists = true;
                  }
              }
          }
          //check if item already exists in add array
          if(input.list.add.filter(a => a.label.toLowerCase() == item.label.toLowerCase()).length > 0){
              exists = true;
          }
          if(exists == true){
              Alert.alert('Create List Item Error', 'List Item with the same label already exists');
              return false;
          }
          input.list.add.push({label:item.label, value:item.value});
          task.inputs[index-1] = input;
          this.setState({task:task}, () => {
              this.validateForm();
          });
          return true;
      }
  
      onUpdateListState(index, state){
          //update list state (add, update, remove) arrays
          let task = this.state.task;
          let input = task.inputs[index-1];
          input.list = state;
          task.inputs[index-1] = input;
          this.setState({task:task}, () => {
              this.validateForm();
          });
      }
      
  
      // Input Field List //////////////////////////////////////////////////////////////////////////////////////
  
      onSelectList(index, list){
          let task = this.state.task;
          let input = task.inputs[index-1];
          input.option = list.id;
          input.name = list.name;
          task.inputs[index-1] = input;
          this.setState({task:task}, () => {
              this.validateForm();
          });
      }
  
      // Remove Input ////////////////////////////////////////////////////////////////////////////////////////////////
  
      onRemoveInputField = (index) => {
          let task = this.state.task;
          task.inputs.splice(index - 1, 1);
          this.setState({task:task, ButtonAddShow:true});
          this.validateForm();
      }
  
      // Delete Task ////////////////////////////////////////////////////////////////////////////////////////////////
  
      onDeleteTask = () => {
          Alert.alert(
          'Delete Task?',
          'Do you really want to delete this task? All data recorded about this task will also be permanently deleted as well.',
          [
              {text: 'Cancel', style: 'cancel'},
              {text: 'Delete Task', onPress: () => {
                  const db = new DbTasks();
                  db.DeleteTask(this.state.task.id);
          
                  //update charts within chart managers
                  this.updateEmitter.emit('update-charts', null, null, null, true);
  
                  if(db.TotalTasks() == 0){
                      global.navigate(this, 'Overview');
                  }else{
                      global.navigate(this, 'Tasks');
                  }
              }}
          ],
          { cancelable: true }
          )
      }
  
      // Form Validation ////////////////////////////////////////////////////////////////////////////////////////
  
      validateForm = () => {
          //validate form fields in order to show save button
          let show = false;
          if(this.state.task.name.length > 0){
              show = true;
              for(x = 0; x < this.state.task.inputs.length; x++){
                  if(this.state.task.inputs[x].name == ''){show = false; break;}
              }
          }
          if(this.state.edited != show){
              this.setState({edited:show});
          }
      }
  
      // Save Task ////////////////////////////////////////////////////////////////////////////////////////////////
  
      onPressButtonSave = () => {
          const dbTasks = new DbTasks();
          const inputs = this.state.task.id != null ? dbTasks.GetTask(this.state.task.id).inputs : [];
          let task = this.state.task;
          dbTasks.CreateTask(task);
          this.setState({task:{id:null, name:'',inputs:[],category:{id:-1, name:''}}}, () => {
          
              //update charts within chart managers
              this.updateEmitter.emit('update-charts', null, null, inputs.map(a => a.id));
              
              if(dbTasks.TotalTasks() == 1){
                  global.navigate(this, 'Overview');
              }else{
                  global.navigate(this, 'Tasks');
              }
          });
      }
  
      //Render Component ////////////////////////////////////////////////////////////////////////////////////////
      render() {
          const {width} = Dimensions.get('window');
          //generate input field list
          let inputFields = [];
          if(this.state.task.inputs.length > 0){
              // show list of Input Fields ///////////////////////////
              let i = 0;
              inputFields = this.state.task.inputs.map((input) => {
                  i++;
                  const e = i;
                  let keytype = 'next';
                  if(i == this.state.task.inputs.length){
                      keytype='done';
                  }else{
                      keytype='next';
                  }
                  return <TaskInputField ref={'taskInput' + e}
                      key={input.key + input.id} 
                      index={e} 
                      input={input} 
                      keytype={keytype} 
                      width={width} 
                      styles={this.inputStyles}
                      task={this.state.task} 
                      placeholder={this.placeholderInputName()}
                      focus={() => {return this.shouldFocusInputField(e)}}
                      onFocus={(event) => {this.onFocusInputField(event, e)}}
                      onChangeText={(text) => {this.onInputLabelChangeText(e, text)}}
                      onPickerValueChange={(itemValue, itemIndex) => {this.onPickerValueChange(e, itemValue, itemIndex)}}
                      onOptionValueChange={(itemValue, itemIndex) => {this.onOptionValueChange(e, itemValue, itemIndex)}}
                      onSubmitEditing={() => {this.onSubmitEditing(keytype.toString(), e)}}
                      onRemoveInputField={() => {this.onRemoveInputField(e)}}
                      onAddListItem={(item) => {return this.onAddListItem(e, item)}}
                      onUpdateListState={(state) => {return this.onUpdateListState(e, state)}}
                      onSelectList={(list) => {this.onSelectList(e, list)}}
                  />;
              });
  
          }else{
              // show description about Input Fields //////////////////
              inputFields = (
                  <View style={this.styles.containerDescription}>
                      <ToolTip background={AppStyles.altBackgroundColor} text="You can record data about your task by adding one or more input fields above"/>
                  </View>
              );
          }
  
          // Render Body ////////////////////////////////////////////////////////////////////////////////////////
          
          let i = 0;
          let labelKeyType = 'done';
          if(this.state.task.inputs.length >= 1)
          {
              labelKeyType = 'next';
          }
          return (
              <Form {...this.props} 
              title={this.state.title} screen="Task" bodyTitle="Input Fields" edited={this.state.edited}
              onPressAddInput={this.onPressAddInput} onPressSave={this.onPressButtonSave} backButton={this.hardwareBackPress}
              >
                  <FormHeader>
                      <View style={this.styles.headerContainer}>
                          <Text style={this.styles.fieldTitle}>Label</Text>
                          <Textbox 
                              ref="tasklabel"
                              value={this.state.task.name}
                              style={this.styles.inputField} 
                              placeholder={this.placeholderTaskName()}
                              returnKeyType={labelKeyType} 
                              onFocus={(event)=>{return this.onFocusTaskLabel(event)}}
                              blurOnSubmit={false}
                              onChangeText={this.onLabelChangeText}
                              onSubmitEditing={(event) => { 
                                  let ref = this.refs['taskInput1'];
                                  if(ref){
                                      ref.refs['inputLabel'].focus();
                                  }else{
                                      this.refs['tasklabel'].blur();
                                  }
                                  }}
                                  maxLength={24}
                          />
                          <View style={this.styles.categoryContainer}>
                              <View style={this.styles.categoryColumnOne}>
                                  <Text style={[this.styles.fieldTitle, this.styles.fieldCategory]}>Category</Text>
                              </View>
                              <View style={this.styles.categoryColumnTwo}>
                                  <ButtonPlus style={this.styles.buttonAddCategory} color={AppStyles.color} size="xsmall" onPress={this.onPressAddCategory} />
                              </View>
                              <View style={this.styles.categoryPicker}>
                                  <Picker
                                      style={this.styles.pickerStyle}
                                      selectedValue={this.state.task.category ? this.state.task.category.id : -1}
                                      onValueChange={this.onCategoryValueChange}
                                      items={this.state.categoryList}
                                      title="Select A Category"
                                  />
                              </View>
                          </View>
                      </View>
                  </FormHeader>
                  <FormBody>
                      <View style={this.styles.inputsContainer}>
                      {inputFields}
  
                      {this.state.task.id != null && (
                          <View style={this.styles.buttonDeleteContainer}>
                              <Button text="Delete Task" onPress={this.onDeleteTask}/>
                          </View>
                      )}
                      </View>
                  </FormBody>
              </Form>
          );
      }
  
      styles = StyleSheet.create({
          //task form
          headerContainer: {padding:AppStyles.paddingLarge},
          fieldTitle: {fontSize:AppStyles.fieldFontSize, fontWeight:'bold'},
      
          //category field
          categoryContainer:{width:'100%', paddingTop:AppStyles.paddingLarge},
          categoryColumnOne:{paddingTop:AppStyles.paddingXSmall, height:25},
          categoryColumnTwo:{position:'absolute', right:0, top:AppStyles.paddingLarge + 4},
          categoryPicker:{paddingTop:AppStyles.paddingXSmaller},
      
          // create category modal
          createCategoryButton:{paddingTop:AppStyles.paddingLarge, alignSelf:'center'},
      
          // inputs form
          inputsContainer:{paddingBottom:AppStyles.paddingFooterSpace},
          containerDescription: {paddingTop:AppStyles.paddingXLarge + AppStyles.paddingSmall, paddingHorizontal:AppStyles.paddingLarger, flexDirection:'column',  alignItems:'center'},
          inputField: {fontSize:AppStyles.titleFontSize},
      
          //delete button
          buttonDeleteContainer:{paddingTop:AppStyles.paddingLarger, alignItems:'center'},
      
          //new category modal window
          modalContainer:{backgroundColor:AppStyles.backgroundColor, minWidth:'50%', padding:AppStyles.paddingLarger}
      });
  
      //styling for TaskInputField class
      inputStyles = StyleSheet.create({
          inputFieldContainer:{position:'relative', paddingBottom:AppStyles.paddingSmall, marginBottom:AppStyles.paddingSmall, borderBottomColor: AppStyles.altSeparatorColor, borderBottomWidth:1},
          iconArrow:{position:'absolute', left:0, top:18 * AppStyles.vw},
          inputFieldRow: {width:'100%', flexDirection:'row', paddingLeft:AppStyles.paddingLarge, paddingRight:AppStyles.paddingLarger},
          inputFieldContainer:{paddingBottom:AppStyles.paddingSmall, marginBottom:AppStyles.paddingSmall, borderBottomColor: AppStyles.altSeparatorColor, borderBottomWidth:1},
          inputField: {fontSize:AppStyles.titleFontSize, marginRight:AppStyles.paddingSmaller},
          pickerStyle:{marginLeft:AppStyles.padding, width:130 * AppStyles.vw},
          buttonRemoveContainer:{position:'absolute', right:AppStyles.paddingMedium},
          buttonRemoveInput:{paddingVertical:AppStyles.padding, paddingHorizontal:AppStyles.paddingSmall, opacity:0.5},
          typeLabel:{ fontSize:AppStyles.titleFontSize, paddingTop:AppStyles.padding - 2, paddingLeft:AppStyles.padding, opacity:0.5},
  
          //list option
          inputFieldOptionRow: {position:'relative', justifyContent:'space-between', paddingRight:55 * AppStyles.vw},
          optionStyle:{width:'100%'},
          importList:{alignSelf:'flex-start', paddingTop:AppStyles.paddingSmall},
          listPickerContainer:{alignSelf:'flex-end', paddingLeft:AppStyles.padding},
          listPicker:{width:130 * AppStyles.vw},
          buttonAddListItem:{alignSelf:'flex-end', position:'absolute', top:AppStyles.padding, right:AppStyles.paddingLarge},
  
          //modal window
          modalContainer:{backgroundColor:AppStyles.backgroundColor, paddingTop:AppStyles.padding, paddingHorizontal:AppStyles.paddingLarger, paddingBottom:AppStyles.paddingLarger},
          inputField: {fontSize:AppStyles.titleFontSize},
  
          //list items modal window
          listItemContainer:{paddingVertical:AppStyles.padding, paddingHorizontal:AppStyles.paddingLarger, borderBottomColor: AppStyles.separatorColor, borderBottomWidth:1}
      });
  }
  
  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // Input Field /////////////////////////////////////////////////////////////////////////////////////////////////
  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  
  class TaskInputField extends React.Component{
      constructor(props){
          super(props);
          this.state = {
              labelKeyType:'done',
          };
  
          //bind methods
          this.onLayout = this.onLayout.bind(this);
          this.onChangeText = this.onChangeText.bind(this);
          this.onUpdateListState = this.onUpdateListState.bind(this);
          this.importList = this.importList.bind(this);
          this.selectListToImport = this.selectListToImport.bind(this);
      }
  
      onLayout(){
          if(this.props.focus() === true){
              try{
              this.refs['inputLabel'].focus();
              }catch(ex){}
          }
      }
  
      onChangeText(text){
          this.setState({label:text});
          this.props.onChangeText(text);
      }
  
      saveState(state){
          this.setState(state);
      }
  
      // Manage List Items ///////////////////////////////////////////////////////////////////////////////////////////////
      onUpdateListState(state){
          this.props.onUpdateListState(state);
      }
  
      // Select Existing List ////////////////////////////////////////////////////////////////////////////////////////////////
  
      importList = () => {
          const dbLists = new DbLists();
          global.Modal.setContent('Select Existing List',(
              <View style={[this.styles.modalContainer, {minWidth:300}]}>
                  {dbLists.GetLists().map(list => {
                      return (
                          <TouchableHighlight key={'list' + list.id} underlayColor={AppStyles.listItemPressedColor} onPress={() => this.selectListToImport(list)}>
                              <View style={this.styles.listItemContainer}>
                                  <Text style={this.styles.listItemText}>{list.name}</Text>
                              </View>
                          </TouchableHighlight>
                      );
                  })}
              </View>
          ));
          global.Modal.show();
      }
  
      selectListToImport(list){
          this.props.onSelectList(list);
          global.Modal.hide();
      }
  
      // Render Component ////////////////////////////////////////////////////////////////////////////////////////////////
  
      render(){
          let labelKeyType = 'done';
          if(this.props.task.inputs.length > this.props.index){
              labelKeyType = 'next';
          }
          let typeLabel = '';
          typeLabel = DataTypes.filter(d => this.props.input.type == d.value)[0].label;
          return (
              <View style={this.styles.inputFieldContainer} onLayout={this.onLayout}>
                  <View style={this.styles.iconArrow}><IconArrowRight size="xsmall"/></View>
                  <View style={this.styles.inputFieldRow}>
                      <View style={[this.styles.inputFieldLabel, {width:(this.props.width - 30 - (190 * AppStyles.vw))  }]}>
                          <Textbox 
                              ref={'inputLabel'} 
                              style={this.styles.inputField} 
                              placeholder={this.props.placeholder} 
                              returnKeyType={labelKeyType} 
                              onChangeText={(text) => this.onChangeText(text)}
                              onFocus={this.props.onFocus}
                              blurOnSubmit={false}
                              onSubmitEditing={this.props.onSubmitEditing}
                              value={this.props.input.name}
                              maxLength={16}
                              borderColor={AppStyles.altFieldOutlineColor}
                          />
                      </View>
                      <View>
                          {this.props.input.isnewkey == true ?
                              <Picker
                                  ref={'inputType'}
                                  style={this.styles.pickerStyle}
                                  selectedValue={this.props.input.type}
                                  onValueChange={this.props.onPickerValueChange}
                                  items={DataTypes}
                                  title="Select A Data Type"
                                  borderColor={AppStyles.altFieldOutlineColor}
                              />
                          :
                              <Text style={this.styles.typeLabel}>{typeLabel}</Text>
                          }
                      </View>
                      <View style={this.styles.buttonRemoveContainer}>
                          <ButtonClose size="xxsmall" color={AppStyles.buttonLightColor} style={this.styles.buttonRemoveInput}
                              onPress={this.props.onRemoveInputField}
                          />
                      </View>
                  </View>
                  {this.props.input.type == 5 && //Currency Option
                      <View style={[this.styles.inputFieldRow, this.styles.inputFieldOptionRow]}>
                          <Picker
                              style={this.styles.optionStyle}
                              selectedValue={this.props.input.option != null ? this.props.input.option : global.config.currency}
                              onValueChange={this.props.onOptionValueChange}
                              items={Currencies}
                              title="Select A Currency Type"
                              borderColor={AppStyles.altFieldOutlineColor}
                          />
                      </View>
                  }
                  {this.props.input.type == 10 && //List Option
                      <View style={[this.styles.inputFieldRow, this.styles.inputFieldOptionRow]}>
                          <View style={this.styles.importList}>
                              <ButtonOutline onPress={this.importList} text="Use Existing List"/>
                          </View>
                          {(this.props.input.list != null || this.props.input.option != null) &&
                              <View style={this.styles.listPickerContainer}>
                                  <ListPicker
                                      selectedText="Items..."
                                      style={this.styles.listPicker}
                                      borderColor={AppStyles.altFieldOutlineColor}
                                      listId={this.props.input.list != null ? this.props.input.list.id || this.props.input.option : this.props.input.option}
                                      state={this.props.input.list}
                                      input={this.props.input}
                                      editable={true}
                                      onUpdateListState={this.onUpdateListState}
                                  />
                              </View>
                          }
                          <ButtonAddListItem style={this.styles.buttonAddListItem} list={this.props.input} onAddListItem={this.props.onAddListItem} />
                      </View>
                  }
              </View>
          );
      }
  
      styles = this.props.styles;
  }
  