<template>
    <AuthContentWrapper ref="auth">
        <!--Server Check-->
        <AuthContent :visible="true" class="mt-6 mb-12 !max-w-2xl">
            <Headline
                class="mx-auto !mb-10 max-w-screen-sm"
                title="Server Check"
                description="At first, we have to check if all modules and setup is ready for running VueFileManager"
            >
                <settings-icon
                    size="40"
                    class="vue-feather text-theme mx-auto mb-3 animate-[spin_5s_linear_infinite]"
                />
            </Headline>

            <!--PHP version and ini check-->
            <div class="card shadow-card">
                <FormLabel> PHP Setup </FormLabel>

                <InfoBox class="!mb-2">
                    <p>
                        Those PHP settings are needed for accurate running VueFileManager on your server, please check
                        and tweak in your php.ini if needed.
                    </p>
                </InfoBox>

                <div
                    class="flex items-center justify-between border-b border-dashed border-light py-3 dark:border-opacity-5"
                >
                    <div class="text-left">
                        <b class="block text-sm font-bold">PHP Version</b>
                        <small v-if="!phpVersion.acceptable" class="dark:text-gray-500 text-xs text-gray-600 pt-1 block leading-normal">
                            You need PHP version at least {{ phpVersion.minimal }}.
                        </small>
                    </div>
                    <div class="flex items-center">
                        <check-icon v-if="phpVersion.acceptable" size="16" class="vue-feather dark:text-theme text-theme" />
                        <x-icon v-if="!phpVersion.acceptable" size="16" class="vue-feather dark:text-red-600 text-red-600" />

                        <span
                            class="ml-3 text-sm font-bold"
                            :class="phpVersion.acceptable ? 'dark:text-green-600 text-green-600' : 'dark:text-red-600 text-red-600'"
                        >
                            {{ phpVersion.current }}
                        </span>
                    </div>
                </div>

                <div
                    v-for="(values, setting, i) in ini"
                    :key="i"
                    class="flex items-center justify-between border-b border-dashed border-light py-3 dark:border-opacity-5"
                >
                    <div class="text-left">
                        <b class="block text-sm font-bold">{{ setting }}</b>
                        <small v-if="!values.status" class="dark:text-gray-500 text-xs text-gray-600 pt-1 block leading-normal">
                            We recommend set this value at least {{ values.minimal }}.
                        </small>
                    </div>
                    <div class="flex items-center">
                        <check-icon v-if="values.status" size="16" class="vue-feather dark:text-theme text-theme" />
                        <x-icon v-if="!values.status" size="16" class="vue-feather dark:text-red-600 text-red-600" />

                        <span class="ml-3 text-sm font-bold" :class="values.status ? 'dark:text-green-600 text-green-600' : 'dark:text-red-600 text-red-600'">
                            {{ values.current }}{{ setting !== 'max_execution_time' ? 'M' : '' }}
                        </span>
                    </div>
                </div>
            </div>

            <!--PHP Extension info-->
            <div class="card shadow-card">
                <FormLabel> Required PHP Extensions </FormLabel>

                <InfoBox class="!mb-2">
                    <p>
                        Those PHP modules are needed for accurate running VueFileManager on your server, please check
                        and install if some is missing.
                    </p>
                </InfoBox>

                <div
                    v-if="modules"
                    v-for="(value, module, i) in modules"
                    :key="i"
                    class="flex items-center justify-between border-b border-dashed border-light py-3 dark:border-opacity-5"
                >
                    <b class="text-sm font-bold">
                        {{ module }}
                    </b>
                    <div class="flex items-center">
                        <check-icon v-if="value" size="16" class="vue-feather dark:text-theme text-theme" />
                        <x-icon v-if="!value" size="16" class="vue-feather dark:text-red-600 text-red-600" />

                        <span class="ml-3 text-sm font-bold" :class="value ? 'dark:text-green-600 text-green-600' : 'dark:text-red-600 text-red-600'">
                            {{ value ? 'Module Installed' : 'Missing Module' }}
                        </span>
                    </div>
                </div>
            </div>

            <!--API check-->
            <div class="card shadow-card">
                <FormLabel> API </FormLabel>

                <InfoBox class="!mb-2">
                    <p>The check, if your domain is set correctly.</p>
                </InfoBox>

                <div class="flex items-center justify-between pt-3">
                    <div class="text-left">
                        <b class="block text-sm font-bold">API</b>
                        <small v-if="isCheckedAPI && !apiRunning" class="dark:text-gray-500 text-xs text-gray-600 pt-1 block leading-normal">
                            We detect, your domain root is not set correctly, please check it.
                        </small>
                    </div>
                    <div v-if="isCheckedAPI" class="flex items-center">
                        <check-icon v-if="apiRunning" size="16" class="vue-feather dark:text-theme text-theme" />
                        <x-icon v-if="!apiRunning" size="16" class="vue-feather dark:text-red-600 text-red-600" />

                        <span class="ml-3 text-sm font-bold" :class="apiRunning ? 'dark:text-green-600 text-green-600' : 'dark:text-red-600 text-red-600'">
                            {{ apiRunning ? 'Working correctly' : "Doesn't work" }}
                        </span>
                    </div>
                    <span v-if="!isCheckedAPI" class="ml-3 text-sm font-bold text-gray-600">Checking your API...</span>
                </div>

            </div>

			<InfoBox v-if="isError" type="error">
				<p>
					We can't proceed to the next step because there are unresolved issues. Please solve it at first
					and next continue.
				</p>
			</InfoBox>

            <AuthButton
                @click.native="lastCheckBeforeNextPage"
                class="w-full justify-center"
                icon="chevron-right"
                text="Awesome, I'm done!"
                :loading="isLoading"
                :disabled="isLoading"
            />
        </AuthContent>
    </AuthContentWrapper>
</template>

<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
import SelectInput from '../../components/Others/Forms/SelectInput'
import FormLabel from '../../components/Others/Forms/FormLabel'
import InfoBox from '../../components/Others/Forms/InfoBox'
import AuthContent from '../../components/Auth/AuthContent'
import AuthButton from '../../components/Auth/AuthButton'
import { required } from 'vee-validate/dist/rules'
import Headline from '../Auth/Headline'
import { mapGetters } from 'vuex'
import axios from 'axios'
import { CheckIcon, XIcon, SettingsIcon } from 'vue-feather-icons'

export default {
    name: 'StatusCheck',
    components: {
        AuthContentWrapper,
        ValidationProvider,
        ValidationObserver,
        SettingsIcon,
        SelectInput,
        AuthContent,
        AuthButton,
        FormLabel,
        required,
        InfoBox,
        CheckIcon,
        Headline,
        XIcon,
    },
    computed: {
        modules() {
            return this.$root.$data.config.statusCheck.modules
        },
        ini() {
            return this.$root.$data.config.statusCheck.ini
        },
        phpVersion() {
            return this.$root.$data.config.statusCheck.php_version
        },
        isCheckedAPI() {
            return typeof this.apiRunning !== 'undefined'
        },
    },
    data() {
        return {
            isLoading: false,
            isError: false,
            apiRunning: undefined,
        }
    },
    methods: {
        lastCheckBeforeNextPage() {
            let modulesCheck = Object.values(this.$root.$data.config.statusCheck.modules).every(
                (module) => module === true
            )

            let iniCheck = Object.values(this.$root.$data.config.statusCheck.ini).every(
                (setting) => setting.status === true
            )

            if (modulesCheck && iniCheck && this.apiRunning && this.phpVersion.acceptable) {
                this.$router.push({ name: 'PurchaseCode' })
            } else {
                this.isError = true
            }
        },
        pingAPI() {
            axios
                .get('/api/ping')
                .then((response) => {
                    this.apiRunning = response.data === 'pong'
                })
                .catch(() => {
                    this.apiRunning = false
                })
        },
    },
    created() {
        this.$scrollTop()
        this.pingAPI()
    },
}
</script>
