import { TitleBarComponent } from '../view/TitleBarComponent';
import { FormatStyle } from '../viewmodel/LocalBean';
import { image } from '@kit.ImageKit';
import { ImageUtils } from '@ohos/common/src/main/ets/utils/ImageUtils';
import { promptAction } from '@kit.ArkUI';
import { ToastUtils } from '@ohos/common/src/main/ets/dialog/ToastUtils';

@Builder
export function FormatBuilder() {
  FormatLayout()
}

/**
 * 格式转换页面
 */
@Component
export struct FormatLayout {
  @StorageProp('statusBarHeight') statusBarHeight: number = 0;
  @Consume('pageInfos') pageStack: NavPathStack;
  @State processedPixelMap: image.PixelMap | null = null;
  @State formatStyle: FormatStyle | null = null;

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

  build() {
    NavDestination() {
      Column() {
        //标题栏
        TitleBarComponent({
          titleName: '格式转换',
          isShowTitle: false,
          isShowBack: true,
          isShowSave: true,
          onSave: () => {
            if(this.processedPixelMap){
              if(this.formatStyle?.type === 0 ){
                //jpeg
                ImageUtils.saveFormatToGallery(this.processedPixelMap, 'image/jpeg')
              }else if(this.formatStyle?.type === 1 ){
                //png
                ImageUtils.saveFormatToGallery(this.processedPixelMap, 'image/png')
              }else if(this.formatStyle?.type === 2 ){
                //gif
                ImageUtils.saveFormatToGallery(this.processedPixelMap, 'image/gif')
              }else if(this.formatStyle?.type === 3 ){
                ImageUtils.saveSvgToGallery(this.processedPixelMap)
              }
            }else{
              ToastUtils.normalToast({
                message: '请选择图片',      // 提示文字
                duration: 2000,           // 显示时长 (ms)，默认 1500
                bottom: '50%'
              });
            }
          }
        })

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

                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() {
                    Image(this.processedPixelMap)
                      .width('100%')
                      .height('100%')
                      .objectFit(ImageFit.Contain)
                  }
                  .backgroundColor('#FFFFFFFF')
                  .id('resize_container')
                  .width('80%')
                  .aspectRatio(300/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%')

          FormatBar({
            onFormatChange: (formatStyle: FormatStyle) => {
              this.formatStyle = formatStyle;
            }
          })
        }
        .alignContent(Alignment.Bottom)
        .width('100%')
        .layoutWeight(1)
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#FFF4F4F4')
    }
    .hideTitleBar(true)
  }
}


@Component
struct FormatBar {
  onFormatChange?: (formatStyle: FormatStyle) => void;
  @State indexSelected: number = 0;
  @State private formatStyle: FormatStyle[] = [
    { id: '1', name: 'JPG', type: 0 },
    { id: '2', name: 'PNG', type: 1 },
    { id: '3', name: 'GIF', type: 2 },
    { id: '4', name: 'SVG', type: 3 }
  ];
  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.formatStyle, (formatStyle: FormatStyle, index: number) => {
            Stack({ alignContent: Alignment.Bottom }) {
              Text(formatStyle.name)
                .textAlign(TextAlign.Center)
                .fontSize(12)
                .fontColor('#FF1A1A1A')
                .width('100%')
                .height(16)
            }
            .alignContent(Alignment.Center)
            .width(70)
            .height(34)
            .aspectRatio(70/34)
            .borderRadius(242)
            .borderColor(this.indexSelected == index? '#FF000000' : '#FFEDEDED')
            .borderWidth(1)
            .margin({ left: index==0? 16 : 8, right: index == this.formatStyle.length-1? 16 : 0})
            .onClick(()=>{
              this.indexSelected = index;

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

  }
}
