import { reactive } from 'vue'

export const LeftDataBus = reactive<LeftData>({})

const defaultData = {
    root: [
        {
            label: 'レコードを追加画面',
            children: [
                {
                    label: '追加画面表示した時',
                    header: 'rg',
                    value: '1-1',
                    group: 'g1',
                    children: []
                },
                {
                    label: '保存をクリックした時',
                    header: 'rg',
                    value: '1-2',
                    group: 'g1',
                    children: []
                },
                {
                    label: '保存成功した時',
                    header: 'rg',
                    value: '1-3',
                    group: 'g1',
                    children: []
                },
            ]
        },
        {
            label: 'レコード編集画面',
        },
        {
            label: 'レコード詳細画面',
        },
        {
            label: 'レコード一覧画面',
        },
    ],
    data: new Map([['g1', '1-1']])
}

export const setControlPanel = (rootData: LeftData) => {
    const { root: dr, data: dd } = defaultData
    LeftDataBus.title = rootData.title
    LeftDataBus.root = rootData.root ?? dr
    LeftDataBus.data = rootData.data ?? dd
}

export const setControlPanelE = () => {
    const { root: dr, data: dd } = defaultData
    // LeftDataBus.title = rootData.title
    LeftDataBus.root = dr
    LeftDataBus.data = dd
}

export interface LeftData {
    title?: string
    root?: ControlPanelData[]
    data?: Map<string, string>
}

export interface ControlPanelData {
    label: string,
    header?: string,
    value?: string,
    group?: string,
    children?: ControlPanelData[]
}
