@page
@model HyperBooru.Pages.ViewMediaModel
@{
    ViewBag.ContentScroll = false;
}

<link rel="stylesheet" type="text/css" href="@(nameof(HyperBooru)).styles.css"/>

<script>
    var mediaId = new URL(window.location.href).searchParams.get('m');

    async function deleteMedia() {
        var resp = await fetch('/media/' + mediaId, { method: 'delete' });
        if(resp.ok) {
            window.location.href = '/';
        } else {
            alert('Failed to delete media object!');
        }
    }

    async function applyTags() {
        var checkboxes = Array.from(document
            .getElementById('tag-definitions')
            .getElementsByTagName('input'));

        var tagDefIds = checkboxes
            .filter(cb => cb.checked)
            .map(cb => cb.id.replace(/^tagdef-/, ''));

        var pendingRequests = tagDefIds
            .map(id => fetch(`/api/tag/${mediaId}/${id}`, { method: 'POST' }));

        var responses = await Promise.all(pendingRequests);

        if(responses.some(r => !r.ok && r.status != 400)) {
            alert('Error setting tags!');
        }
        showTagDialog(false);
    }

    async function removeTag(e, tagDefId) {
        var resp = await fetch(`/api/tag/${mediaId}/${tagDefId}`, { method: 'DELETE' });
        if(!resp.ok && resp.status != 400) {
            alert('Error removing tag!');
        } else {
            e.closest('tr').remove();
        }
    }

    function showDeleteDialog(visible) {
        document.getElementById('delete-dialog').classList.toggle('visible', visible);
    }

    function showTagDialog(visible) {
        document.getElementById('tag-dialog').classList.toggle('visible', visible);
        document.querySelector('div#tag-dialog input').focus();
    }

    function selectPane(tab) {
        var tabs = Array.from(document.querySelectorAll('div#metadata-header > a'));

        var panes = Array.from(document.querySelectorAll('div#metadata > div'))
            .filter(x => x.id != 'metadata-header');
        var pane = panes.filter(x => x.id == tab.dataset.pane)[0];

        for(var t of tabs) {
            if(t == tab)
                t.classList.add('selected');
            else
                t.classList.remove('selected');
        }

        for(var p of panes) {
            if(p == pane)
                p.classList.add('selected');
            else
                p.classList.remove('selected');
        }
    }
</script>

<div id="content">
    <img src="/media/@(Model.Media.Guid)"/>
    <div id="metadata">
        <div id="metadata-header">
            <a href="javascript:;" onclick="selectPane(this);" data-pane="metadata-fileinfo" class="selected">File Info</a>
            <a href="javascript:;" onclick="selectPane(this);" data-pane="metadata-tags">Tags</a>
        </div>
@*        <form method="post">
            <label for="shortDescription">Short Description</label>
            <input type="text" name="shortDescription" placeholder="@Model.Media.ShortDescription"/>
            <label for="longDescription">Long Description</label>
            <input type="text" name="longDescription" placeholder="@Model.Media.LongDescription"/>
            <input type="submit" value="Update"/>
        </form>*@
        <div id="metadata-fileinfo" class="selected">
            <p>Upload history</p>
            <hr />
            <table class="data-table">
                <tr>
                    <th>Created On</th>
                    <th>Last Write</th>
                    <th>Uploaded On</th>
                    <th>Filename</th>
                    <th>Original Checksum</th>
                </tr>
                @foreach(var file in Model.Media.UploadedFiles) {
                    <tr>
                        <td>@(file.CreateTime?.ToString() ?? "N/A")</td>
                        <td>@(file.LastWriteTime?.ToString() ?? "N/A")</td>
                        <td>@file.UploadTime</td>
                        <td>@file.Filename</td>
                        <td>@file.OriginalChecksum</td>
                    </tr>
                }
            </table>
            <div class="button-container">
                <button onclick="showDeleteDialog(true)">Delete</button>
            </div>
        </div>
        <div id="metadata-tags">
            <table class="data-table">
                <tr>
                    <th>Source</th>
                    <th>Namespace</th>
                    <th>Tag Name</th>
                    <th></th>
                </tr>
                @foreach(var tag in Model.Media.Tags.Select(t => t.TagDefinition)) {
                    <tr>
                        <td>@tag.Source</td>
                        <td>@tag.Namespace</td>
                        <td>@tag.Name</td>
                        <td><a href="javascript:;" onclick="removeTag(this, '@tag.Guid')">Delete</a></td>
                    </tr>
                }
            </table>
            <div class="button-container">
                <button onclick="showTagDialog(true)">Add Tag</button>
            </div>
        </div>
    </div>
</div>

<div id="delete-dialog" class="dialog">
    <p>Delete this media?</p>
    <hr/>
    <div class="button-container">
        <button class="secondary" onclick="showDeleteDialog(false)">Cancel</button>
        <button onclick="deleteMedia()">Confirm</button>
    </div>
</div>

<div id="tag-dialog" class="dialog">
    <p>Select one or more tag(s) to add</p>
    <hr/>
    <input type="text" placeholder="Search"/>
    <div id="tag-definitions">
        @foreach(var tagdef in Model.TagDefinitions) {
            <input type="checkbox" id="tagdef-@tagdef.Guid"/>
            <label for="tagdef-@tagdef.Guid">@tagdef.Name</label>
        }
    </div>
    <div class="button-container">
        <button onclick="showTagDialog(false)" class="secondary">Cancel</button>
        <button onclick="applyTags()">Accept</button>
    </div>
</div>