1/*
2 * Copyright (C) 2024 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15import './MainMenuItem.js';
16import './MainMenuGroup.js';
17import { MainMenuGroup } from './MainMenuGroup.js';
18import { MainMenuItem } from './MainMenuItem.js';
19const initHtmlStyle = `
20    <style>
21        :host{
22            width: 248px;
23            height: 100vh;
24            display: flex;
25            flex-direction: column;
26            background-color: #fff;
27        }
28        .menu-body ::-webkit-scrollbar-thumb
29        {
30            background-color: var(--dark-background,#FFFFFF);
31            border-radius:10px;
32
33        }
34        .menu-body ::-webkit-scrollbar-track
35        {
36            border-radius:10px;
37            background-color:#F5F5F5;
38
39        }
40        .header{
41            display: grid;
42            width: 100%;
43            height: 56px;
44            font-size: 1.4rem;
45            padding-left: 20px;
46            gap: 0 20px;
47            box-sizing: border-box;
48            grid-template-columns: min-content 1fr min-content;
49            grid-template-rows: auto;
50            color: #47A7E0;
51            background-color: var(--dark-background1);
52            border-bottom: 1px solid var(--dark-background1,#EFEFEF);
53        }
54        .bottom{
55            width: 100%;
56            display: flex;
57            justify-content: space-between;
58        }
59        .header *{
60            user-select: none;
61            align-self: center;
62        }
63        *{
64            box-sizing: border-box;
65        }
66        </style>
67    `;
68export class MainMenu extends HTMLElement {
69    constructor() {
70        super();
71        this.attachShadow({ mode: 'open' }).innerHTML = this.initHtml();
72        this.initElements();
73    }
74    get menus() {
75        return this._menus;
76    }
77    set menus(value) {
78        this._menus = value;
79        this.shadowRoot?.querySelectorAll('lit-main-menu-group').forEach((menuItem) => menuItem.remove());
80        let menuBody = this.shadowRoot?.querySelector('.menu-body');
81        if (this.getAttribute('main_menu') === '1' && window.localStorage.getItem('Theme') === 'dark') {
82            this.style.backgroundColor = '#262f3c';
83        }
84        else {
85            this.style.backgroundColor = '#fff';
86        }
87        value === null || value === void 0 ? void 0 : value.forEach((it) => {
88            let group = new MainMenuGroup();
89            group.setAttribute('title', it.title || '');
90            if (it.describe !== '') {
91                group.setAttribute('describe', it.describe || '');
92            }
93            else {
94                group.removeAttribute('describe');
95            }
96            group.setAttribute('icon', it.icon || '');
97            if (it.collapsed) {
98                group.setAttribute('collapsed', '');
99            }
100            else {
101                group.removeAttribute('collapsed');
102            }
103            let groupName = group.shadowRoot.querySelector('.group-name');
104            let groupDescribe = group.shadowRoot.querySelector('.group-describe');
105            menuBody === null || menuBody === void 0 ? void 0 : menuBody.appendChild(group);
106            it.children?.forEach((item) => {
107                if (item.fileModel !== undefined && item.fileModel === 'db') {
108                    return;
109                }
110                this.notChildren(item, group, groupName, groupDescribe);
111            });
112        });
113    }
114    notChildren(item, group, groupName, groupDescribe) {
115        let th = new MainMenuItem();
116        th.setAttribute('icon', item.icon || '');
117        th.setAttribute('title', item.title || '');
118        if (this.getAttribute('main_menu') === '1' && window.localStorage.getItem('Theme') === 'dark') {
119            groupName.style.color = 'white';
120            groupDescribe.style.color = 'white';
121            th.style.color = 'white';
122        }
123        else {
124            groupName.style.color = 'black';
125            groupDescribe.style.color = 'black';
126            th.style.color = 'black';
127        }
128        if (item.fileChoose) {
129            th.setAttribute('file', '');
130            th.addEventListener('file-change', (event) => {
131                if (item.fileHandler && !th.disabled) {
132                    item.fileHandler(event);
133                }
134            });
135        }
136        else {
137            th.removeAttribute('file');
138            th.addEventListener('click', (event) => {
139                if (item.clickHandler && !th.disabled) {
140                    item.clickHandler(item);
141                }
142            });
143        }
144        if (item.multi) {
145            th.multi = true;
146        }
147        if (item.disabled !== undefined) {
148            th.disabled = item.disabled;
149        }
150        group === null || group === void 0 ? void 0 : group.appendChild(th);
151    }
152    initElements() {
153    }
154    initHtml() {
155        return `
156        ${initHtmlStyle}
157        <div class="header" name="header">
158            <img src="img/ap_logo.png"/>
159            <div class="menu-button">
160                    <lit-icon name="menu" size="20" color="var(blue,#4D4D4D)"></lit-icon>
161              </div>
162            </div>
163            <div class="menu-body" style="overflow: auto;overflow-x:hidden;height: 100%">
164                <slot id="st" ></slot>
165            </div>
166      `;
167    }
168}
169if (!customElements.get('lit-main-menu')) {
170    customElements.define('lit-main-menu', MainMenu);
171}
172