<template>
    <div class="max-w-5xl 3xl:max-w-6xl mx-auto" data-max-width-wrapper>
        <Head :title="__('Edit Fieldset')" />

        <Header :title="__('Edit Fieldset')" icon="fieldsets">
            <ui-command-palette-item
                :category="$commandPalette.category.Actions"
                :text="__('Save')"
                icon="save"
                :action="save"
                prioritize
                v-slot="{ text, url, icon, action }"
            >
                <Button type="submit" variant="primary" @click.prevent="action" v-text="text" />
            </ui-command-palette-item>
        </Header>

        <ui-panel :heading="__('Settings')">
            <ui-card>
                <ui-field :label="__('Title')" :instructions="__('messages.fieldsets_title_instructions')" :errors="errors.title">
                    <ui-input v-model="fieldset.title" />
                </ui-field>
            </ui-card>
        </ui-panel>

        <ui-panel :heading="__('Fields')">
            <fields
                :fields="fields"
                :editing-field="editingField"
                :exclude-fieldset="fieldset.handle"
                :suggestable-condition-fields="suggestableConditionFields(this)"
                with-command-palette
                @field-created="fieldCreated"
                @field-updated="fieldUpdated"
                @field-linked="fieldLinked"
                @field-deleted="deleteField"
                @field-editing="editingField = $event"
                @editor-closed="editingField = null"
            />
        </ui-panel>
    </div>
</template>

<script>
import Fields from '@/components/blueprints/Fields.vue';
import { Sortable, Plugins } from '@shopify/draggable';
import SuggestsConditionalFields from '@/components/blueprints/SuggestsConditionalFields';
import { Header, Button } from '@/components/ui';
import Head from '@/pages/layout/Head.vue';

export default {
    mixins: [SuggestsConditionalFields],

    components: {
        Head,
        Fields,
        Header,
        Button,
    },

    props: ['action', 'initialFieldset'],

    data() {
        return {
            method: 'patch',
            initialTitle: this.initialFieldset.title,
            fieldset: clone(this.initialFieldset),
            errors: {},
            editingField: null,
        };
    },

    computed: {
        fields: {
            get() {
                return this.fieldset.fields;
            },
            set(fields) {
                this.fieldset.fields = fields;
            },
        },

        fieldsForConditionSuggestions() {
            return this.fields;
        },
    },

    mounted() {
        this.makeSortable();
    },

    watch: {
        fieldset: {
            deep: true,
            handler() {
                this.$dirty.add('fieldsets');
            },
        },
    },

    methods: {
        save() {
            this.$axios[this.method](this.action, this.fieldset)
                .then((response) => {
                    this.$toast.success(__('Saved'));
                    this.errors = {};
                    this.$dirty.remove('fieldsets');
                })
                .catch((e) => {
                    this.$toast.error(e.response.data.message);
                    this.errors = e.response.data.errors;
                });
        },

        fieldCreated(field) {
            this.fields.push(field);
        },

        fieldUpdated(i, field) {
            this.fields.splice(i, 1, field);
        },

        deleteField(i) {
            this.fields.splice(i, 1);
        },

        fieldLinked(field) {
            this.fields.push(field);
            this.$toast.success(__('Field added'));

            if (field.type === 'reference') {
                this.$nextTick(() => (this.editingField = field._id));
            }
        },

        makeSortable() {
            new Sortable(this.$el.querySelector('.blueprint-section-draggable-zone'), {
                draggable: '.blueprint-section-field',
                handle: '.blueprint-drag-handle',
                mirror: { constrainDimensions: true, appendTo: 'body' },
                plugins: [Plugins.SwapAnimation],
            }).on('sortable:stop', (e) => {
                this.fieldset.fields.splice(e.newIndex, 0, this.fieldset.fields.splice(e.oldIndex, 1)[0]);
            });
        },
    },

    created() {
        this.$keys.bindGlobal(['mod+s'], (e) => {
            e.preventDefault();
            this.save();
        });

        // Listen for root-form-save events from child components
        // This also happens on the blueprint builder.
        this.$events.$on('root-form-save', () => {
            this.save();
        });
    },

    beforeUnmount() {
        this.$events.$off('root-form-save');
    },
};
</script>
