-- Copyright 2020 The Fuchsia Authors. All rights reserved.
-- Use of this source code is governed by a BSD-style license that can be
-- found in the LICENSE file.


module Editors exposing
    ( Editor(..)
    , Model
    , Msg
    , decode
    , encode
    , init
    , initCmd
    , update
    , view
    )

{-| This module implements the input/output editors.

Input and output editors are not independent. Anything to do with an output mode
-- its active/nonactive state, its content, its options -- is always relative to
an input mode. For example, FIDL Text -> Bytes and Bytes -> Bytes have distinct
output state even though both are Bytes.

This module does not keep track of the Ace editor state. That is done in
JavaScript-land because it's easier there.

-}

import Form exposing (Form)
import Html exposing (Html)
import Html.Attributes as Attributes
import Html.Events as Events
import Json.Decode as Decode
import Json.Encode as Encode
import Mode exposing (Mode)
import Ports


------------- MODEL ------------------------------------------------------------


type alias Model =
    { activeInput : Mode
    , inputMap : Mode.Map InputState
    }


type alias InputState =
    { activeOutput : Mode
    , outputMap : Mode.Map OutputState
    }


type alias OutputState =
    { options : Options
    }


type alias Options =
    Form.Model


type alias Active =
    { input : Mode
    , output : Mode
    , options : Options
    }


init : Model
init =
    let
        input =
            Mode.defaultInput

        inputState =
            defaultInputState input
    in
    { activeInput = input
    , inputMap = Mode.singleton input inputState
    }


initCmd : Model -> Cmd msg
initCmd model =
    updateEditors (getActive model)


defaultInputState : Mode -> InputState
defaultInputState input =
    let
        output =
            Mode.defaultOutput input

        outputState =
            defaultOutputState input output
    in
    { activeOutput = output
    , outputMap = Mode.singleton output outputState
    }


defaultOutputState : Mode -> Mode -> OutputState
defaultOutputState input output =
    { options = Form.empty }


getInputState : Mode -> Model -> InputState
getInputState input model =
    Maybe.withDefault
        (defaultInputState input)
        (Mode.get input model.inputMap)


getOutputState : Mode -> Mode -> InputState -> OutputState
getOutputState input output inputState =
    Maybe.withDefault
        (defaultOutputState input output)
        (Mode.get output inputState.outputMap)


getActive : Model -> Active
getActive model =
    let
        input =
            model.activeInput

        inputState =
            getInputState input model

        output =
            inputState.activeOutput

        outputState =
            getOutputState input output inputState

        options =
            outputState.options
    in
    Active input output options


------------- UPDATE -----------------------------------------------------------


type Msg
    = NoOp
    | -- Switch to this input mode. This also implies switching to a new output
      -- mode (the one that was most recently used for that input).
      ActivateInput Mode
      -- Switch to this output mode, keeping the same input mode.
    | ActivateOutput Mode
      -- Update options for the current input/output mode combination.
    | UpdateOptions Form.Msg


update : Msg -> Model -> ( Model, Cmd msg )
update msg model =
    let
        newModel =
            case msg of
                NoOp ->
                    model

                ActivateInput input ->
                    activateInput input model

                ActivateOutput output ->
                    activateOutput output model

                UpdateOptions formMsg ->
                    updateOptions (Form.update formMsg) model

        cmd =
            case msg of
                NoOp ->
                    Cmd.none

                _ ->
                    updateEditors (getActive newModel)
    in
    ( newModel, cmd )


activateInput : Mode -> Model -> Model
activateInput input model =
    let
        inputState =
            getInputState input model

        newInputMap =
            model.inputMap |> Mode.insert input inputState
    in
    { model | activeInput = input, inputMap = newInputMap }


activateOutput : Mode -> Model -> Model
activateOutput output model =
    let
        input =
            model.activeInput

        inputState =
            getInputState input model

        outputState =
            getOutputState input output inputState

        newOutputMap =
            inputState.outputMap |> Mode.insert output outputState

        newInputState =
            { inputState | activeOutput = output, outputMap = newOutputMap }

        newInputMap =
            model.inputMap |> Mode.insert input newInputState
    in
    { model | inputMap = newInputMap }


updateOptions : (Options -> Options) -> Model -> Model
updateOptions alter model =
    let
        input =
            model.activeInput

        inputState =
            getInputState input model

        output =
            inputState.activeOutput

        outputState =
            getOutputState input output inputState

        newOutputState =
            { options = alter outputState.options }

        newOutputMap =
            inputState.outputMap |> Mode.insert output newOutputState

        newInputState =
            { inputState | outputMap = newOutputMap }

        newInputMap =
            model.inputMap |> Mode.insert input newInputState
    in
    { model | inputMap = newInputMap }


updateEditors : Active -> Cmd msg
updateEditors active =
    Ports.updateEditors
        (Mode.encode active.input)
        (Mode.encode active.output)
        (Form.encodeEffective
            (Mode.options active.input active.output)
            active.options
        )


------------- VIEW -------------------------------------------------------------


type Editor
    = Input
    | Output


view : Editor -> (Msg -> msg) -> String -> Model -> Html msg
view editor toMsg themeClass model =
    let
        active =
            getActive model

        { modes, activeMode, msg, id, optionsPart } =
            case editor of
                Input ->
                    { modes = Mode.inputs
                    , activeMode = active.input
                    , msg = ActivateInput
                    , id = "InputEditor"
                    , optionsPart = []
                    }

                Output ->
                    let
                        form =
                            Mode.options active.input active.output
                    in
                    { modes = Mode.outputs active.input
                    , activeMode = active.output
                    , msg = ActivateOutput
                    , id = "OutputEditor"
                    , optionsPart =
                        if List.isEmpty form.inputs then
                            []

                        else
                            [ optionsView form active.options toMsg ]
                    }

        navbarPart =
            navbarView modes activeMode (toMsg << msg) themeClass

        editorPart =
            Html.div
                [ Attributes.id id
                , Attributes.class "editor"
                ]
                []
    in
    Html.div
        [ Attributes.class "editor-wrapper"
        , Events.on "keydown" (keyDownEvent editor active toMsg)
        ]
        (navbarPart :: editorPart :: optionsPart)


navbarView : List Mode -> Mode -> (Mode -> msg) -> String -> Html msg
navbarView modes activeMode msg themeClass =
    let
        navItem mode =
            -- We provide keyboard shortcuts on the parent div to navigate
            -- between modes. This replaces tab navigation, hence tabindex -1.
            -- We need to use button tags so that they can be focused and the
            -- parent div will receive keyboard events.
            Html.button
                [ Attributes.type_ "button"
                , Attributes.tabindex -1
                , Attributes.class "navbar-item"
                , if mode == activeMode then
                    Attributes.class ("navbar-item--active " ++ themeClass)

                  else
                    Events.onClick (msg mode)
                ]
                [ Html.text (Mode.title mode) ]
    in
    Html.div
        [ Attributes.class "navbar" ]
        (List.map navItem modes)


optionsView : Form -> Form.Model -> (Msg -> msg) -> Html msg
optionsView form options toMsg =
    Html.div
        [ Attributes.class "editor-options" ]
        [ Form.view
            form
            []
            (toMsg << UpdateOptions)
            options
        ]


keyDownEvent : Editor -> Active -> (Msg -> msg) -> Decode.Decoder msg
keyDownEvent editor active toMsg =
    let
        ( activate, previous, next ) =
            case editor of
                Input ->
                    ( ActivateInput
                    , Mode.previousInput active.input
                    , Mode.nextInput active.input
                    )

                Output ->
                    ( ActivateOutput
                    , Mode.previousOutput active.input active.output
                    , Mode.nextOutput active.input active.output
                    )

        chooseMsg ctrl key =
            if ctrl && key == "[" then
                activate previous

            else if ctrl && key == "]" then
                activate next

            else
                NoOp
    in
    Decode.map toMsg <|
        Decode.map2 chooseMsg
            (Decode.field "ctrlKey" Decode.bool)
            (Decode.field "key" Decode.string)


------------- ENCODE / DECODE --------------------------------------------------


encode : Model -> Encode.Value
encode model =
    Encode.object
        [ ( "activeInput", Mode.encode model.activeInput )
        , ( "inputMap", Mode.encodeMap encodeInputState model.inputMap )
        ]


encodeInputState : InputState -> Encode.Value
encodeInputState inputState =
    Encode.object
        [ ( "activeOutput", Mode.encode inputState.activeOutput )
        , ( "outputMap", Mode.encodeMap encodeOutputState inputState.outputMap )
        ]


encodeOutputState : OutputState -> Encode.Value
encodeOutputState outputState =
    Encode.object
        [ ( "options", Form.encode outputState.options ) ]


decode : Decode.Decoder Model
decode =
    Decode.map2 Model
        (Decode.field "activeInput" Mode.decode)
        (Decode.field "inputMap" (Mode.decodeMap decodeInputState))


decodeInputState : Decode.Decoder InputState
decodeInputState =
    Decode.map2 InputState
        (Decode.field "activeOutput" Mode.decode)
        (Decode.field "outputMap" (Mode.decodeMap decodeOutputState))


decodeOutputState : Decode.Decoder OutputState
decodeOutputState =
    Decode.map OutputState
        (Decode.field "options" Form.decode)