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 { BlockTag } from '../model/BlockTag';
16import { tagDesRule } from '../utils';
17import { formatDate } from '../utils/timeUtil';
18
19@Component
20export struct IconPalette {
21  @Prop icon: ResourceStr | undefined = undefined;
22  @Prop icons: ResourceStr[] = [
23    $r('sys.media.ohos_ic_public_device_phone'),
24    $r('sys.media.ohos_ic_public_device_pad'),
25    $r('sys.media.ohos_ic_public_device_smartscreen'),
26    $r('sys.media.ohos_ic_public_device_matebook'),
27    $r('sys.media.ohos_ic_public_device_watch'),
28    $r('sys.media.ohos_ic_public_device_soundx_filled'),
29  ];
30  @Prop isEnabled: boolean = false;
31  @Prop title: string = '';
32  onChange?: (color: ResourceStr, index: number) => void;
33
34  private equals(icon1: ResourceStr, icon2: ResourceStr) {
35    const type1 = typeof icon1;
36    const type2 = typeof icon2;
37    if (type1 !== type2) {
38      return false;
39    }
40
41    if (type1 === 'object') {
42      return (icon1 as Resource).id === (icon2 as Resource).id;
43    }
44
45    return icon1 === icon2;
46  }
47
48  build() {
49    Row({ space: 12 }) {
50      ForEach(this.icons, (icon: ResourceStr, index: number) => {
51        Button() {
52          Image(icon)
53            .size({ width: 24, height: 24 })
54            .fillColor(this.equals(icon, this.icon) ? $r('sys.color.ohos_id_color_emphasize') :
55            $r('sys.color.ohos_id_color_text_secondary'))
56            .animation({ curve: Curve.Sharp, duration: 150 })
57        }
58        .type(ButtonType.Circle)
59        .backgroundColor(Color.Transparent)
60        .width(32)
61        .height(32)
62        .onClick(() => {
63          this.onChange?.(icon, index);
64        })
65      })
66    }
67    .width('100%')
68    .grayscale(this.isEnabled ? 0 : 1)
69  }
70}
71
72@Preview
73@Component
74struct IconPalettePreview {
75  build() {
76    IconPalette({})
77  }
78}