/*
 * 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 { HomePage } from './component/HomePage';
import { MultipleImageCallBack } from './component/MultipleImageCallBack';
import { LongImagePage } from './component/LongImagePage';
import { AppIcon } from './component/AppIcon'


@Entry
@Component
struct AppDemo {
  @State currentIndex: number = 0;
  private tabsController: TabsController = new TabsController();
  getResourceString(res:Resource){
    return getContext().resourceManager.getStringSync(res.id)
  }
  @Builder
  tabBarBuilder(title: string, targetIndex: number, selectedIcon: Resource, unselectIcon: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedIcon : unselectIcon)
        .width(24)
        .height(24)
      Text(title)
        .fontFamily('HarmonyHeiTi-Medium')
        .fontSize(10)
        .fontColor(this.currentIndex === targetIndex ? '#0A59F7' : 'rgba(0,0,0,0.60)')
        .textAlign(TextAlign.Center)
        .lineHeight(14)
        .fontWeight(500)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex;
      this.tabsController.changeIndex(targetIndex);
    })
  }

  build() {
    Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
      TabContent() {
        HomePage()
      }
      .tabBar(this.tabBarBuilder(this.getResourceString($r('app.string.App_Home')), 0, $r('app.media.ic_01_on'), $r('app.media.ic_01_off')))

      TabContent() {
        MultipleImageCallBack()
      }
      .tabBar(this.tabBarBuilder(this.getResourceString($r('app.string.App_recommend')), 1, $r('app.media.ic_02_on'), $r('app.media.ic_02_off')))

      TabContent() {
        LongImagePage()
      }
      .tabBar(this.tabBarBuilder(this.getResourceString($r('app.string.App_find')), 2, $r('app.media.ic_03_on'), $r('app.media.ic_03_off')))

      TabContent() {
        AppIcon()
      }.tabBar(this.tabBarBuilder(this.getResourceString($r('app.string.App_collect')), 3, $r('app.media.ic_04_on'), $r('app.media.ic_04_off')))
    }
    .vertical(false)
    .divider({
      strokeWidth: 0.5,
      color: '#0D182431'
    })
    .scrollable(false)
    .backgroundColor('#F1F3F5')
    .padding({ top: 22, bottom: 28 })
  }
}