import { DocInfoModule, IDocViewEvent } from './DocInfoModule';
import { MoreConstants } from '../../more/MoreMenuConstants';
import { DeviceType } from '../../../common/Constants';
import { router } from '@kit.ArkUI';

@Entry({ routeName: 'SecurityInfoView' })
@Component
export struct SecurityInfoView {

  private scroller: Scroller = new Scroller();
  private mDocInfoModule: DocInfoModule | undefined = AppStorage.get<DocInfoModule>(MoreConstants.SP_KEY_DOC_INFO_PARAM);
  //for pad
  private dialogController_ext?: CustomDialogController
  @State leftOffset: number = 0;
  @State rightOffset: number = 0;

  private updateSafeArea(leftOffset: number, rightOffset: number): void {
    this.leftOffset = leftOffset;
    this.rightOffset = rightOffset;
  }

  aboutToAppear(): void {
    if (this.mDocInfoModule) {
      this.mDocInfoModule.registerDocViewEvent(this.docView);
    }
  }

  aboutToDisappear(): void {
    if (this.mDocInfoModule) {
      this.mDocInfoModule.unregisterDocViewEvent(this.docView);
    }
  }

  private docView: IDocViewEvent = {
    updateSafeArea: (leftOffset: number, rightOffset: number): void => {
      this.updateSafeArea(leftOffset, rightOffset);
    },
    onTriggerDismissMenu: (): void => {
      this.closePage();
    }
  }

  @Builder
  infoItem(title: Resource, content: string | Resource) {
    Row(){
      Text(title)
        .fontSize($r('app.float.ux_text_size_16fp'))
        .fontColor($r('app.color.t4'))
        .align(Alignment.Start)
      Blank()
      Text(content)
        .fontSize($r('app.float.ux_text_size_16fp'))
        .fontColor($r('app.color.t4'))
        .align(Alignment.End)
    }
    .width('100%')
    .height('48vp')
  }

  @Builder
  NavigationBuilder() {
    Row() {
      Image($r('app.media.more_menu_left'))
        .objectFit(ImageFit.Contain)
        .width('24vp')
        .height('24vp')
        .margin({ left: $r('app.float.ux_margin_16vp') })
        .align(Alignment.Center)
        .interpolation(ImageInterpolation.High)
        .onClick(() => {
         this.closePage();
        })
      Text($r('app.string.menu_more_permission'))
        .fontSize($r('app.float.ux_text_size_20fp'))
        .fontColor($r('app.color.t4'))
        .align(Alignment.Start)
        .textAlign(TextAlign.Start)
        .margin({ left: $r('app.float.ux_margin_16vp') })
    }
    .borderRadius(DeviceType.IS_PHONE ? 0 : { topLeft: 24, topRight: 24 })
    .width('100%')
    .height('56vp')
    .backgroundColor('#F4F4F4')
  }

  private closePage():void {
    if (DeviceType.IS_PHONE) {
      router.back()
    } else {
      this.dialogController_ext?.close();
    }
  }

  build() {
      Column() {
        Column() {
            this.NavigationBuilder();
            Scroll(this.scroller) {
              Column() {
                this.infoItem($r('app.string.rv_doc_info_permission_print'), this.mDocInfoModule?.getView()?.canPrint()!)
                this.infoItem($r('app.string.rv_doc_info_permission_fillform'), this.mDocInfoModule?.getView()?.canFillForm()!)
                this.infoItem($r('app.string.rv_doc_info_permission_assemble'), this.mDocInfoModule?.getView()?.canAssemble()!)
                this.infoItem($r('app.string.rv_doc_info_permission_annotform'), this.mDocInfoModule?.getView()?.canAddAnnot()!)
                this.infoItem($r('app.string.rv_doc_info_permission_modify'),
                  this.mDocInfoModule?.getView()?.canModifyContents()!)
                this.infoItem($r('app.string.rv_doc_info_permission_extractaccess'),
                  this.mDocInfoModule?.getView()?.canCopyForAssess()!)
                this.infoItem($r('app.string.rv_doc_info_permission_extract'), this.mDocInfoModule?.getView()?.canCopy()!)
              }
              .width('100%')
              .padding({left:$r('app.float.ux_margin_24vp'), right: $r('app.float.ux_margin_24vp')})
              .height('96%')
            }
            .backgroundColor(Color.White)
            .padding( {left:this.leftOffset, right: this.rightOffset, bottom: '20vp'})
            .borderRadius({ bottomLeft: DeviceType.IS_PHONE ? 0 : 24, bottomRight: DeviceType.IS_PHONE ? 0 : 24})
        }
        .height('100%')
        .width('100%')
        .backgroundColor(Color.White)
        .borderRadius(DeviceType.IS_PHONE ? 0 : 24)
        .padding( {bottom: '20vp'})
      }
      .width('100%')
      .height('100%')
      .borderRadius(DeviceType.IS_PHONE ? 0 : 24)
      //.backgroundColor(DeviceType.IS_PAD ? $r('app.color.fx_color_translucent') : $r('app.color.theme'))
      //.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
  }
}