/*
 contacts_list is query all docs type == contact
 contacts_view is hbox
 vbox
 searchbox <= app.filter
 list <= contacts_list filterby app.filter
 vbox
 hbox
 label: selected.first
 label: selected.last
 hbox
 label: selected.company
 vbox
 selected.phones => map (contact)
 hbox
 label: phone.type
 label: phone.number
 vbox
 selected.addresses => map (address)
 hbox
 label: address.type
 label: address.street
 hbox
 label: address.city
 label: address.state
 label: address.zip



 */

import React, {Component} from "react"
import {HBox, VBox} from "appy-comps";
import {Input, ListView, Scroll} from "./GUIUtils";

let ContactTemplate = ((props) => <label>{props.item.first} {props.item.last}</label>);
let ContactView = ((props) => {
    var c = props.contact;
    if (!c) return <VBox></VBox>;
    if (!c.address) c.address = [];
    return <VBox>
        <label>{c.first} {c.last}</label>
        {c.address.map((addr, i) => {
            return <VBox key={i}>
                <HBox><label>{addr.street}</label></HBox>
                <HBox><label>{addr.city}</label>
                    <label>{addr.state}</label>
                    <label>{addr.zip}</label>
                </HBox>
            </VBox>
        })}
    </VBox>
});

export default class Contacts extends Component {
    constructor(props) {
        super(props);
        this.contacts = props.db.makeLiveQuery({type: 'contact'});
        this.state = {
            selectedContact: null,
            searchQuery: ''
        };
        this.selectContact = (contact) => {
            this.setState({selectedContact: contact});
        };
        this.typeQuery = (e) => {
            this.setState({searchQuery:e.target.value});
            // this.contacts.updateQuery({type: 'contact', first: query})
        }
    }

    render() {
        return <VBox grow>
            <HBox>
                <Input ref='search' onChange={this.typeQuery} db={this.props.db}
                       value={this.state.searchQuery}/>
            </HBox>
            <HBox grow>
                <Scroll>
                    <ListView model={this.contacts}
                              template={ContactTemplate}
                              onSelect={this.selectContact}
                              selected={this.state.selectedContact}/>
                </Scroll>
                <ContactView contact={this.state.selectedContact}/>
            </HBox>
        </VBox>
    }
}

@@ -1538,38 +1538,24 @@
 (contact) =%3E
- %7B%0A           
  this.setSta
@@ -1586,27 +1586,16 @@
 tact%7D);%0A
-        %7D;%0A
         
@@ -1616,24 +1616,64 @@
  = (e) =%3E %7B%0A
+            const txt = e.target.value;%0A
             
@@ -1699,30 +1699,19 @@
 chQuery:
-e.target.value
+txt
 %7D);%0A    
@@ -1721,11 +1721,8 @@
     
- //
  thi
@@ -1749,39 +1749,116 @@
 ry(%7B
-type: 'contact', first: query
+%0A                type: 'contact',%0A                first: %7B $regex: %60%5E$%7Btxt%7D%60, $options:'i' %7D%0A            
 %7D)
+;
 %0A   

update contacts to use regex