package reactapp.client.pages.portlets.edit

import japgolly.scalajs.react.vdom.prefix_<^._
import japgolly.scalajs.react._
import japgolly.scalajs.react.{BackendScope, Callback, ReactComponentB}
import monocle.macros.Lenses
import reactapp.client.common.CfContext
import reactapp.client.facades.M
import reactapp.shared.portlets.PortletDefinitionStructures._
import sjsgrid.client.common.react.ExtVar

private[edit] final case class AddPortletMenu(portletAddNew: PortletType => Callback,
                                              portletAddFromLibrary: Long => Callback,
                                              cfContext: CfContext) {
  def apply() = AddPortletMenu.cmp(this)
}

private[edit] object AddPortletMenu {

  type Props = AddPortletMenu

  @Lenses
  final case class State(selectedIndex: Option[Int])

  private val newPortlets = List(
    (PortletType.TableObj.empty, "awesome-icon-table", M("js.label.portlet.addtemplate.table"), PortletTypeSql.tableType),
    (PortletType.TimeSeriesChartObj.empty, "awesome-icon-line-chart", M("js.label.portlet.addtemplate.timeseries"), PortletTypeSql.timeSeriesType),
    (PortletType.GaugeObj.empty, "awesome-icon-tachometer", M("js.label.portlet.addtemplate.gauge"), PortletTypeSql.gaugeType),
    (PortletType.StaticTextObj.empty, "awesome-icon-file-text-o", M("js.label.portlet.addtemplate.text"), PortletTypeSql.textType)
  )

  class Backend($: BackendScope[Props, State]) {

    def render(props: Props, state: State) = {
      val stateEV = ExtVar.getStateSnapshot($)

      <.div(
        ^.margin := 10.px,
        ^.onMouseLeave --> stateEV.set(state.copy(selectedIndex = None)),
        <.div(
          newPortlets.zipWithIndex.map{
            case ((newPortlet, iconCls, label, pType), index) =>
              <.div(
                ^.float := "left",
                ^.marginLeft := "2rem",
                <.div(
                  ^.cursor := "pointer",
                  ^.onMouseEnter --> stateEV.set(state.copy(selectedIndex = Option(index))),
                  <.i(
                    ^.cls := iconCls,
                    ^.fontSize := 50.px
                  ),
                  <.br(),
                  <.small(label)
                ),
                state.selectedIndex.contains(index) ?=
                <.div(
                  ^.position := "absolute",
                  ^.zIndex := 1,
                  ^.backgroundColor := "#444",
                  ^.color := "#fff",
                  ^.padding := 5.px,
                  ^.border := "1px solid #444",
                  ^.borderRadius := 5.px,
                  ^.boxShadow := "5px 5px 1px grey",

                  <.button(
                    ^.cls := "small button secondary",
                    ^.marginBottom := 2.px,
                    ^.width := 150.px,
                    ^.onClick --> props.portletAddNew(newPortlet),
                    M("js.label.portlet.addnew")
                  ),

                  PortletFromLibrarySelector(props.portletAddFromLibrary, pType, props.cfContext)()
                )
              )
          }
        )
      )

    }
  }

  val cmp = ReactComponentB[Props](this.getClass.getSimpleName)
    .initialState[State] {
      State(None)
    }
    .renderBackend[Backend]
    .build
}
////////////////////
// other file

package reactapp.client.pages.portlets.edit

import autowire._
import japgolly.scalajs.react.vdom.prefix_<^.{<, _}
import japgolly.scalajs.react.{BackendScope, ReactComponentB}
import monocle.macros.Lenses
import reactapp.client.common.{AutowireClient, CfContext}
import reactapp.client.common.component._
import reactapp.client.facades.M
import reactapp.shared.portlets.PortletDefinitionStructures._
import reactapp.shared.portlets.PortletsDefinitionApi
import japgolly.scalajs.react._
import monix.eval.Task
import org.scalajs.jquery.jQuery
import reactapp.client.pages.portlets.view.PortletReportView
import reactapp.client.pages.portlets.UniqueKeys
import reactapp.shared.kpi.Kpi
import reactapp.shared.portlets.PortletDefinitionStructures.StocktakingDaysResponse.StocktakingDaysSuccessResponse
import reactapp.shared.users.UsersPageApi.FarmsAndHoldings
import sjsgrid.client.grid.SjsGridOps._
import sjsgrid.client.common.react.ExtVar
import monix.execution.Scheduler.Implicits.global
import org.scalajs.dom

private[edit] final case class PortletReportEdit(group: PortletGroup,
                                                 portlets: Map[Long, PortletDefinitionTrimmed],
                                                 kpis: Seq[Kpi],
                                                 stocktakingDaysOpt: Option[StocktakingDaysSuccessResponse],
                                                 farmsAndHoldings: FarmsAndHoldings,
                                                 cfContext: CfContext) {

  def apply() = PortletReportEdit.cmp(this)
}

private[edit] object PortletReportEdit {

  type Props = PortletReportEdit

  @Lenses
  final case class State(group: PortletGroup,
                         portlets: Map[Long, PortletDefinitionTrimmed],
                         showEditPortlet: Option[PortletDefinition] = None,
                         showFullDetail: Boolean = false){
  }

  class Backend($: BackendScope[Props, State]) {

    def render(props: Props, state: State) = {

//..
        <.div(
          ^.cls := "row",
          <.div(
            ^.cls := "small-12 large-12 columns",
            AddPortletMenu(
              portletAddNew(props, stateEV),
              portletAddExisting(props, stateEV),
              props.cfContext
            )()
          )
//...
        )
      )
    }
  }


  val cmp = ReactComponentB[Props](this.getClass.getSimpleName)
    .initialState_P[State] { props =>

      State(props.group,
        props.portlets)
    }
    .renderBackend[Backend]
    .build
}