<script>
export default {
    emits: ['loaded'],

    props: {
        config: Object,
        initialValue: {},
        initialMeta: {},
    },

    data() {
        return {
            meta: this.initialMeta,
            value: this.initialValue,
            loading: false,
        };
    },

    computed: {
        isPreloadable() {
            return this.$config.get('preloadableFieldtypes').includes(this.config.type);
        },
    },

    render() {
        return this.$slots.default({
            meta: this.meta,
            value: this.value,
            loading: this.loading,
            updateMeta: this.updateMeta,
            config: this.config,
        })[0];
    },

    created() {
        if (!this.isPreloadable) return;

        // For hardcoded field components (ie. when used inside a custom form, without being generated from
        // a blueprint) the developer wouldn't pass in a `meta` prop to the `form-group` component. In
        // this case, we'll want to lazy-load the preloaded meta data, and the pre-processed value.
        if (this.initialMeta === undefined) this.load();
    },

    watch: {
        initialValue(value) {
            this.value = value;
        },

        initialMeta(meta) {
            this.meta = meta;
        },
    },

    methods: {
        load() {
            this.loading = true;

            const params = {
                config: utf8btoa(JSON.stringify(this.config)),
                value: this.value,
            };

            this.$axios.post(cp_url('fields/field-meta'), params).then((response) => {
                this.meta = response.data.meta;
                this.value = response.data.value;
                this.loading = false;
                this.$emit('loaded');
            });
        },

        updateMeta(value) {
            this.meta = value;
        },
    },
};
</script>
