<template>
    <a
        v-if="linked"
        href="#"
        :class="
            'ye-builder-icon-access' + (status === true ? '' : status === false ? '-denied' : '')
        "
        :title="$t('Restricted Content')"
        :uk-tooltip="`delay: 1000; pos: ${tooltipDirection}`"
        @click.prevent.stop="edit"
    ></a>

    <span
        v-else
        :class="
            'ye-builder-icon-access' + (status === true ? '' : status === false ? '-denied' : '')
        "
        :title="$t('Restricted Content')"
        :uk-tooltip="`delay: 1000; pos: ${tooltipDirection}`"
    ></span>
</template>

<script>
export default {
    inject: ['Builder', 'EssentialsCondition'],

    props: {
        node: {
            type: Object,
            required: true,
        },

        tooltipDirection: {
            type: String,
            default: 'bottom',
        },
    },

    data: () => ({
        status: null,
    }),

    computed: {
        linked() {
            const { node, type } = this.node;

            if (node.type === 'row' || (type.element && type.container)) {
                return false;
            }

            return true;
        },
    },

    mounted() {
        this.setStatus(window.$yooesslogs || {});
    },

    methods: {
        edit() {
            this.EssentialsCondition.openConditionPanel({
                node: this.node.node,
                builder: this.Builder,
                values: this.node.node.props,
            });
        },

        setStatus({ access }) {
            const nodeId = this.Builder.id(this.node.node);
            this.status = access?.[nodeId]?.result;
        },
    },

    events: {
        readyPreview: {
            handler(e, { window: { $yooesslogs = {} } }) {
                this.setStatus($yooesslogs);
            },

            priority: 50,
        },
    },
};
</script>
