<template>
    <div>
        <form v-if="loaded" novalidate @submit.prevent="submit">
            <div class="bg-white @container rounded-lg shadow-lg" x-show="finished === false">
                <div class="sticky top-0 z-10 hidden @sm:flex overflow-hidden rounded-t-lg h-12 @md:h-16">
                    <template v-for="(section, index) in v.sections">
                        <a
                            href="#"
                            class="flex flex-col @md:flex-row items-center justify-center @md:justify-start px-2 flex-auto @md:pl-6 h-full transition duration-300 relative"
                            :class="{'bg-primary': index <= active, 'bg-secondary': index > active}"
                            @click.prevent="active = index"
                        >
                            <svg
                                preserveAspectRatio="none"
                                class="h-full w-3 absolute left-0 text-primary transition duration-300"
                                viewBox="0 0 100 100"
                                :class="{'opacity-100': index !== 0 && index - 1 <= active, 'opacity-0': !(index !== 0 && index - 1 <= active)}"
                            >
                                <path d="M0,0 100,50 0,100" fill="currentColor"></path>
                            </svg>
                            <span class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font font-goudy transition duration-300" v-html="index + 1"></span>
                            <span class="text-sm text-font ml-2" v-html="section.name"></span>
                            <div v-if="editable" class="hidden @md:flex items-center h-full">
                                <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editSection', index)">
                                    <edit-icon class="w-3 h-3 fill-current"></edit-icon>
                                </a>
                                <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('deleteSection', index)">
                                    <delete-icon class="w-3 h-3 fill-current"></delete-icon>
                                </a>
                            </div>
                        </a>
                    </template>
                    <div v-if="editable" class="hidden @md:flex items-center h-full absolute right-0 mr-6">
                        <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font" @click.prevent.stop="$emit('addSection')">
                            <svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current">
                                <path
                                    d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"
                                />
                            </svg>
                        </a>
                    </div>
                </div>
                <div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg @sm:hidden bg-secondary">
                    <a
                        href="#"
                        class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none"
                        :class="{'opacity-40': !backable}"
                        @click.prevent="back"
                    >
                        <svg class="text-sm text-font fill-current rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
                            <path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
                        </svg>
                    </a>
                    <div class="overflow-hidden">
                        <carousel v-model="active">
                            <slide v-for="(section, index) in v.sections" :key="index" class="relative flex flex-no-wrap overflow-hidden">
                                <div class="flex-none w-full">
                                    <div
                                        href="#"
                                        class="flex flex-col @md:flex-row items-center justify-center @md:justify-start px-2 flex-auto @md:pl-6 h-12 @md:h-16 transition duration-300 relative"
                                        @click="active = index"
                                    >
                                        <span class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font transition duration-300" v-html="index + 1"></span>
                                        <span class="text-sm text-font" v-html="section.name"></span>
                                    </div>
                                </div>
                            </slide>
                        </carousel>
                    </div>
                    <a
                        href="#"
                        class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none"
                        :class="{'opacity-40': !nextable}"
                        @click.prevent="next"
                    >
                        <svg class="text-sm text-font fill-current -rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
                            <path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
                        </svg>
                    </a>
                </div>

                <div class="py-4 @xs:py-8">
                    <carousel v-model="active">
                        <slide v-for="(section, index) in v.sections" :key="index">
                            <div class="w-full flex-none px-3 @xs:px-6">
                                <div class="text-sm sm_text-base text-gray-800 leading-tight mb-5" v-text="section.intro"></div>
                                <div class="grid grid-cols-2 @sm:grid-cols-4 @lg:grid-cols-6 gap-4 mt-6 items-start">
                                    <div
                                        v-for="(field, findex) in section.fields"
                                        :key="findex"
                                        class="flex justify-stretch relative group"
                                        :class="{
                                            'hover:ring-edit hover:ring-4': editable,
                                            [colClasses.mobile[field.columns.mobile]]: true,
                                            [colClasses.tablet[field.columns.tablet]]: true,
                                            [colClasses.desktop[field.columns.desktop]]: true,
                                        }"
                                    >
                                        <component :is="resolveComponentName(field)" v-model="payload[field.key]" :field="field"></component>
                                        <div v-if="editable" class="right-0 top-0 -mr-2 -mt-2 absolute hidden space-x-2 group-hover:flex">
                                            <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editField', index, findex)">
                                                <edit-icon class="w-3 h-3 fill-current"></edit-icon>
                                            </a>
                                            <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('deleteField', index, findex)">
                                                <delete-icon class="w-3 h-3 fill-current"></delete-icon>
                                            </a>
                                        </div>
                                    </div>
                                </div>

                                <div v-if="editable" class="flex justify-center mt-6 relative">
                                    <a href="#" class="bg-edit rounded-full flex w-8 h-8 items-center justify-center text-font" @click.prevent="$emit('addField', index)">
                                        <svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current">
                                            <path
                                                d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"
                                            />
                                        </svg>
                                    </a>
                                </div>
                            </div>

                            <navigation v-if="active === index" v-model="active" :last="v.sections.length"></navigation>
                        </slide>
                    </carousel>
                </div>
            </div>
        </form>
    </div>
</template>

<script setup>
import {computed, ref, watch} from 'vue';
import {Carousel, Slide} from 'vue3-carousel';
import Navigation from './components/Navigation.vue';
import useNav from './composables/useNav.js';
import FieldText from './components/fields/Text.vue';
import FieldDate from './components/fields/Date.vue';
import FieldTextarea from './components/fields/Textarea.vue';
import FieldDropdown from './components/fields/Dropdown.vue';
import FieldCheckboxes from './components/fields/Checkboxes.vue';
import FieldCheckbox from './components/fields/Checkbox.vue';
import FieldRadio from './components/fields/Radio.vue';
import EditIcon from './components/icons/EditIcon.vue';
import DeleteIcon from './components/icons/DeleteIcon.vue';

const emits = defineEmits(['addSection', 'editSection', 'deleteSection', 'addField', 'editField', 'deleteField', 'active']);

const colClasses = {
    mobile: {
        1: 'col-span-1',
        2: 'col-span-2',
        3: 'col-span-3',
        4: 'col-span-4',
        5: 'col-span-5',
        6: 'col-span-6',
    },
    tablet: {
        1: '@sm:col-span-1',
        2: '@sm:col-span-2',
        3: '@sm:col-span-3',
        4: '@sm:col-span-4',
        5: '@sm:col-span-5',
        6: '@sm:col-span-6',
    },
    desktop: {
        1: '@lg:col-span-1',
        2: '@lg:col-span-2',
        3: '@lg:col-span-3',
        4: '@lg:col-span-4',
        5: '@lg:col-span-5',
        6: '@lg:col-span-6',
    },
};

const props = defineProps({
    eventId: {
        type: Number,
    },
    editable: {
        type: Boolean,
        default: () => false,
    },
    value: {
        type: String,
        default: () => '{}',
    },
    fields: {},
});

const active = ref(0);
const payload = ref({});
const loaded = ref(false);

watch(active, function (newValue) {
    emits('active', v.value.sections.length ? active.value : null);
});

const v = computed(() => {
    loaded.value = false;
    var values = JSON.parse(props.value);
    var p = {};

    values.sections.forEach(function (section) {
        section.fields.forEach(function (field) {
            p[field.key] = field.default;
        });
    });
    payload.value = p;
    loaded.value = true;
    active.value = Math.max(0, Math.min(active.value, values.sections.length - 1));
    emits('active', values.sections.length ? active.value : null);
    return values;
});
const f = computed(() => JSON.parse(props.fields));

const {back, next, backable, nextable} = useNav(active, v.value.sections.length);

function resolveComponentName(field) {
    return {
        TextField: FieldText,
        DateField: FieldDate,
        TextareaField: FieldTextarea,
        DropdownField: FieldDropdown,
        RadioField: FieldRadio,
        CheckboxesField: FieldCheckboxes,
        CheckboxField: FieldCheckbox,
    }[field.type];
}

function submit() {
    console.log(payload.value);
}
</script>
