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
    { tableNames :: [Text]
    , tableName :: Text
    , rows :: [[DynamicField]]
    , targetName :: Text
    , targetId :: Text
    }

instance View EditValueView where
    html EditValueView { .. } = [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 = [hsx|<tbody>{forEach rows renderRow}</tbody>|]
            renderRow 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 = "context-menu-column-" <> tshow id
                    id = (cs (fromMaybe "" ((fromJust (headMay fields)).fieldValue)))

            renderField id DynamicField { .. } | (tshow targetName) == (tshow fieldName) && targetId == 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 id DynamicField { .. } | fieldName == "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 id DynamicField { .. } = [hsx|<td><span data-fieldname={fieldName}><a class="no-link" href={EditRowValueAction tableName (cs fieldName) id}>{sqlValueToText fieldValue}</a></span></td>|]
            script = 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>
            |]