{% extends "swan/components/base.jinja" %}
{% block main %}
    <style>
        .hidden_step {
            display: none;
        }
    </style>
    <img src="{{ url_for(service.id +'_endpoint' + '.static', filename=service.logo) }}" width="300"/>
    <div class="card center" style="width: auto; min-width: 90%; margin: 40px;">
        <h1>{{ _("Enable Swan Integration") }}</h1>
        <br/>

        <div class="big_option" id="step_one" onclick="pollSuccess(); window.open('{{ flow_url }}', '_blank');">
            <div class="big_option_text"> 
                {{ _("Link your account") }}                    
            </div>
        </div>

        <div class="hidden_step" id="step_two">
            {{ _("Complete Swan link...")}}<br/>
            <br/>
            <br/>
            {{ _("If linking is complete, click ") }} <a href=''> {{ _("here") }} </a>
        </div>

        <!-- Empty href will result in keeping on that page if the auth flow didn't succeeded yet -->
        <!-- If suceeded, the controller will automaticall redirect to settings-page -->
        <div class="big_option hidden_step" id="step_three" onclick="location.href='';">
            <div class="big_option_text">
                {{ _("Click here after linking") }}
            </div>
        </div>
        
        <div class="instructions" id="instructions">
            <br>
            {{ _("Click to sign into your Swan account and authorize Specter integration.") }}<br/>
            <br/>
            {{ _("(will open in a new browser tab)") }} <br>
        </div>
        <br/>
    </div>
{% endblock %}



{% block scripts %}
    <script>
        function pollSuccess() {
            console.log("pollSuccess started");

            var step_one = document.getElementById("step_one");
            var step_two = document.getElementById("step_two");
            var instructions = document.getElementById("instructions");
            step_one.classList.add("hidden_step");
            instructions.classList.add("hidden_step");
            step_two.classList.remove("hidden_step");

            setInterval(function() {
                console.log("polling");
                var url = "{{ url_for(service.id +'_endpoint' + '.integration_check') }}";
                fetch(url)
                    .then((response) => {
                        return response.json();
                    })
                    .then((data) => {
                        console.log(data);
                        if (data.success) {
                            var step_three = document.getElementById("step_three");
                            step_two.classList.add("hidden_step");
                            step_three.classList.remove("hidden_step");
                            window.location.href = "{{ url_for(service.id +'_endpoint' + '.settings') }}"
                        }
                    });
            }, 5000);
        }
    </script>
{% endblock %}