import { defineStore } from 'pinia'
import { useClickable } from './clickable'

export const usePromoSidebar = defineStore('promo_sidebar', {
    state: () => {
        return {
            id_clickable: undefined,
            title: undefined,
            description: undefined,
            target: undefined,
            loading: true,
            is_open: false,
            accordions: [],
        } as PromoSidebar
    },
    actions: {
        open(id?: number) {
            if (id) {
                const clickable = useClickable()
                const target = clickable.list.find(el => el.id == id)
                if (!target) return
                const sidebar_data = {
                    id_clickable: id,
                    target_id: target.id,
                    title: target.name,
                    description: target.description
                } as PromoSidebarData
                if (target?.target) {
                    sidebar_data.target = target.target.toString()
                }
                this.setData(sidebar_data)
            }

            this.is_open = true
            this.loading = true
        },
        setData(data: PromoSidebarData) {
            this.$state = Object.assign(this.$state, data)
        },
        close() {
            if (this.is_open) {
                this.$reset()
                this.is_open = false
            }
        },
        toggleAccordion(name: string) {
            if (name == 'obj' && this.accordions.includes('clickable')) this.toggleAccordion('clickable')
            if (name == 'clickable' && this.accordions.includes('obj')) this.toggleAccordion('obj')

            if (this.accordions.includes(name)) {
                this.accordions.splice(this.accordions.indexOf(name), 1)
            } else {
                this.accordions.push(name)
            }

        },
        isAccOpen(name: string) {
            return this.accordions.includes(name)
        }
    }
})