<template>
    <div class="row h-100 parentContainer">
        <div class="col">
            <loading-component class="fixed-top h-100 bg-white" style="height: 200px; top: 0;" key="1" color="success" v-show="loading"></loading-component>
            <div class="row align-items-center justify-content-center b-a b-thick h-100 pointer requestModal" data-type="logoutModal" style="border-color: #ffffff3d">
                <div class="col">
                    <div class="row d-none d-md-flex">
                        <div class="col p-r-10 p-l-10">
                            <i class="fa fa-power-off fs-12 text-primary-lighter"></i>
                        </div>
                    </div>
                    <div class="row d-flex d-md-none">
                        <div class="col-auto p-r-0">
                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                 width="25" height="25"
                                 viewBox="0 0 172 172"
                                 style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#000000"><path d="M85.96641,15.01641c-1.18418,0.0252 -2.1332,0.99941 -2.11641,2.18359v68.8c-0.0084,0.77266 0.39473,1.49492 1.0666,1.88965c0.67188,0.38633 1.49492,0.38633 2.1668,0c0.67188,-0.39472 1.075,-1.11699 1.0666,-1.88965v-68.8c0.0084,-0.57949 -0.21836,-1.14219 -0.62988,-1.55371c-0.41152,-0.41152 -0.97422,-0.63828 -1.55371,-0.62988zM66.65,17.7543c-29.74726,8.44883 -51.6,35.83613 -51.6,68.2457c0,39.11992 31.83008,70.95 70.95,70.95c39.11992,0 70.95,-31.83008 70.95,-70.95c0,-32.40957 -21.85273,-59.79687 -51.6,-68.2457v4.47637c27.34531,8.30605 47.3,33.74492 47.3,63.76934c0,36.75156 -29.89844,66.65 -66.65,66.65c-36.75156,0 -66.65,-29.89844 -66.65,-66.65c0,-30.02441 19.95469,-55.46328 47.3,-63.76934z"></path></g></g></svg>
                        </div>
                        <div class="col">
                            <h6 class="no-margin light fs-18 all-caps">Logout</h6>
                        </div>
                    </div>
                </div>
            </div>
            <modal-component styleType="fill-in" type="logoutModal">
                <div class="row">
                    <div class="col text-center">
                        <div class="row m-b-20">
                            <div class="col">
                                <div class="row text-center">
                                    <div class="col">
                                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                             width="64" height="64"
                                             viewBox="0 0 172 172"
                                             style=" fill:#000000;"><defs><linearGradient x1="86" y1="73.90625" x2="86" y2="102.15725" gradientUnits="userSpaceOnUse" id="color-1_48180_gr1"><stop offset="0" stop-color="#f6ab9c"></stop><stop offset="1" stop-color="#f6ab9c"></stop></linearGradient><linearGradient x1="86" y1="12.09375" x2="86" y2="161.54563" gradientUnits="userSpaceOnUse" id="color-2_48180_gr2"><stop offset="0" stop-color="#ed5335"></stop><stop offset="1" stop-color="#ed5335"></stop></linearGradient><linearGradient x1="86" y1="12.09375" x2="86" y2="161.54563" gradientUnits="userSpaceOnUse" id="color-3_48180_gr3"><stop offset="0" stop-color="#ed5335"></stop><stop offset="1" stop-color="#ed5335"></stop></linearGradient><linearGradient x1="86" y1="12.09375" x2="86" y2="161.54563" gradientUnits="userSpaceOnUse" id="color-4_48180_gr4"><stop offset="0" stop-color="#ed5335"></stop><stop offset="1" stop-color="#ed5335"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M86,77.9375c-5.93706,0 -10.75,4.81294 -10.75,10.75c0,5.93706 4.81294,10.75 10.75,10.75c5.93706,0 10.75,-4.81294 10.75,-10.75c0,-5.93706 -4.81294,-10.75 -10.75,-10.75z" fill="url(#color-1_48180_gr1)"></path><path d="M112.89113,27.10075l-2.15269,4.9235c22.52125,9.84431 37.07406,32.08606 37.07406,56.66325c0,34.08556 -27.72694,61.8125 -61.8125,61.8125c-34.08556,0 -61.8125,-27.72694 -61.8125,-61.8125c0,-24.5745 14.55013,-46.81356 37.07138,-56.66325l-2.15269,-4.9235c-24.48044,10.70163 -40.29369,34.87838 -40.29369,61.58675c0,37.04719 30.14031,67.1875 67.1875,67.1875c37.04719,0 67.1875,-30.14031 67.1875,-67.1875c0,-26.71106 -15.81862,-50.88781 -40.29637,-61.58675z" fill="url(#color-2_48180_gr2)"></path></g></g></svg>
                                    </div>
                                </div>
                                <h3 class="all-caps">Are you leaving?</h3>
                                <div class="fs-11">Are you sure you want to log out ? You will return to the login screen.</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col p-r-5">
                                <div class="btn btn-sm btn-default btn-block b-rad-none" data-dismiss="modal">Stay Here</div>
                            </div>
                            <div class="col p-l-5">
                                <div class="btn btn-sm btn-danger btn-block b-rad-none" data-dismiss="modal" @click="logout">Logout</div>
                            </div>
                        </div>
                    </div>
                </div>
            </modal-component>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import route from '@/general/functions/router';
import { useAuthStore } from '@/stores/auth';
import { useRequest } from '@/composables/useRequest';

const props = defineProps<{
    section?: string;
}>();

const authStore = useAuthStore();
const { submit } = useRequest();
const loading = ref(false);

const redirectToLogin = () => {
    authStore.userAuthentication({ access_token: '', redirect_url: route('login') });
};

const logout = async () => {
    loading.value = true;

    await submit(
        route('api.account.authentication.logout'),
        'get',
        props.section ?? 'logoutSection',
        false,
        false,
        undefined,
        {
            successHandler: redirectToLogin,
            errorHandler: redirectToLogin
        }
    );
};
</script>
