import { BreakpointSystem, DateTimeUtils, PermissionUtil } from 'wdKit'
import { PrivacySettingModel } from '../../model/PrivacySettingModel'
import { Params } from 'wdBean';
import { WDRouterPage, WDRouterRule } from 'wdRouter';
import { HttpUtils } from 'wdNetwork/Index';
import { TrackingPageBrowse, TrackConstants, TrackingButton } from 'wdTracking/Index';
import { TitleBackComponent } from '../setting/TitleBackComponent';

const TAG = 'PrivacySettingPage';
const DiyString = '开启个性化推荐'
const DiyCloseTipsString = '关闭后，将不会使用你的偏好进行内容推荐'

@Entry
@Component
export struct PrivacySettingPage {
  @State listData: Array<PrivacySettingModel> = [new PrivacySettingModel(DiyString, false, 'ohos.permission.READ_MEDIA'), new PrivacySettingModel('相册权限', false, 'ohos.permission.READ_MEDIA'), new PrivacySettingModel('相机权限', false, 'ohos.permission.CAMERA'), new PrivacySettingModel('定位权限', false, 'ohos.permission.APPROXIMATELY_LOCATION'), new PrivacySettingModel('麦克风权限', false, 'ohos.permission.MICROPHONE')];
  tips: string = '设置前可查阅'
  privacyTips: string = '《隐私政策》'
  tipsEnd = '中相应权限使用规则'
  pageShowTime:number = 0;
  pageHideTime:number = 0;
  @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
  private breakpointSystem = new BreakpointSystem();
  @State percent:number = 1
  @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0

  currentChanged(){
    if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){
      this.percent = 0.7
    }else {
      this.percent = 1
    }
  }

  onPageShow(): void {
    this.getPermissionStatus();
    this.pageShowTime = DateTimeUtils.getTimeStamp()
  }

  onPageHide(): void {
    this.pageHideTime = DateTimeUtils.getTimeStamp()
    let duration = 0
    duration = Math.floor((this.pageHideTime - this.pageShowTime)/1000)
    TrackingPageBrowse.trackCommonPageExposureEnd(TrackConstants.PageName.Privacy_Setting,TrackConstants.PageName.Privacy_Setting,duration)
  }

  aboutToAppear() {
    this.breakpointSystem.register();
    this.currentChanged()
    if (!HttpUtils.getUserId()) {
      this.listData.splice(0, 1);
    }
    // 获取权限=
    // SPHelper.default.save('sdf','sdf');
    // this.initListData();
    this.getPermissionStatus();
    // RefreshStatus;

  }

  aboutToDisappear(): void {
    this.breakpointSystem.unregister();
  }

  async getPermissionStatus() {
    const permissionUtil = new PermissionUtil();
    for (const element of this.listData) {
      if (element.privacyName == DiyString) {
        element.queryUserDetail();
        // element.permission = true;
        continue;
      }
      const result = await permissionUtil.checkPermissions(element.permissionKey);
      element.permission = result;
    }
  }

  build() {
    Column(){
      Column(){
        TitleBackComponent({title:"隐私设置"})

        //滑动区域
        this.PrivacySettingComponentsUI()
      }.backgroundColor('#F8F8F8')
      .width("100%")
      .height("100%")
    }.width("100%")
    .height("100%")
    .padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})

  }

  @Builder PrivacySettingComponentsUI() {
    Column() {

      List({ space: `${this.calcHeight(23)}lpx` }) {
        ForEach(this.listData, (item: PrivacySettingModel, index:number) => {
          ListItem() {
            if (item.privacyName == DiyString) {
              getTuiJianCell({ item:item, index:index ,percent:$percent});
            } else {
              getArrowCell({ item:item, index:index ,percent:$percent});
            }
          }.onClick(() => {
            if (item.privacyName == DiyString) {
              trackButtonClick("privacySettingPagePersonalizedRecommendations")
              return
            }
            if(item.privacyName == "相册权限"){
              trackButtonClick("privacySettingPageAlbumPermissions")
            }else if(item.privacyName == "相机权限"){
              trackButtonClick("privacySettingPageCameraPermissions")
            }else if(item.privacyName == "定位权限"){
              trackButtonClick("privacySettingPageLocationPermissions")
            }else if(item.privacyName == "麦克风权限"){
              trackButtonClick("privacySettingPageMicrophonePermissions")
            }

            if (!item.permission) {
              //跳转权限设置
              const permissionUtil = new PermissionUtil();
              PermissionUtil.reqPermissionsFromUser([item.permissionKey], this).then((res)=>{
                item.permission = res;
              });
            }else{
              PermissionUtil.openPermissionsInSystemSettings(this);
            }
          })
        })
      }.width('100%')
      .padding({ left: `${this.calcHeight(29)}lpx`, right: `${this.calcHeight(29)}lpx` })
      .margin({ top: `${this.calcHeight(38)}lpx` })
      

      Row() {
        Text(this.tips)
          .fontSize(`${this.calcHeight(25)}lpx`)
          .textAlign(TextAlign.Start)
          .fontColor($r("app.color.color_666666"))
          .margin({ left: `${this.calcHeight(29)}lpx`, top: `${this.calcHeight(46)}lpx` })
        // .backgroundColor(Color.Orange)
        Text(this.privacyTips)
          .fontSize(`${this.calcHeight(25)}lpx`)
          .textAlign(TextAlign.Start)
          .fontColor('#ED2800')
          .margin({ top: `${this.calcHeight(46)}lpx` })
          .onClick(() => {
            //跳转隐私政策
            let bean={contentID:"2",pageID:""} as Params
            WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage,bean)
          })
        Text(this.tipsEnd)
          .fontSize(`${this.calcHeight(25)}lpx`)
          .textAlign(TextAlign.Start)
          .fontColor($r("app.color.color_666666"))
          .margin({ top: `${this.calcHeight(46)}lpx` })
      }

    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F8F8F8')
    .alignItems(HorizontalAlign.Start)
  }

  calcHeight(value:number): number{
    return value * this.percent
  }
}


@Component
struct getArrowCell {
  @ObjectLink item: PrivacySettingModel;
  index:number = 0;
  @Link percent:number
  // 右文字+箭头cell
  // @Builder getArrowCell(item:PrivacySettingModel, index) {
  build() {
    Row() {
      // 左侧标题
      Text(this.item.privacyName)
        .fontColor('#666666')
        .fontSize(`${this.calcHeight(31)}lpx`)

      Row() {
        Text(this.item.permission ? '已开启' : '去设置')
          .fontColor(this.item.permission ? '#666666' : '#CCCCCC')
          .fontSize(`${this.calcHeight(31)}lpx`)
          .margin({ right: `${this.calcHeight(8)}lpx` })

        Image($r('app.media.mine_user_arrow'))
          .width(`${this.calcHeight(27)}lpx`)
          .height(`${this.calcHeight(27)}lpx`)
          .objectFit(ImageFit.Auto)
      }

    }
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.SpaceBetween)
    .height(`${this.calcHeight(97)}lpx`)
    .width('100%')
    .padding({ left: `${this.calcHeight(29)}lpx`, right: `${this.calcHeight(29)}lpx` })
    .backgroundColor('#FFFFFF')
    .borderRadius(`${this.calcHeight(8)}lpx`)
  }

  calcHeight(value:number): number{
    return value * this.percent
  }
}

@Component
struct getTuiJianCell {
  @ObjectLink item: PrivacySettingModel;
  index:number = 0;
  @Link percent:number
  build() {
    Column() {

      Row() {
        // 左侧标题
        Text(this.item.privacyName)
          .fontColor('#666666')
          .fontSize(`${this.calcHeight(31)}lpx`)

        Row() {
          Toggle({ type: ToggleType.Switch, isOn: this.item.permission })
            .height(`${this.calcHeight(58)}lpx`)
            .width(`${this.calcHeight(96)}lpx`)
              .selectedColor('#ED2700')
            .onChange((isOn: boolean) => {
              // this.privacySwitch = isOn;
              this.item.editUserDetail(isOn?'1':'0');
            })
        }

      }
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.SpaceBetween)
      .height(`${this.calcHeight(97)}lpx`)
      .width('100%')


      Blank()
        .backgroundColor('#EDEDED')
        .height(`${this.calcHeight(1)}lpx`)

      Text(DiyCloseTipsString)
        .fontColor('#999999')
        .fontSize(`${this.calcHeight(23)}lpx`)
        .margin({ right: `${this.calcHeight(8)}lpx` })
        .height(`${this.calcHeight(69)}lpx`)

    }.width('100%')
    .alignItems(HorizontalAlign.Start)
    .backgroundColor('#FFFFFF')
    .borderRadius(`${this.calcHeight(8)}lpx`)
    .padding({ left: `${this.calcHeight(29)}lpx`, right: `${this.calcHeight(29)}lpx` })
  }

  calcHeight(value:number): number{
    return value * this.percent
  }
}

function trackButtonClick(buttonName: string){
  TrackingButton.click(buttonName, TrackConstants.PageName.Privacy_Setting, TrackConstants.PageName.Privacy_Setting)
}