module IHP.IDE.Data.View.EditValue where

import IHP.ViewPrelude
import IHP.IDE.ToolServer.Types
import IHP.IDE.Data.View.ShowDatabase
import IHP.IDE.Data.View.Layout
import Data.Maybe

data EditValueView = EditValueView
    { EditValueView -> [Text]
tableNames :: [Text]
    , EditValueView -> Text
tableName :: Text
    , EditValueView -> [[DynamicField]]
rows :: [[DynamicField]]
    , EditValueView -> Text
targetName :: Text
    , EditValueView -> Text
targetId :: Text
    }

instance View EditValueView where
    html :: (?context::ControllerContext, ?view::EditValueView) =>
EditValueView -> Html
html EditValueView { [[DynamicField]]
[Text]
Text
$sel:tableNames:EditValueView :: EditValueView -> [Text]
$sel:tableName:EditValueView :: EditValueView -> Text
$sel:rows:EditValueView :: EditValueView -> [[DynamicField]]
$sel:targetName:EditValueView :: EditValueView -> Text
$sel:targetId:EditValueView :: EditValueView -> Text
tableNames :: [Text]
tableName :: Text
rows :: [[DynamicField]]
targetName :: Text
targetId :: Text
.. } = [hsx|
        <div class="h-100">
            {headerNav}
            <div class="h-100 row no-gutters">
                {renderTableSelector tableNames tableName}
                <div class="col" style="overflow: scroll; max-height: 80vh">
                    {renderRows rows tableBody tableName}
                    <div class="text-muted context-menu-notice">Press Enter to save your changes or click somewhere else to discard them.</div>
                </div>
            </div>
        </div>
        {script}
    |]
        where

            tableBody :: Html
tableBody = [hsx|<tbody>{forEach rows renderRow}</tbody>|]
            renderRow :: [DynamicField] -> Html
renderRow [DynamicField]
fields = [hsx|<tr oncontextmenu={"showContextMenu('" <> contextMenuId <> "');"}>{forEach fields (renderField id)}
            </tr>
            <div class="custom-menu menu-for-column shadow backdrop-blur" id={contextMenuId}>
                <a href={EditRowAction tableName id}>Edit Row</a>
                <a href={DeleteEntryAction tableName id} class="js-delete">Delete Row</a>
                <div></div>
                <a href={NewRowAction tableName}>Add Row</a>
            </div>|]
                where
                    contextMenuId :: Text
contextMenuId = Text
"context-menu-column-" Text -> Text -> Text
forall a. Semigroup a => a -> a -> a
<> Text -> Text
forall a. Show a => a -> Text
tshow Text
id
                    id :: Text
id = (ByteString -> Text
forall a b. ConvertibleStrings a b => a -> b
cs (ByteString -> Maybe ByteString -> ByteString
forall a. a -> Maybe a -> a
fromMaybe ByteString
"" ((Maybe DynamicField -> DynamicField
forall a. HasCallStack => Maybe a -> a
fromJust ([DynamicField] -> Maybe DynamicField
forall a. [a] -> Maybe a
headMay [DynamicField]
fields)).fieldValue)))

            renderField :: Text -> DynamicField -> Html
renderField Text
id DynamicField { Maybe ByteString
ByteString
fieldValue :: Maybe ByteString
fieldName :: ByteString
$sel:fieldValue:DynamicField :: DynamicField -> Maybe ByteString
$sel:fieldName:DynamicField :: DynamicField -> ByteString
.. } | (Text -> Text
forall a. Show a => a -> Text
tshow Text
targetName) Text -> Text -> Bool
forall a. Eq a => a -> a -> Bool
== (ByteString -> Text
forall a. Show a => a -> Text
tshow ByteString
fieldName) Bool -> Bool -> Bool
&& Text
targetId Text -> Text -> Bool
forall a. Eq a => a -> a -> Bool
== Text
id = [hsx|<td>
                <form id="fieldForm" method="POST" action={UpdateValueAction}>
                    <input id="editField" class="form-control" autofocus="autofocus" type="text" name="targetValue" value={fromMaybe "" fieldValue}/>
                    <input id="inputField" type="hidden" name="tableName" value={tableName}/>
                    <input type="hidden" name="id" value={id}/>
                    <input type="hidden" name="targetName" value={targetName}/>
                </form></td>|]
            renderField Text
id DynamicField { Maybe ByteString
ByteString
$sel:fieldValue:DynamicField :: DynamicField -> Maybe ByteString
$sel:fieldName:DynamicField :: DynamicField -> ByteString
fieldValue :: Maybe ByteString
fieldName :: ByteString
.. } | ByteString
fieldName ByteString -> ByteString -> Bool
forall a. Eq a => a -> a -> Bool
== ByteString
"id" = [hsx|<td><span data-fieldname={fieldName}><a class="no-link border rounded p-1" href={EditRowValueAction tableName (cs fieldName) id}>{renderId (sqlValueToText fieldValue)}</a></span></td>|]
            renderField Text
id DynamicField { Maybe ByteString
ByteString
$sel:fieldValue:DynamicField :: DynamicField -> Maybe ByteString
$sel:fieldName:DynamicField :: DynamicField -> ByteString
fieldValue :: Maybe ByteString
fieldName :: ByteString
.. } = [hsx|<td><span data-fieldname={fieldName}><a class="no-link" href={EditRowValueAction tableName (cs fieldName) id}>{sqlValueToText fieldValue}</a></span></td>|]
            script :: Html
script = String -> Html
forall a. ToMarkup a => a -> Html
preEscapedToHtml [plain|
                <script>
                    onClickHandler = () => {
                        window.location = "#{pathTo (ShowTableRowsAction tableName)}";
                    }
                    document.addEventListener('click', onClickHandler);
                    var editField = document.getElementById("editField");
                    editField.addEventListener('click', function (event) {event.stopPropagation();});


                    var input = document.getElementById("inputField");
                    input.addEventListener("keyup", function(event) {
                    if (event.keyCode === 13) {
                        var form = document.getElementById("fieldForm");
                        window.submit(form);
                    }
                    });
                </script>
            |]