/*
 * Copyright (C) 2024 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 { ImageKnifeComponent } from '@ohos/libraryimageknife';
import { display } from '@kit.ArkUI';
import { PageViewModel } from './model/PageViewModel';

@Entry
@Component
struct AutoImageFit {
  @State imageWidth: number = 200;
  private maxWidth: number = px2vp(display.getDefaultDisplaySync().width);

  build() {

    Column() {
      this.Slider()
      Column() {
        Text('Image')
        Image(PageViewModel.getMenus()[3])
          .width('100%')
          .objectFit(ImageFit.Auto)
        Text('ImageKnife')
        ImageKnifeComponent({
          imageKnifeOption: {
            loadSrc: PageViewModel.getMenus()[3],
            objectFit: ImageFit.Auto,
          }
        }).width('100%')
      }.width(this.imageWidth).border({ width: 1 })
    }
  }

  @Builder
  Slider() {
    Slider({
      value: this.imageWidth,
      min: 100,
      max: this.maxWidth,
      style: SliderStyle.OutSet
    })
      .blockColor(Color.White)
      .width('100%')
      .onChange((value: number) => {
        this.imageWidth = value;
      })
  }
}