MainFile

package spatutorial.client

import boopickle.Default._
import autowire._
import cats.effect.IO
import monix.execution.Ack
import monix.execution.Ack.Continue
import monix.execution.schedulers.TestScheduler.Task

import scala.concurrent.Future
import spatutorial.shared.{Api, Articulo, Oficina, Proveedor}
import spatutorial.client.services.AjaxClient
import monix.reactive._
import monix.execution.Scheduler.Implicits.global
import monix.reactive.observables.CombineObservable
import subjects._
import monix.reactive.subjects.PublishSubject
import spatutorial.client.components.{CmpCatalogs, UpdateValue}

import monix.execution.Ack.Continue
import monix.execution.{Cancelable, Scheduler}
import monix.reactive.OverflowStrategy.Unbounded
import org.scalajs.dom.{CloseEvent, ErrorEvent, MessageEvent}

//import cats._
import cats.implicits._
import outwatch.dom._
import outwatch.dom.dsl._
import outwatch.util.Store

import spatutorial.client.modules.StoreProv._

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( )
    */

    val onSearchProveedor = PublishSubject[String]()

    val currentProvider = onSearchProveedor.switchMap { descripcion =>
      println("Antes de buscar el proveedor")
      Observable.fromFuture( AjaxClient[Api].searchProveedor( descripcion ).call( ) )
    }.share


    val results = currentProvider.map { provider =>
      Found ( provider )
    }.subscribe( store )

    val onClickItem = Sink.create[Option[Proveedor]] { p: Option[Proveedor] =>
      p.map { i =>
        txtRFC.onNext(i.id)
        txtRepresentante.onNext(i.propietario.getOrElse(""))
        store.onNext(Clean) //Clean the store to start again.
      }
      Continue
    }

    def gridComponent(s: AppState) = div ( position:="absolute",  zIndex:=1000, backgroundColor := "#f99d89",
        s.lst.map { i =>
        div ( i.id + ": " + i.descripcion.getOrElse(""), width := "500px", border:="1px solid",
          onClick( s.lst.filter( p => p.id == i.id).headOption   ) --> onClickItem
        )
      }
    )

    def component( lbl: String, h: ProHandler[ String, String ] ): VNode = {
      div( width:="800px",
        label( lbl, backgroundColor:="gray", fontWeight := 10),
        input( onInput.value.map(r => r.target.value.toString) --> h, value <-- h, marginRight := "20" )
      )
    }

    val root = div ( width:="20px", position := "relative",
      component( "R.F.C.", txtRFC ),
      div( width:="800px", margin := "10px",
        label( "Razon Social", backgroundColor:="gray", fontWeight := 10 ),
        input(  onInput.target.value --> txtDescripcion,
                onInput.target.value --> onSearchProveedor,
                value <-- txtDescripcion
        ),
      ),
      store.map { s => gridComponent( s ) },
      component( "Representante", txtRepresentante ),
    )

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

  }
}

/*button( "Guardar", onClick( datos ) --> onSave ),
button( "Buscar RFC", onClick( txtRFC ) --> onSearchRFC ),*/


/*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
  }
}*/

/*
  def onSearchRFC= Sink.create[String] { id: String =>
    Future {
      for {
        result <- AjaxClient[Api].searchIDProveedor(id).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) )
                }*/

* */