searching

object HelloWoutWatch {

  def main(args: Array[String]): Unit = {

    val txtRFC = Handler.create[String]("").unsafeRunSync()
    val txtDescripcion = Handler.create[String]("").unsafeRunSync()
    val txtRepresentante = Handler.create[String]("").unsafeRunSync()
    val txtCalle = Handler.create[String]("").unsafeRunSync()
    val txtColonia = Handler.create[String]("").unsafeRunSync()
    val txtDelegacion = Handler.create[String]("").unsafeRunSync()
    val txtCP = Handler.create[String]("").unsafeRunSync()
    val txtCiudad = Handler.create[String]("").unsafeRunSync()
    val txtTelefonos = Handler.create[String]("").unsafeRunSync()
    val txtFax = Handler.create[String]("").unsafeRunSync()
    val txtObservaciones = Handler.create[String]("").unsafeRunSync()
    val txtGiro = Handler.create[String]("").unsafeRunSync()

    def updateValues( prov: Proveedor ) = {
      txtDescripcion.onNext(prov.descripcion.getOrElse(""))
      txtRepresentante.onNext(prov.propietario.getOrElse(""))
      txtCalle.onNext(prov.calle.getOrElse(""))
      txtColonia.onNext(prov.colonia.getOrElse(""))
      txtDelegacion.onNext(prov.delegacion.getOrElse(""))
      txtCP.onNext(prov.cp.getOrElse(""))
      txtCiudad.onNext(prov.ciudad.getOrElse(""))
      txtTelefonos.onNext(prov.telefonos.getOrElse(""))
      txtFax.onNext(prov.fax.getOrElse(""))
      txtObservaciones.onNext(prov.observaciones.getOrElse(""))
      txtGiro.onNext(prov.giro.getOrElse(""))
    }

    val onSearch = PublishSubject[String]()

    val currentProvider = onSearch.switchMap { descripcion =>
      Observable.fromFuture( AjaxClient[ Api ].searchProveedor( descripcion ).call( ) )
    }.share

    currentProvider.map { prov => SearchProveedor ( prov ) }.subscribe( store )

    val onClickItem = Sink.create[String]{ id: String =>
      //Here I want to filter and update my textBoxes
      Continue
    }

    def itemComponent(id: String, descripcion: String) = {
      val ancho = "500px"
      div( id + " : " + descripcion, width := ancho, onClick( id ) --> onClickItem )
    }

    val gridResults = store.map { p: State => p.lst.map { i: Proveedor => itemComponent( i.id, i.descripcion.getOrElse("") ) } }

    def onSave = Sink.create[ Proveedor ] { prov: Proveedor =>
      Future {
        for {
          result <- AjaxClient[ Api ].saveProveedor( prov ).call()
        } yield {
          result match {
            case Right( prov ) =>
              txtDescripcion.onNext( prov.descripcion.getOrElse( "" ) )
              txtRepresentante.onNext( prov.propietario.getOrElse( "" ) )
              txtCalle.onNext( prov.calle.getOrElse( "" ) )
              txtColonia.onNext( prov.colonia.getOrElse( "" ) )
              txtDelegacion.onNext( prov.delegacion.getOrElse( "" ) )
              txtCP.onNext( prov.cp.getOrElse( "" ) )
              txtCiudad.onNext(prov.ciudad.getOrElse(""))
              txtTelefonos.onNext(prov.telefonos.getOrElse(""))
              txtFax.onNext(prov.fax.getOrElse(""))
              txtObservaciones.onNext(prov.observaciones.getOrElse(""))
              txtGiro.onNext(prov.giro.getOrElse(""))
            case Left( e ) =>
              println( e )
          }
        }
        Continue
      }
    }

    val datos = ( txtRFC: Observable[String], txtDescripcion: Observable[String],
                  txtRepresentante: Observable[String], txtCalle: Observable[String],
                  txtColonia: Observable[String], txtDelegacion: Observable[String],
                  txtCP: Observable[String], txtCiudad: Observable[String],
                  txtTelefonos: Observable[String], txtFax: Observable[String],
                  txtObservaciones: Observable[String], txtGiro: Observable[String],
                ).parMapN { ( a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12 ) =>
                    Proveedor(
                      id = a1, descripcion = Some(a2), propietario = Some(a3), calle = Some(a4),
                      colonia =  Some(a5), delegacion = Some(a6), cp = Some(a7), ciudad = Some(a8), telefonos = Some(a9),
                      fax = Some(a10), observaciones = Some(a11), giro = Some(a12) )
                }

    def component( lbl: String, h: ProHandler[ String, String ] ): VNode = {
      div( //width:="500px",
        label( lbl, backgroundColor:="gray", fontWeight := 10, marginRight:="10px" ),
        input( inputString --> h, value <-- h, marginRight := "20" )
      )
    }

    val root = div( width:="20px",
         component( "R.F.C.", txtRFC ),
        div( width:="500px", margin := "10px",
          label( "Razon Social", backgroundColor:="gray", fontWeight := 10, marginRight:="10px" ),
          input( inputString --> txtDescripcion, inputString --> onSearch, value <-- txtDescripcion, marginRight := "20px" ),
        ),

        div( id := "CatalogProveedor", position := "absolute", overflow:="scroll", zIndex := 10000, width := "800px", hidden:=true ),

        component( "Representante", txtRepresentante ),
        component( "Calle", txtCalle ),
        component( "Colonia", txtColonia ),
        component( "Delegacion", txtDelegacion ),
        component( "C.P.", txtCP ),
        /*component( "Ciudad", txtCiudad ),
        component( "Telefonos", txtTelefonos ),
        component( "Fax", txtFax ),
        component( "Observaciones", txtObservaciones ),
        component( "Giro", txtGiro ),*/
        button( "Guardar", onClick( datos ) --> onSave ),
        button( "Buscar RFC", onClick( txtRFC ) --> onSearchRFC ),
        ul( children <-- gridResults, width := "500px" ),

    )

    OutWatch.renderInto("#root", root).unsafeRunSync( )

  }
}