<template>
    <PageTab :is-loading="isLoading">
		<div v-if="app" class="card shadow-card">
			<FormLabel>
				{{ $t('admin_settings.appearance.section_general') }}
			</FormLabel>

			<AppInputSwitch :title="$t('color_theme')" :description="$t('color_theme_description')">
				<input @input="$updateText('/admin/settings', 'app_color', app.color)" v-model="app.color" :placeholder="$t('admin_settings.appearance.title_plac')" type="color"/>
			</AppInputSwitch>

			<AppInputText :title="$t('admin_settings.appearance.title')">
				<input @input="$updateText('/admin/settings', 'app_title', app.title)" v-model="app.title" :placeholder="$t('admin_settings.appearance.title_plac')" type="text" class="focus-border-theme input-dark"/>
			</AppInputText>

			<AppInputText :title="$t('admin_settings.appearance.description')" :is-last="true">
				<input @input="$updateText('/admin/settings', 'app_description', app.description)" v-model="app.description" :placeholder="$t('admin_settings.appearance.description_plac')" type="text" class="focus-border-theme input-dark"/>
			</AppInputText>
		</div>
		<div v-if="app" class="card shadow-card">
			<FormLabel>
				{{ $t('Branding') }}
			</FormLabel>

			<AppInputText :title="$t('admin_settings.appearance.logo')">
				<ImageInput @input="$updateImage('/admin/settings', 'app_logo', app.logo)" :image="$getImage(app.logo)" v-model="app.logo"/>
			</AppInputText>

			<AppInputText :title="$t('admin_settings.appearance.logo_horizontal')">
				<ImageInput @input="$updateImage('/admin/settings', 'app_logo_horizontal', app.logo_horizontal)" :image="$getImage(app.logo_horizontal)" v-model="app.logo_horizontal"/>
			</AppInputText>

			<AppInputText :title="$t('admin_settings.appearance.favicon')">
				<ImageInput @input="$updateImage('/admin/settings', 'app_favicon', app.favicon)" :image="$getImage(app.favicon)" v-model="app.favicon"/>
			</AppInputText>

			<AppInputText :title="$t('og_image')" :description="$t('og_image_description')">
				<ImageInput @input="$updateImage('/admin/settings', 'app_og_image', app.og_image)" :image="$getImage(app.og_image)" v-model="app.og_image"/>
			</AppInputText>

			<AppInputText :title="$t('app_touch_icon')" :description="$t('app_touch_icon_description')">
				<ImageInput @input="$updateImage('/admin/settings', 'app_touch_icon', app.touch_icon)" :image="$getImage(app.touch_icon)" v-model="app.touch_icon"/>
			</AppInputText>
		</div>
    </PageTab>
</template>

<script>
	import AppInputSwitch from "../../../../components/Admin/AppInputSwitch";
	import AppInputText from "../../../../components/Admin/AppInputText";
    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
    import PageTabGroup from "../../../../components/Others/Layout/PageTabGroup";
    import SelectInput from "../../../../components/Others/Forms/SelectInput";
    import ImageInput from "../../../../components/Others/Forms/ImageInput";
    import FormLabel from "../../../../components/Others/Forms/FormLabel";
    import ButtonBase from "../../../../components/FilesView/ButtonBase";
    import SetupBox from "../../../../components/Others/Forms/SetupBox";
    import PageTab from "../../../../components/Others/Layout/PageTab";
    import InfoBox from "../../../../components/Others/Forms/InfoBox";
    import {required} from 'vee-validate/dist/rules'
    import axios from 'axios'

    export default {
        name: 'AppAppearance',
        components: {
			AppInputSwitch,
			AppInputText,
            ValidationObserver,
            ValidationProvider,
            PageTabGroup,
            SelectInput,
            ImageInput,
            ButtonBase,
            FormLabel,
            SetupBox,
            required,
            PageTab,
            InfoBox,
        },
        data() {
            return {
                isLoading: true,
                app: undefined,
            }
        },
        mounted() {
            axios.get('/api/admin/settings', {
                params: {
                    column: 'app_title|app_description|app_logo|app_favicon|app_logo_horizontal|app_color|app_og_image|app_touch_icon'
                }
            })
                .then(response => {
                    this.app = {
                        logo_horizontal: response.data.app_logo_horizontal,
                        description: response.data.app_description,
                        favicon: response.data.app_favicon,
                        title: response.data.app_title,
                        color: response.data.app_color,
                        logo: response.data.app_logo,
                        og_image: response.data.app_og_image,
                        touch_icon: response.data.app_touch_icon,
                    }
                })
                .finally(() => {
                    this.isLoading = false
                })
        }
    }
</script>
