/*
 * Copyright (C) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the 'License');
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an 'AS IS' BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { CommonDataSource } from "../model/CommonDataSource"
import { mapData, MAP_DATA_KEYS } from "../model/ImageUrlData"
import { ImageKnifeComponent } from '@ohos/imageknife'
import deviceInfo from '@ohos.deviceInfo'
import { systemDateTime } from "@kit.BasicServicesKit"

@Component
export struct AppIcon {
  private columnCounts = "1fr 1fr";
  @State hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
  aboutToAppear(): void {
    if (deviceInfo.deviceType == "tablet") {
      this.columnCounts = "1fr 1fr 1fr";
    }
    this.hotCommendList.addData(this.hotCommendList.totalCount(), MAP_DATA_KEYS)
  }

  build() {
    Column() {
      WaterFlow() {
        LazyForEach(this.hotCommendList, (key: string,index:number)=>{
          FlowItem() {
            AppListItem({
              url:mapData[key],
              appName:key
            })
          }
        }, (key: string) => key)
      }.columnsTemplate(this.columnCounts)
      .width("100%").height("100%")
    }
  }
}

@Reusable
@Component
struct AppListItem {
  @State appName: string = ""
  @State url: string = ""
  @State description: string = ""
  @State loadStart: number = 0
  aboutToReuse(params: ESObject): void {
    this.url = params.url
    this.appName = params.appName
  }

  build() {
    Row() {
      ImageKnifeComponent({
        imageKnifeOption: {
          loadSrc: this.url,
          placeholderSrc: $r("app.media.loading"),
          errorholderSrc: $r("app.media.failed"),
          border:{radius:10},
          onLoadListener: {
            onLoadStart: (imageInfo) => {
              this.loadStart = Math.floor(systemDateTime.getTime(true) / 1000)
            },
            onLoadSuccess:()=>{
              this.description = "加载耗时:" + ((Math.floor(systemDateTime.getTime(true) / 1000) - this.loadStart) / 1000) + 'ms';

            }
          }
        }
      }).width(48).height(48)
        .margin({left:12, right:12})

      Column() {
        Text(this.appName)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .textOverflow({overflow:TextOverflow.Ellipsis})
          .layoutWeight(1)

        Text(this.description)
          .fontSize(12)
          .fontColor(Color.Gray)
          .textOverflow({overflow:TextOverflow.Ellipsis})
      }
      .height(48)
      .flexGrow(1)
      .alignItems(HorizontalAlign.Start)
      .margin({right:10})
    }
    .width('100%')
    .height(60)
    .alignItems(VerticalAlign.Center)
  }
}