import { TitleBarComponent } from '../view/TitleBarComponent';
import { CuteParams } from '@ohos/common/src/main/ets/viewmodel/ParamBean';
import { ImageUtils } from '@ohos/common/src/main/ets/utils/ImageUtils';
import { StickerItem } from '@ohos/common/src/main/ets/viewmodel/LocalBean';
import { ZoomView } from '../view/ZoomView';
import { ResizeStyle } from '../viewmodel/LocalBean';

@Builder
export function ResizeBuilder() {
  ResizeLayout()
}

/**
 * 改尺寸页面
 */
@Component
export struct ResizeLayout {
  @StorageProp('statusBarHeight') statusBarHeight: number = 0;
  @Consume('pageInfos') pageStack: NavPathStack;
  @State cuteParams: CuteParams | null = null;
  @State stickerItem: StickerItem | null = null;

  aboutToAppear(): void {
    ImageUtils.openGallery().then(item => {
      if (item) {
        this.stickerItem = item;
      }
    })
  }

  build() {
    NavDestination() {
      Column() {
        //标题栏
        TitleBarComponent({
          titleName: '改尺寸',
          isShowTitle: false,
          isShowBack: true,
          isShowSave: true,
          onSave: () => {
            ImageUtils.saveImageForID('resize_container')
          }
        })


        Stack(){
          Stack({alignContent:Alignment.Top}){
            if(this.stickerItem == null){
              Column(){
                Stack() {
                  Column(){
                    Image($r('app.media.ic_image_pld')).width(120).height(111.2)
                    Text('去相册选一张美照吧~').fontColor('#FFD8D8D8').fontSize(12)
                  }
                }
                .width('80%')
                .aspectRatio((this.cuteParams?.width??300) / (this.cuteParams?.height??420))//300/420
                .backgroundColor('#FFFFFFFF')
                .borderColor('#FFD8D8D8')
                .borderWidth(1)
                .onClick(() => {
                  ImageUtils.openGallery().then(item => {
                    if (item) {
                      this.stickerItem = item;
                    }
                  })
                })

                Text('将已有证件照尺寸进行修改，用于适配各种场景')
                  .fontSize(14)
                  .fontColor('#FFFFFFFF')
                  .width('90%')
                  .borderRadius(7)
                  .backgroundColor('#FFAAAAAA')
                  .margin({ top: 30 })
                  .padding({ left: 14, right: 14, top: 8, bottom: 8})
              }
            }else{
              Column() {
                Stack() {
                  Stack() {
                    ZoomView({item: this.stickerItem})
                      .width('100%')
                      .height('100%')
                  }
                  .backgroundColor('#FFFFFFFF')
                  .id('resize_container')
                  .width('80%')
                  .aspectRatio((this.cuteParams?.width??300) / (this.cuteParams?.height??420))
                  .clip(true)
                }
                .backgroundColor('#FFFFFFFF')
                .borderWidth(1)
                .borderColor('#FFD8D8D8')

                Text('将已有证件照尺寸进行修改，用于适配各种场景')
                  .fontSize(14)
                  .fontColor('#FFFFFFFF')
                  .width('90%')
                  .borderRadius(7)
                  .backgroundColor('#FFAAAAAA')
                  .margin({ top: 30 })
                  .padding({ left: 14, right: 14, top: 8, bottom: 8})
              }
            }
          }
          .width('100%')
          .height('100%')

          ResizeBar({
            onResizeChange: (resizeStyle: ResizeStyle) => {
              let name = resizeStyle.name
              let width = resizeStyle.width
              let height = resizeStyle.height
              if (this.cuteParams) {
                this.cuteParams.width = width;
                this.cuteParams.height = height;
              } else {
                this.cuteParams = { id: 0, name: name, width: width, height: height };
              }
            }
          })
        }
        .alignContent(Alignment.Bottom)
        .width('100%')
        .layoutWeight(1)
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#FFF4F4F4')
    }
    .hideTitleBar(true)
  }
}

@Component
struct ResizeBar {
  onResizeChange?: (resizeStyle: ResizeStyle) => void;
  @State indexSelected: number = 0;
  @State private resizeStyle: ResizeStyle[] = [
    { id: '1', name: '标准一寸', width:25,height:35 },
    { id: '2', name: '小一寸', width:22,height:32 },
    { id: '3', name: '标准二寸', width:35,height:53 },
    { id: '4', name: '小二寸', width:33,height:48 },
    { id: '5', name: '身份证', width:26,height:32 },
    { id: '6', name: '护照', width:33,height:48 },
    { id: '7', name: '驾驶证', width:22,height:32 },
    { id: '8', name: '社保卡', width:26,height:32 },
    { id: '9', name: '四六级', width:26,height:32 },
    { id: '10', name: '司法考试', width:33,height:48 },
    { id: '11', name: '结婚证', width:40,height:60 },
    { id: '12', name: '中国签证', width:35,height:45 }
  ];
  build() {
    Column() {
      Column() {
        Text('选择尺寸')
          .fontSize(16)
          .fontColor('#FF1A1A1A')
        Image($r('app.media.ic_title_indicator'))
          .width(32)
          .height(5)
      }
      .margin({ bottom:14 })

      Stack().width('100%').height(0.5)
        .margin({ bottom:12 })
        .backgroundColor('#FFEDEDED')

      Scroll(){
        Row(){
          ForEach(this.resizeStyle, (resizeStyle: ResizeStyle, index: number) => {
            Stack({ alignContent: Alignment.Bottom }) {
              Column()
                .width('100%')
                .height('100%')
                .linearGradient({
                  angle: 180, // 渐变方向：180度表示从上到下
                  colors: [
                    ['#FFF4F4F4', 0.0],   // 起始颜色：灰色，位置 0%
                    ['#00FFFFFF', 1.0]    // 结束颜色：白色透明，位置 100%
                  ]
                })
                .borderRadius(3.71)
                .borderColor('#FFEDEDED')
                .borderWidth(1)
              Stack(){
                Column(){
                  Text(resizeStyle.name)
                    .textAlign(TextAlign.Center)
                    .fontSize(12)
                    .fontColor('#FF1A1A1A')
                    .width('100%')
                    .height(16)

                  Text(resizeStyle.width + 'x' + resizeStyle.height + 'mm')
                    .textAlign(TextAlign.Center)
                    .fontSize(10)
                    .fontColor('#FFAAAAAA')
                    .width('100%')
                    .height(16)
                }
              }
              .width('100%')
              .height('100%')

            }
            .width(70)
            .height(60)
            .aspectRatio(70/60)
            .borderRadius(3.71)
            .borderColor(this.indexSelected == index? '#FFC2FF43' : '#00000000')
            .borderWidth(1.86)
            .margin({ left: index==0? 16 : 8, right: index == this.resizeStyle.length-1? 16 : 0})
            .onClick(()=>{
              this.indexSelected = index;

              this.onResizeChange?.(resizeStyle)
            })
          })
        }
      }
      .scrollable(ScrollDirection.Horizontal)
      .scrollBar(BarState.Off)
      .width('100%')
    }
    .backgroundColor('#FFFFFFFF')
    .borderRadius({ topLeft: 16, topRight: 16})
    .padding({top: 14, bottom: 30})

  }
}
