module InputTable.ViewCell exposing (view)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick, onInput, onMouseEnter, onWithOptions, on)
import Json.Decode as Json
import InputTable.Model exposing (..)
import InputTable.Messages exposing (..)
import String.Extra
import Array
import List.Extra


view : Maybe String -> Row rowData -> Maybe String -> Int -> Column rowData -> Maybe (Html (TableMsg rowData focussedData))
view rowLink row tableAction currentPage column =
    let
        ( rowDisabled, disabledTooltip ) =
            case row.disabledMsg of
                Nothing ->
                    ( False, "" )

                Just disabledMsg ->
                    ( True, disabledMsg )

        tooltipMessageElement =
            if String.isEmpty disabledTooltip then
                span [] []
            else
                span [ class "tooltip__box" ]
                    [ text disabledTooltip ]

        tooltipAnchor =
            a [ class "tooltip" ]
    in
        if column.visible then
            Just
                ((case column.subType of
                    SideBarButtonColumn props ->
                        let
                            buttonClass =
                                if (props.get row.data == "Yes") then
                                    " button--action-complete"
                                else
                                    " button--action"

                            buttonValue =
                                case tableAction of
                                    Just title ->
                                        title

                                    Nothing ->
                                        ""
                        in
                            td [ class "table-cell table-cell--control" ]
                                [ input
                                    [ class ("button button--primary button--icon-right" ++ buttonClass)
                                    , type_ "button"
                                    , value buttonValue
                                    , onClickNoPropagate (ToggleSideBar (Just row.id))
                                    ]
                                    []
                                ]

                    DisplayColumn props ->
                        td [ class "table-cell" ]
                            (case rowLink of
                                Just url ->
                                    [ a [ class "table-cell__link", href (interpolateUrl url row currentPage column) ]
                                        [ text (props.get row.data) ]
                                    ]

                                Nothing ->
                                    [ text (props.get row.data) ]
                            )

                    LinkColumn props ->
                        td [ class "table-cell" ]
                            (case rowLink of
                                Just url ->
                                    [ a [ class "table-cell__link", href (interpolateUrl url row currentPage column) ]
                                        [ a [ href (props.getLink row), onClickNoPropagate DoNothing ] [ text (props.get row.data) ] ]
                                    ]

                                Nothing ->
                                    [ a [ href (props.getLink row), onClickNoPropagate DoNothing ] [ text (props.get row.data) ] ]
                            )

                    TextColumn props ->
                        let
                            tdChild =
                                (if props.isTextArea then
                                    textarea
                                 else
                                    input
                                )
                                    [ onInput (SetCellValue column.id props.set row.id False)
                                    , value (props.get row.data)
                                    , disabled rowDisabled
                                    ]
                                    []
                        in
                            td [ class "table-cell table-cell--control" ]
                                (if rowDisabled then
                                    [ tooltipAnchor
                                        [ tdChild
                                        , tooltipMessageElement
                                        ]
                                    ]
                                 else
                                    [ tdChild ]
                                )

                    DropdownColumn props ->
                        let
                            viewOption optionsValue =
                                option [ selected (optionsValue == (props.get row.data)) ] [ text optionsValue ]

                            tdChild =
                                select
                                    [ class "table-cell__control"
                                    , onChange (SetCellValue column.id props.set row.id False)
                                    , disabled rowDisabled
                                    ]
                                    (List.map viewOption props.options)
                        in
                            td [ class "table-cell table-cell--control" ]
                                (if rowDisabled then
                                    [ tooltipAnchor
                                        [ tdChild
                                        , tooltipMessageElement
                                        ]
                                    ]
                                 else
                                    [ tdChild ]
                                )

                    MenuDropdownColumn props ->
                        let
                            viewOption i optionsValue =
                                option
                                    [ selected (optionsValue == (props.get row.data))
                                    , value optionsValue
                                    ]
                                    [ text
                                        (Maybe.withDefault ""
                                            (List.Extra.getAt i props.displayedTextOptions)
                                        )
                                    ]

                            tdChild =
                                select
                                    [ class "table-cell__control"
                                    , onChange (SetCellValue column.id props.set row.id False)
                                    , disabled rowDisabled
                                    ]
                                    (List.indexedMap viewOption props.options)
                        in
                            td [ class "table-cell table-cell--control" ]
                                (if rowDisabled then
                                    [ tooltipAnchor
                                        [ tdChild
                                        , tooltipMessageElement
                                        ]
                                    ]
                                 else
                                    [ tdChild ]
                                )

                    SubDropdownColumn props ->
                        let
                            ( choice, subChoice ) =
                                props.get row.data

                            buttonText =
                                subChoice
                                    |> Maybe.map (\sub -> choice ++ ": " ++ sub)
                                    |> Maybe.withDefault choice

                            optionList =
                                case props.focussedRowId of
                                    Nothing ->
                                        text ""

                                    Just rowId ->
                                        if rowId == row.id then
                                            ul
                                                [ class "table-cell__menu" ]
                                                (List.map viewOption props.options)
                                        else
                                            text ""

                            viewOption { parent, isSelectable, childHeader, children } =
                                if List.isEmpty children then
                                    li
                                        [ class "table-cell__menu-item"
                                        , onClick (SelectDropdownParent row.id column.id parent props.set)
                                        ]
                                        [ text parent ]
                                else
                                    (li
                                        (if isSelectable then
                                            [ class "table-cell__menu-item table-cell__menu-item--with-children"
                                            , onMouseEnter (ViewDropdownChildren row.id column.id parent props.set)
                                            , onClick (SelectDropdownParent row.id column.id parent props.set)
                                            ]
                                         else
                                            [ class "table-cell__menu-item table-cell__menu-item--disabled-with-children"
                                            , onMouseEnter (ViewDropdownChildren row.id column.id parent props.set)
                                            ]
                                        )
                                        [ text parent
                                        , (case props.focussedOption of
                                            Nothing ->
                                                text ""

                                            Just option ->
                                                if option == parent then
                                                    let
                                                        childHeaderLi =
                                                            case childHeader of
                                                                Just headerString ->
                                                                    li [ class "table-cell__menu-item table-cell__menu-item--header" ] [ text headerString ]

                                                                Nothing ->
                                                                    text ""
                                                    in
                                                        ul
                                                            [ class "table-cell__menu table-cell__menu--sub"
                                                            ]
                                                            (childHeaderLi :: List.map (viewSubChoice parent) children)
                                                else
                                                    text ""
                                          )
                                        ]
                                    )

                            viewSubChoice parent child =
                                li
                                    [ class "table-cell__menu-item"
                                    , onClickNoPropagate (SelectDropdownChild row.id column.id parent child props.set)
                                    ]
                                    [ text child ]
                        in
                            (if rowDisabled then
                                td [ class "table-cell table-cell--control" ]
                                    [ tooltipAnchor
                                        [ text buttonText
                                        , tooltipMessageElement
                                        ]
                                    ]
                             else
                                td [ class "table-cell table-cell--control" ]
                                    [ a [ class "table-cell__control", onClickNoPropagate (ToggleCellDropdown row.id column.id) ]
                                        [ text buttonText, span [ class "caret" ] [] ]
                                    , optionList
                                    ]
                            )

                    CheckboxColumn props ->
                        td [ class "table-cell table-cell--control" ]
                            [ label [ class "table-cell__checkbox-label" ]
                                [ input
                                    [ type_ "checkbox"
                                    , checked (props.get row.data)
                                    , onClick (SetBoolCellValue column.id props.set row.id (not (props.get row.data)))
                                    ]
                                    []
                                ]
                            ]
                 )
                )
        else
            Nothing


interpolateUrl : String -> Row rowData -> Int -> Column rowData -> String
interpolateUrl url row currentPage column =
    let
        currentPageInt =
            toString currentPage
    in
        url
            |> String.Extra.replace "{rowId}" row.id
            |> String.Extra.replace "{columnId}" column.id
            |> String.Extra.replace "{currentPage}" currentPageInt


onClickNoPropagate : msg -> Attribute msg
onClickNoPropagate msg =
    onWithOptions "click"
        { stopPropagation = True, preventDefault = False }
        (Json.succeed msg)


onChange : (String -> msg) -> Attribute msg
onChange handler =
    on "change" <| Json.map handler <| Json.at [ "target", "value" ] Json.string