import { RouterUrls } from '../../../../common/RouterUrls'
import { ToolMenuEntity, toolsList } from '../../../../entity/ToolMenuEntity'
import { ToolItemView } from '../../../../view/ToolItemView'

@ComponentV2
export struct ToolsPage {
  build() {
    Scroll() {
      Column() {
        Image($r('app.media.ic_tools_top_bg')).width('100%').aspectRatio(2.925)

        Grid() {
          ForEach(toolsList().convertToArray(), (item: ToolMenuEntity) => {
            GridItem() {
              ToolItemView({ menu: item })
            }
            .onClick(() => {
              switch (item.alias) {
                case 'resetMD5': {
                  this.getUIContext().getRouter().pushUrl({url: RouterUrls.MD5_RESET_PAGE})
                  break
                }
                case 'videoToText': {
                  this.getUIContext().getRouter().pushUrl({url: RouterUrls.VIDEO_TO_TEXT_PAGE})
                  break
                }
                case 'videoToAudio': {
                  this.getUIContext().getRouter().pushUrl({url: RouterUrls.VIDEO_TO_AUDIO_PAGE})
                  break
                }
                case 'audioToText': {
                  this.getUIContext().getRouter().pushUrl({url: RouterUrls.AUDIO_TO_TEXT_PAGE})
                  break
                }
                case 'addWatermark': {
                  this.getUIContext().getRouter().pushUrl({url: RouterUrls.ADD_WATERMARK_PAGE})
                  break
                }
                case 'longImageMerge': {
                  this.getUIContext().getRouter().pushUrl({url: RouterUrls.IMAGE_MERGE_PAGE})
                  break
                }
                case 'removeWatermark': {
                  this.getUIContext().getRouter().pushUrl({url: RouterUrls.REMOVE_WATERMARK_PAGE})
                  break
                }
                case 'removeAudio': {
                  this.getUIContext().getRouter().pushUrl({url: RouterUrls.REMOVE_AUDIO_PAGE})
                  break
                }
              }
            })
          })
        }
        .scrollBar(BarState.Off)
        .columnsTemplate('1fr 1fr')
        .rowsGap(9)
        .columnsGap(9)
        .margin({top: 20})
      }
      .width('100%')
      .height('auto')
      .padding({ left: 12, top: 70, right: 12, bottom: 10 })
    }
    .height('100%')
    .scrollBar(BarState.Off)
    .backgroundColor($r('app.color.window_background'))
  }
}