import { TitleBarComponent } from '../view/TitleBarComponent';
import { ToastDeleteUtils } from '@ohos/common/src/main/ets/dialog/ToastDeleteUtils';
import { ToastUtils } from '@ohos/common/src/main/ets/dialog/ToastUtils';
import { MainService } from '../viewmodel/MainService';
import { routerLogin } from '@ohos/common/src/main/ets/router/RouterManager';

@Builder
export function DeleteAccountBuilder() {
  DeleteAccountLayout()
}

/**
 * 注销页面
 */
@Component
export struct DeleteAccountLayout {
  @StorageProp('statusBarHeight') statusBarHeight: number = 0;
  @Consume('pageInfos') pageStack: NavPathStack;

  @State isRightsChecked: boolean = false;
  onRightsChange: (checked: boolean) => void = () => {};

  @State isDisputeChecked: boolean = false;
  onDisputeChange: (checked: boolean) => void = () => {};

  @State isMyselfChecked: boolean = false;
  onMyselfChange: (checked: boolean) => void = () => {};

  @State isRecoverChecked: boolean = false;
  onRecoverChange: (checked: boolean) => void = () => {};

  @State textCopyValue: string = '';
  @State textOriginalValue: string = '我自愿注销本账号';

  build() {
    NavDestination() {
      Stack() {
        Column() {
          //标题栏
          TitleBarComponent({titleName:'注销账号', isShowTitle:true, isShowBack:true})

          Scroll(){
            Column(){
              Image($r('app.media.ic_warning'))
                .width('56vp')
                .height('56vp')
                .margin({ top: 28 })
                .align(Alignment.Center)

              Text('为保证你的账号安全，在你提交的注销申请生效前，需要同时满足以下条件：')
                .fontSize(16)
                .fontColor('#FF3D3D3D')
                .textAlign(TextAlign.Start)
                .borderRadius(12)
                .fontWeight(1)
                .margin({ top: 16 })

              Column() {
                //Item 1
                Row() {
                  Text('1.放弃当前的VIP权益')
                    .fontSize(16)
                    .fontColor('#FF1A1A1A')
                    .textAlign(TextAlign.Start)
                    .borderRadius(12)
                    .fontWeight(1)
                    .align(Alignment.Center)
                    .layoutWeight(1)

                  Image(this.isRightsChecked ?
                    $r('app.media.ic_tick_circle_selected') : // 选中的图片资源
                    $r('app.media.ic_tick_circle_normal') // 未选中的图片资源
                  )
                    .width(20)
                    .height(20)
                    .margin({ left: 8})
                    .objectFit(ImageFit.Contain)
                    .onClick(() => {
                      this.isRightsChecked = !this.isRightsChecked;
                      this.onRightsChange(this.isRightsChecked);
                    })
                    // 可选：添加点击时的缩放动画，增加反馈感
                    .animation({ duration: 200, curve: Curve.EaseInOut })

                }
                .width('100%')
                .padding({ top:10 , left: 14, right: 14})

                Text('当前充值的VIP我们不会退款，请解除你的自动续费（如果有），同意请打勾')
                  .fontSize(13)
                  .fontColor('#FF767676')
                  .textAlign(TextAlign.Start)
                  .fontWeight(1)
                  .align(Alignment.Start)
                  .margin({ top:10 , left: 16, right: 38})

                //Item 2
                Row() {
                  Text('2.当前账号没有违规及其他的法律纠纷')
                    .fontSize(16)
                    .fontColor('#FF1A1A1A')
                    .textAlign(TextAlign.Start)
                    .borderRadius(12)
                    .fontWeight(1)
                    .align(Alignment.Center)
                    .layoutWeight(1)

                  Image(this.isDisputeChecked ?
                    $r('app.media.ic_tick_circle_selected') : // 选中的图片资源
                    $r('app.media.ic_tick_circle_normal') // 未选中的图片资源
                  )
                    .width(20)
                    .height(20)
                    .margin({ left: 8})
                    .objectFit(ImageFit.Contain)
                    .onClick(() => {
                      this.isDisputeChecked = !this.isDisputeChecked;
                      this.onDisputeChange(this.isDisputeChecked);
                    })
                    // 可选：添加点击时的缩放动画，增加反馈感
                    .animation({ duration: 200, curve: Curve.EaseInOut })
                }
                .width('100%')
                .padding({ top:10 , left: 14, right: 14})

                Text('同意请打勾')
                  .fontSize(13)
                  .fontColor('#FF767676')
                  .textAlign(TextAlign.Start)
                  .fontWeight(1)
                  .margin({ top:10 , left: 16, right: 38})

                //Item 3
                Row() {
                  Text('3.确认是账号本人进行注销操作，自愿承担后果')
                    .fontSize(16)
                    .fontColor('#FF1A1A1A')
                    .textAlign(TextAlign.Start)
                    .borderRadius(12)
                    .fontWeight(1)
                    .align(Alignment.Center)
                    .layoutWeight(1)

                  Image(this.isMyselfChecked ?
                    $r('app.media.ic_tick_circle_selected') : // 选中的图片资源
                    $r('app.media.ic_tick_circle_normal') // 未选中的图片资源
                  )
                    .width(20)
                    .height(20)
                    .margin({ left: 8})
                    .objectFit(ImageFit.Contain)
                    .onClick(() => {
                      this.isMyselfChecked = !this.isMyselfChecked;
                      this.onMyselfChange(this.isMyselfChecked);
                    })
                    // 可选：添加点击时的缩放动画，增加反馈感
                    .animation({ duration: 200, curve: Curve.EaseInOut })
                }
                .width('100%')
                .padding({ top:10 , left: 14, right: 14})

                Text('同意请打勾')
                  .fontSize(13)
                  .fontColor('#FF767676')
                  .textAlign(TextAlign.Start)
                  .fontWeight(1)
                  .margin({ top:10 , left: 16, right: 38})

                //Item 4
                Row() {
                  Text('4.账号注销后账号不可登录，不可恢复')
                    .fontSize(16)
                    .fontColor('#FF1A1A1A')
                    .textAlign(TextAlign.Start)
                    .borderRadius(12)
                    .fontWeight(1)
                    .align(Alignment.Center)
                    .layoutWeight(1)

                  Image(this.isRecoverChecked ?
                    $r('app.media.ic_tick_circle_selected') : // 选中的图片资源
                    $r('app.media.ic_tick_circle_normal') // 未选中的图片资源
                  )
                    .width(20)
                    .height(20)
                    .margin({ left: 8})
                    .objectFit(ImageFit.Contain)
                    .onClick(() => {
                      this.isRecoverChecked = !this.isRecoverChecked;
                      this.onRecoverChange(this.isRecoverChecked);
                    })
                    // 可选：添加点击时的缩放动画，增加反馈感
                    .animation({ duration: 200, curve: Curve.EaseInOut })
                }
                .width('100%')
                .padding({ top:10 , left: 14, right: 14})

                Text('同意请打勾')
                  .fontSize(13)
                  .fontColor('#FF767676')
                  .textAlign(TextAlign.Start)
                  .fontWeight(1)
                  .margin({ top:10 , left: 16, right: 38})

                //Item 5
                Row() {
                  Text('5.请在输入框中输入以下文字')
                    .fontSize(16)
                    .fontColor('#FF1A1A1A')
                    .textAlign(TextAlign.Start)
                    .borderRadius(12)
                    .fontWeight(1)
                    .align(Alignment.Center)
                    .layoutWeight(1)
                }
                .width('100%')
                .padding({ top:10 , left: 14, right: 14})

                Text('我自愿注销本账号')
                  .fontSize(13)
                  .fontColor('#FFF64545')
                  .textAlign(TextAlign.Start)
                  .fontWeight(1)
                  .margin({ top:10 , left: 16, right: 38})

                Stack({ alignContent: Alignment.BottomEnd }) {
                  TextInput({ placeholder: '', text: this.textCopyValue })
                    .width('100%')
                    .backgroundColor('#FFF6F6F6')
                    .borderRadius(12)
                    .maxLength(20)
                    .borderColor('#FFDEDEDE')
                    .borderWidth(0.5)
                    .onChange((v) => this.textCopyValue = v)
                }
                .padding({ left: 16, right: 16, top: 12, bottom: 12})
              }
              .alignItems(HorizontalAlign.Start)
              .backgroundColor(Color.White)
              .width('100%')
              .borderRadius(8)
              .margin({ top: 30, bottom: 50})
              .padding({ top: 6, bottom: 6})

              Button('确认注销')
                .onClick(() => {
                  (this.isRightsChecked && this.isDisputeChecked && this.isMyselfChecked && this.isRecoverChecked && this.textCopyValue == this.textOriginalValue)?
                    // 确认注销
                    MainService.deleteAccount({
                      onSuccess: (_) => {
                        ToastDeleteUtils.showDeleteToast(this.getUIContext(), 5000)
                        routerLogin('deleteAccount', true)
                      },
                      onFailure: (message) => {
                        ToastUtils.showToast(this.getUIContext(), '注销失败！');
                      },
                      onError: () => {
                        ToastUtils.showToast(this.getUIContext(), '出错啦~');
                      }
                    })
                  :
                    ToastUtils.showToast(this.getUIContext(), '请确认注销信息')

                })
                .backgroundColor(
                  (this.isRightsChecked && this.isDisputeChecked && this.isMyselfChecked && this.isRecoverChecked && this.textCopyValue == this.textOriginalValue)
                    ? '#FFFF4F4F' // 红色 (激活状态)
                    : '#4dff4f4f'    // 灰色 (禁用状态)
                )
                .fontColor(Color.White)
                .height(44)
                .width('90%')
            }
            .padding({ left: 16, right: 16})
          }
          .scrollBar(BarState.Off)
        }
        .width('100%')
        .height('100%')
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#FFF9F9F9')
    }
    .hideTitleBar(true)
  }
}


