module Gargantext.Components.Nodes.Annuaire.User.Contact
  ( module Gargantext.Components.Nodes.Annuaire.User.Contacts.Types
  , contactLayout
  ) where

import Gargantext.Prelude

import Data.Lens (view)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (ComponentStatus(..))
import Gargantext.Components.GraphQL.Endpoints (getAnnuaireContact)
import Gargantext.Components.Nodes.Annuaire.User.Contacts.Types (ContactData', HyperdataContact(..))
import Gargantext.Config.REST (logRESTError)
import Gargantext.Hooks.Loader (useLoader)
import Gargantext.Hooks.Session (useSession)
import Gargantext.Types (NodeID)
import Gargantext.Utils (nbsp)
import Gargantext.Utils.Reactix as R2
import Gargnatext.Components.GraphQL.Contact (AnnuaireContact, _ac_city, _ac_country, _ac_firstName, _ac_labTeamDeptsFirst, _ac_lastName, _ac_office, _ac_organizationFirst, _ac_role, _ac_touchMail, _ac_touchPhone, _ac_touchUrl)
import Reactix as R
import Reactix.DOM.HTML as H

here :: R2.Here
here = R2.here "Gargantext.Components.Nodes.Annuaire.User.Contact"

type Props =
  ( annuaireId  :: NodeID
  , nodeId      :: NodeID
  )

contactLayout :: R2.Leaf ( key :: String | Props )
contactLayout = R2.leaf contactLayoutCpt

contactLayoutCpt :: R.Component ( key :: String | Props )
contactLayoutCpt = here.component "layout" cpt where
  -- Helpers
  errorHandler = logRESTError here "[contactLayoutWithKey]"

  -- Component
  cpt { nodeId
      } _ = do

    session <- useSession

    -- _ /\ reload <- R2.useBox' T2.newReload

    useLoader
      { errorHandler
      , loader: getAnnuaireContact session
      , path: nodeId
      , render:
          \r -> contactForm
            { fdata: r }
      }

---------------------------------------------------------

-- @NOTE: #376 temporary pages and form content
--        YAGNI decision triggered by a change of API (REST to GQL)

type FormProps =
  ( fdata :: AnnuaireContact
  )

contactForm :: R2.Leaf FormProps
contactForm = R2.leaf contactFormCpt

contactFormCpt :: R.Component FormProps
contactFormCpt = here.component "form" cpt where
  cpt { fdata } _ = do

    -- Render
    pure $

      B.wad
      [ "d-flex" ]
      [
        -- Left column: contact card
        H.div
        { className: "card" }
        [
          H.div
          { className: "card-header"}
          [
            B.icon
            { name: "address-book-o" }
          ,
            B.wad
            [ "ml-3", "d-inline-block" ]
            [
              H.text $
                view _ac_firstName fdata <>
                nbsp 1                   <>
                view _ac_lastName fdata
            ]
          ]
        ,
          H.div
          { className: "card-body" }
          [
            H.div
            { className: "form-group" }
            [
              H.div
              { className: "form-group__label" }
              [
                B.label_ "Firstname"
              ]
            ,
              H.div
              { className: "form-group__field" }
              [
                B.formInput
                { status: Disabled
                , callback: const R.nothing
                , value: view _ac_firstName fdata
                }
              ]
            ]
          ,
            H.div
            { className: "form-group" }
            [
              H.div
              { className: "form-group__label" }
              [
                B.label_ "Lastname"
              ]
            ,
              H.div
              { className: "form-group__field" }
              [
                B.formInput
                { status: Disabled
                , callback: const R.nothing
                , value: view _ac_lastName fdata
                }
              ]
            ]
          ,
            H.div
            { className: "form-group" }
            [
              H.div
              { className: "form-group__label" }
              [
                B.label_ "Organisation"
              ]
            ,
              H.div
              { className: "form-group__field" }
              [
                B.formInput
                { status: Disabled
                , callback: const R.nothing
                , value: view _ac_organizationFirst fdata
                }
              ]
            ]
          ,
            H.div
            { className: "form-group" }
            [
              H.div
              { className: "form-group__label" }
              [
                B.label_ "Lab/Team/Dept"
              ]
            ,
              H.div
              { className: "form-group__field" }
              [
                B.formInput
                { status: Disabled
                , callback: const R.nothing
                , value: view _ac_labTeamDeptsFirst fdata
                }
              ]
            ]
          ,
            H.div
            { className: "form-group" }
            [
              H.div
              { className: "form-group__label" }
              [
                B.label_ "Office"
              ]
            ,
              H.div
              { className: "form-group__field" }
              [
                B.formInput
                { status: Disabled
                , callback: const R.nothing
                , value: view _ac_office fdata
                }
              ]
            ]
          ,
            H.div
            { className: "form-group" }
            [
              H.div
              { className: "form-group__label" }
              [
                B.label_ "City"
              ]
            ,
              H.div
              { className: "form-group__field" }
              [
                B.formInput
                { status: Disabled
                , callback: const R.nothing
                , value: view _ac_city fdata
                }
              ]
            ]
          ,
            H.div
            { className: "form-group" }
            [
              H.div
              { className: "form-group__label" }
              [
                B.label_ "Country"
              ]
            ,
              H.div
              { className: "form-group__field" }
              [
                B.formInput
                { status: Disabled
                , callback: const R.nothing
                , value: view _ac_country fdata
                }
              ]
            ]
          ,
            H.div
            { className: "form-group" }
            [
              H.div
              { className: "form-group__label" }
              [
                B.label_ "Role"
              ]
            ,
              H.div
              { className: "form-group__field" }
              [
                B.formInput
                { status: Disabled
                , callback: const R.nothing
                , value: view _ac_role fdata
                }
              ]
            ]
          ,
            H.div
            { className: "form-group" }
            [
              H.div
              { className: "form-group__label" }
              [
                B.label_ "Phone"
              ]
            ,
              H.div
              { className: "form-group__field" }
              [
                B.formInput
                { status: Disabled
                , callback: const R.nothing
                , value: view _ac_touchPhone fdata
                }
              ]
            ]
          ,
            H.div
            { className: "form-group" }
            [
              H.div
              { className: "form-group__label" }
              [
                B.label_ "Mail"
              ]
            ,
              H.div
              { className: "form-group__field" }
              [
                B.formInput
                { status: Disabled
                , callback: const R.nothing
                , value: view _ac_touchMail fdata
                }
              ]
            ]
          ,
            H.div
            { className: "form-group" }
            [
              H.div
              { className: "form-group__label" }
              [
                B.label_ "URL"
              ]
            ,
              H.div
              { className: "form-group__field" }
              [
                B.formInput
                { status: Disabled
                , callback: const R.nothing
                , value: view _ac_touchUrl fdata
                }
              ]
            ]
          ]
        ]
      ,
        B.wad
        [ "align-self-flex-start", "ml-3" ]
        [
          B.caveat
          {}
          [
            B.icon
            { name: "rocket" }
          ,
            B.wad
            [ "d-inline-flex", "ml-2", "text-italic" ]
            [
              H.text " development in progress"
            ]
          ]
        ]
      ]