{%extends "base.html"%}

{%block title%}
<title>Lang Huan: Main</title>
{%endblock%}

{%block content%}
<div class="body p-0">
<div class="row">
    <div class="col-sm-3 p-3">
            {%block work_title%}
            <h3 class="m-3">
                <strong>Lang</strong><span class='text-warning'>Hu</span><strong class='text-danger'>an</strong>
                <a class="github-button" href="https://github.com/raynardj/langhuan" data-size="large"
                    data-show-count="true" aria-label="Star raynardj/langhuan on GitHub">Star</a>
            </h3>
            <div class="m-3 p-2 text-white bg-secondary rounded text-center">
                <i class="fas fa-user">

                </i>
                <span id="user_id">

                </span>
            </div>
            {%endblock%}
            <hr>

            {%block controls%}

            {%endblock%}
        
            <div id="histories">

            </div>
    </div>

    <div class="col-sm-9">
        {%block topbar%}
        <div class="card m-2 sticky-top">
            <div class="card-body">
                {%block labels%}
                <h5>
                    Labels
                </h5>
                <div id="label_pool" class="p-1">

                </div>
                {%endblock%}

            </div>
        </div>
        {%endblock%}
        <div class="card m-2">
            <pre id="raw" style="white-space:pre-wrap" class="card-body">{%block raw%}{%endblock%}</pre>
        </div>

    </div>
</div>
</div>
{%endblock%}

{%block tail_js%}
{{super()}}
<script>
    const flavors = [
        "primary", "danger", "success", "warning", "dark", "secondary", "info"
    ]
    var index = parseInt("{{index}}");

    const genRanHex = size => [...Array(size)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');

    const get_user_id = () => {
        var user_id = localStorage.getItem("lh_user")
        if (user_id) {
            return user_id
        } else {
            user_id = genRanHex(10)
            localStorage.setItem("lh_user", user_id)
            return user_id
        }
    }

    var user_id = get_user_id();
    document.querySelector('#user_id').innerHTML = user_id

    fetch("/data", {
        method: "POST",
        header: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            index,
            user_id: get_user_id()
        })
    }).then(res => res.json())
        .then(d => {
            create_controls(d);
            create_raw(d);

            if (d.record) {
                localStorage.setItem("has_record", "true")
            } else {
                localStorage.setItem("has_record", "false")
            }
        })
        .catch(console.error)

    const skipping = () => {

        // if already tagged, skipping means not bothering this entry
        if (localStorage.getItem("has_record") == "true") {
            window.location = "/"
            return
        }
        // if not tagged yet, skipping means entering empty entry
        console.log("sending empty")
        var user_id = get_user_id();
        var skipped = true;
        var index = parseInt(document.querySelector("#raw").dataset.hl_index);

        fetch("/tagging", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                user_id,
                index,
                skipped
            })
        })
            .then(res => res.json())
            .then(data => {
                window.location = "/"
            })
            .catch(console.error)
    }

    const tagging = (data) => {
        data.user_id = get_user_id()
        data.index = parseInt(
            document.querySelector("#raw").dataset.hl_index);
        fetch("/tagging", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(res => res.json())
            .then(data => {
                window.location = "/"
            })
            .catch(console.error)
    }
</script>
{%endblock%}