{% extends 'secrets/secret_detail.html' %}
{% load i18n %}

{% block secret_content %}
    <div class="row mb-3">
        <div class="col-12 d-grid">
            <button id="revealButton" class="btn btn-light btn-lg btn-block" type="button"
                    data-bs-toggle="tooltip"
                    data-bs-placement="top" title="{% trans "Reveal" %}" onclick="toggleReveal()">
                <i class="fa fa-magic fa-fw"></i> <span>{% trans "Reveal" %}</span>
            </button>
        </div>
    </div>
    <div class="row mb-3 justify-content-center">
        <div class="card-wrapper"></div>
    </div>
    <div id="ccform">
        <input type="hidden" autocomplete="off" name="number" id="id_number">
        <input type="hidden" autocomplete="off" name="holder" id="id_holder">
        <input type="hidden" autocomplete="off" name="expiration_month" id="id_expiration_month">
        <input type="hidden" autocomplete="off" name="expiration_year" id="id_expiration_year">
        <div class="row table-responsive">
            <table class="align-middle justify-content-center secret-attributes">
                <tr>
                    <td>{% trans "CVV" %}</td>
                    <td>
                        <div class="input-group w-50">
                            <input class="form-control" id="id_security_code" name="security_code" placeholder="•••"
                                   type="text" readonly autocomplete="off">
                            <button class="btn btn-light" id="copy-ccCode"
                                    data-clipboard-target="#id_security_code">
                                <i class="fa fa-clipboard"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>{% trans "Password" %}</td>
                    <td>
                        <div class="input-group w-50">
                            <input class="form-control" id="id_password" name="password" placeholder="•••••••••"
                                   type="text"
                                   readonly autocomplete="off">
                            <button class="btn btn-light" id="copy-ccPassword"
                                    data-clipboard-target="#id_password">
                                <i class="fa fa-clipboard"></i>
                            </button>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
{% endblock %}

{% block secret_attributes %}
    {% if secret.description %}
        <hr>
        <div class="row mb-3 table-responsive">
            <table class="align-middle justify-content-center secret-attributes">
                <tr>
                    <td>{% trans "Description" %}</td>
                    <td>{{ secret.description|linebreaksbr|urlize }}</td>
                </tr>
            </table>
        </div>
    {% endif %}
{% endblock %}

{% block additionalJS %}
    <script>
        function initializeCreditCard() {
            let el = document.querySelector('.card-wrapper')
            el.card = new window.Card({
                form: '#ccform',
                container: '.card-wrapper',
                formSelectors: {
                    numberInput: 'input#id_number',
                    expiryInput: 'input#id_expiration_month, input#id_expiration_year',
                    cvcInput: 'input#id_security_code',
                    nameInput: 'input#id_holder',
                },
                messages: {
                    validDate: '{% trans "valid\nthru" %}',
                    monthYear: '{% trans "MM" %}/{% trans "YYYY" %}',
                },
                formatting: true,
                placeholders: {
                    number: '•••• •••• •••• ••••',
                    name: '{% trans "Full name" %}',
                    expiry: '••/••••',
                    cvc: '•••'
                },
            })
        }

        function clearCreditCard() {
            let el = document.querySelector('.card-wrapper')
            el.innerHTML = ''
            el.card.render()
        }

        function fillCreditCard(number, name, expiration_month, expiration_year) {
            let numEl = document.querySelector('.jp-card-number');
            let nameEl = document.querySelector('.jp-card-name');
            let expiryEl = document.querySelector('.jp-card-expiry');
            numEl.innerHTML = number
            nameEl.innerHTML = name
            expiryEl.innerHTML = expiration_month + '/' + expiration_year
        }

        let ccCodeClipboard;
        let ccPasswordClipboard;

        function initializeClipboards() {
            ccCodeClipboard = new window.ClipboardJS("#copy-ccCode").on('success', function (e) {
                e.clearSelection();
                notyf.success("{% trans "Code has been copied to your clipboard." %}");
            });

            ccPasswordClipboard = new window.ClipboardJS("#copy-ccPassword").on('success', function (e) {
                e.clearSelection();
                notyf.success("{% trans "Password has been copied to your clipboard." %}");
            });
        }

        /* TODO: Maybe replace this whole JS part with HTMX? */
        const revealText = "{% trans "Reveal" %}"
        const hideText = "{% trans "Hide" %}"
        let reveal_toggled = false;

        function toggleReveal() {
            let revealBtn = document.getElementById('revealButton');
            let revealBtnSpan = revealBtn.querySelector('span');
            let revealBtnIcon = revealBtn.querySelector('i');
            if (reveal_toggled === true) {
                revealBtnSpan.textContent = revealText
                revealBtnIcon.classList.remove('fa-shield')
                revealBtnIcon.classList.add('fa-magic')

                clearCreditCard()
                document.getElementById('id_security_code').value = '';
                document.getElementById('id_password').value = ''
                document.getElementById('copy-ccCode').disabled = true;
                document.getElementById('copy-ccPassword').disabled = true;
                reveal_toggled = false;

                ccCodeClipboard.destroy();
                ccPasswordClipboard.destroy();
            } else {
                let data = getSecretSync();
                revealBtnSpan.textContent = hideText
                revealBtnIcon.classList.remove('fa-shield')  // replace?
                revealBtnIcon.classList.add('fa-magic')
                fillCreditCard(data['number'], data['holder'], data['expiration_month'], data['expiration_year'])

                document.getElementById('id_security_code').value = data['security_code'];
                document.getElementById('id_password').value = data['password'];
                document.getElementById('copy-ccCode').disabled = false;
                document.getElementById('copy-ccPassword').disabled = false;

                initializeClipboards()
                reveal_toggled = true;
            }
        }

        window.addEventListener('DOMContentLoaded', () => {
            document.getElementById('copy-ccCode').disabled = true;
            document.getElementById('copy-ccPassword').disabled = true
            initializeCreditCard()
        })
    </script>
{% endblock %}
