<?php

use mystic\forum\utils\RequestUtils;

$lastFormUri = "";
$lastForm = RequestUtils::getLastForm($lastFormUri) ?? [];
if ($lastFormUri !== $_SERVER["REQUEST_URI"]) $lastForm = [];
RequestUtils::clearLastForm();

?>
<h3 id="form"><?= __("Reply to this topic") ?></h3>
<?php
if (($_formError = RequestUtils::getAndClearFormError("addpost")) !== null) {
    _view("alert_error", ["message" => $_formError]);
}
?>
<form action="<?= htmlentities($_SERVER["REQUEST_URI"]) ?>#form" method="post" enctype="multipart/form-data">
<input type="hidden" name="form_id" value="addpost">
<div class="form-group">
    <label for="i_message"><?= __("Message:") ?></label>
    <div class="panel panel-default">
        <div class="panel-heading" style="padding:4px">
            <div class="btn-toolbar" role="toolbar">
                <div class="btn-group" role="group">
                    <button data-area="#i_message" title="<?= __("Bold") ?>" data-editor-command="bold" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-bold"></i></button>
                    <button data-area="#i_message" title="<?= __("Italic") ?>" data-editor-command="italic" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-italic"></i></button>
                    <button data-area="#i_message" title="<?= __("Underlined") ?>" data-editor-command="underline" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-underline"></i></button>
                    <button data-area="#i_message" title="<?= __("Strikethrough") ?>" data-editor-command="strikethrough" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-strikethrough"></i></button>
                </div>
                <div class="btn-group" role="group">
                    <button data-area="#i_message" title="<?= __("Superscript") ?>" data-editor-command="sup" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-superscript"></i></button>
                    <button data-area="#i_message" title="<?= __("Subscript") ?>" data-editor-command="sub" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-subscript"></i></button>
                </div>
                <div class="btn-group" role="group">
                    <button data-area="#i_message" title="<?= __("Quote") ?>" data-editor-command="quote" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-quote-left"></i></button>
                    <button data-area="#i_message" title="<?= __("Spoiler") ?>" data-editor-command="spoiler" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-eye"></i></button>
                </div>
            </div>
        </div>
        <div class="panel-body" style="padding:0">
            <textarea class="form-control" id="i_message" name="message" required rows="12" cols="60" style="resize:vertical;max-height:499px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin:-1px;width:calc(100% + 2px)"></textarea>
        </div>
    </div>
</div>
<div class="form-group">
    <label for="i_files"><?= __("Attachments: <small>(max. %max_attachment_count% files, max. %max_attachment_size% MiB each)</small>", [
        "max_attachment_count" => strval(MAX_ATTACHMENT_COUNT),
        "max_attachment_size" => strval(MAX_ATTACHMENT_SIZE >> 20)
    ]) ?></label>
    <input type="file" name="files[]" id="i_files" multiple accept="*/*">
</div>
<button type="submit" class="btn btn-success"><?= __("Post reply") ?> <span class="fa fa-send" aria-hidden="true"></span></button>
</form>

<script type="text/javascript">
    $(function() {
        function insertAroundSelection(textarea, before, after) {
            var start = textarea.selectionStart;
            var end = textarea.selectionEnd;
            var text = textarea.value;
            var pre = text.substring(0, start);
            var inner = text.substring(start, end);
            var post = text.substring(end);
            start += before.length;
            end += before.length;
            text = pre + before + inner + after + post;
            textarea.value = text;
            textarea.focus();
            textarea.selectionStart = start;
            textarea.selectionEnd = end;
        }

        function getTextarea(btn) {
            return $($(btn).attr("data-area"))[0];
        }

        var commands = {
            bold: function(textarea) {
                insertAroundSelection(textarea, "[b]", "[/b]");
            },
            italic: function(textarea) {
                insertAroundSelection(textarea, "[i]", "[/i]");
            },
            underline: function(textarea) {
                insertAroundSelection(textarea, "[u]", "[/u]");
            },
            strikethrough: function(textarea) {
                insertAroundSelection(textarea, "[s]", "[/s]");
            },
            sup: function(textarea) {
                insertAroundSelection(textarea, "[^]", "[/^]");
            },
            sub: function(textarea) {
                insertAroundSelection(textarea, "[_]", "[/_]");
            },
            quote: function(textarea) {
                insertAroundSelection(textarea, "> ", "");
            },
            spoiler: function(textarea) {
                insertAroundSelection(textarea, "[spoiler]", "[/spoiler]");
            }
        }

        $("button[data-editor-command]").attr("data-toggle", "tooltip").attr("data-placement", "bottom").click(function() {
            var command = $(this).attr("data-editor-command");
            var textarea = getTextarea(this);
            commands[command](textarea);
        }).tooltip();
    });
</script>