import CommonConstants from '../common/constants/CommonConstants'
import AssistantSet from '../model/AssistantSet'
import AssistantSetModel from '../model/database/AssistantSetModel'

@Component
export struct AssistantSetView {
  @State assistantSet: AssistantSet = null

  editTimbreDialogController: CustomDialogController = new CustomDialogController({
    builder: EditTimbreDialog({
      assistantSet: this.assistantSet
    }),
    alignment: DialogAlignment.Center,
    customStyle: true,
    autoCancel: true,
  })

  async aboutToAppear() {
    this.assistantSet = await AssistantSetModel.getByUserId(CommonConstants.USER_ID)
    console.log('testTag', JSON.stringify(this.assistantSet))
  }

  build() {
    Column() {
      Text('智汇助手')
        .fontColor($r('app.color.general_font_color'))
        .fontSize($r('app.float.set_card_font_size'))
        .fontWeight(FontWeight.Medium)
        .opacity(0.9)
      Row() {
        Row() {
          Column() {
            Text('语音唤醒')
              .fontColor($r('app.color.general_font_color'))
              .fontSize($r('app.float.set_card_font_size'))
              .fontWeight(FontWeight.Medium)
              .opacity(0.9)
            Text('说”小晶，小晶”唤醒智汇助手')
              .fontSize($r('app.float.robot_state_font_size'))
              .fontColor($r('app.color.general_font_color'))
              .fontWeight(FontWeight.Medium)
              .opacity(0.6)
          }
          .alignItems(HorizontalAlign.Start)

          Toggle({ type: ToggleType.Switch, isOn: this.assistantSet && this.assistantSet.voiceWakeUp === 1 ? true : false})
            .selectedColor('#007DFF')
            .switchPointColor('#FFFFFF')
            .onChange((isOn: boolean) => {
              if (isOn) {
                this.assistantSet.voiceWakeUp = 1
              } else {
                this.assistantSet.voiceWakeUp = 2
              }
              AssistantSetModel.updateAssistantSet(this.assistantSet)
            })
        }
        .borderRadius($r('app.float.general_border_radius'))
        .backgroundColor($r('app.color.general_card_background_color'))
        .width('32%')
        .height('17%')
        .justifyContent(FlexAlign.SpaceBetween)
        .padding({ left: '2%', right: '2%' })

        Row() {
          Column() {
            Text('音色')
              .fontColor($r('app.color.general_font_color'))
              .fontSize($r('app.float.set_card_font_size'))
              .fontWeight(FontWeight.Medium)
              .opacity(0.9)
            Text(this.assistantSet && this.assistantSet.timbre === 1 ? "男声" : "女声")
              .fontSize($r('app.float.robot_state_font_size'))
              .fontColor($r('app.color.general_font_color'))
              .fontWeight(FontWeight.Medium)
              .opacity(0.6)
          }
          .alignItems(HorizontalAlign.Start)

          Row() {
            Image($r('app.media.subscript'))
              .height($r('app.float.card_subscript_size'))
              .width($r('app.float.card_subscript_size'))
          }
          .alignItems(VerticalAlign.Center)
          .justifyContent(FlexAlign.End)
          .padding({ right: '4.5%', top: '25%' })
          .width('97%')
        }
        .onClick(() => {
          try {
            this.editTimbreDialogController.open()
          } catch (err) {
            this.editTimbreDialogController.close()
          }
        })
        .borderRadius($r('app.float.general_border_radius'))
        .backgroundColor($r('app.color.general_card_background_color'))
        .width('32%')
        .height('17%')
        .justifyContent(FlexAlign.Center)
        .padding({ left: '2%', right: '2%' })

        Row() {
          Column() {
            Text('免唤醒')
              .fontColor($r('app.color.general_font_color'))
              .fontSize($r('app.float.set_card_font_size'))
              .fontWeight(FontWeight.Medium)
              .opacity(0.9)
            Text('无需唤醒，可直接对话小晶')
              .fontSize($r('app.float.robot_state_font_size'))
              .fontColor($r('app.color.general_font_color'))
              .fontWeight(FontWeight.Medium)
              .opacity(0.6)
          }
          .alignItems(HorizontalAlign.Start)

          Toggle({ type: ToggleType.Switch, isOn: this.assistantSet && this.assistantSet.wakeFree === 1 ? true : false})
            .selectedColor('#007DFF')
            .switchPointColor('#FFFFFF')
            .onChange((isOn: boolean) => {
              if (isOn) {
                this.assistantSet.wakeFree = 1
              } else {
                this.assistantSet.wakeFree = 2
              }
              AssistantSetModel.updateAssistantSet(this.assistantSet)
            })
        }
        .borderRadius($r('app.float.general_border_radius'))
        .backgroundColor($r('app.color.general_card_background_color'))
        .width('32%')
        .height('17%')
        .justifyContent(FlexAlign.SpaceBetween)
        .padding({ left: '2%', right: '2%' })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')

      Row()
        .height('2%')
      Row() {
        Row() {
          Column() {
            Text('提示播报')
              .fontColor($r('app.color.general_font_color'))
              .fontSize($r('app.float.set_card_font_size'))
              .fontWeight(FontWeight.Medium)
              .opacity(0.9)
            Text('回馈信息同步进行语音播报')
              .fontSize($r('app.float.robot_state_font_size'))
              .fontColor($r('app.color.general_font_color'))
              .fontWeight(FontWeight.Medium)
              .opacity(0.6)
          }
          .alignItems(HorizontalAlign.Start)

          Toggle({ type: ToggleType.Switch, isOn: this.assistantSet && this.assistantSet.promptBroadcast === 1 ?true : false})
            .selectedColor('#007DFF')
            .switchPointColor('#FFFFFF')
            .onChange((isOn: boolean) => {
              if (isOn) {
                this.assistantSet.promptBroadcast = 1
              } else {
                this.assistantSet.promptBroadcast = 2
              }
              AssistantSetModel.updateAssistantSet(this.assistantSet)
            })
        }
        .borderRadius($r('app.float.general_border_radius'))
        .backgroundColor($r('app.color.general_card_background_color'))
        .width('32%')
        .height('17%')
        .justifyContent(FlexAlign.SpaceBetween)
        .padding({ left: '2%', right: '2%' })

        Row() {
          Column() {
            Row() {
              Text('语音音量')
                .fontColor($r('app.color.general_font_color'))
                .fontSize($r('app.float.set_card_font_size'))
                .fontWeight(FontWeight.Medium)
                .opacity(0.9)
            }
            .width('100%')
            .height('40%')
            .padding({ top: '4%' })

            Row() {
              Image($r('app.media.volume'))
                .width($r('app.float.volume_image_size'))
                .height($r('app.float.volume_image_size'))
              Text()
                .width('3%')
              Slider({value: this.assistantSet ? this.assistantSet.voiceVolume : 0, min: 0, max: 30, step: 1 })
                .layoutWeight(1)
                .onChange((value: number)=>{
                  this.assistantSet.voiceVolume = value
                  AssistantSetModel.updateAssistantSet(this.assistantSet)
                })
            }
            .justifyContent(FlexAlign.SpaceBetween)
            .layoutWeight(1)
          }
          .borderRadius($r('app.float.general_border_radius'))
          .backgroundColor($r('app.color.general_card_background_color'))
          .width('66%')
          .height('17%')
          .alignItems(HorizontalAlign.Start)
          .padding({ left: '2%', right: '2%' })
        }

      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
    }
    .alignItems(HorizontalAlign.Start)
    .width('100%')
  }
}

//弹窗组件
@CustomDialog
struct EditTimbreDialog {
  @Link assistantSet: AssistantSet
  controller: CustomDialogController
  cancel: () => void = () => { }
  confirm: () => void = () => { }

  build() {
    Column() {
      Row() {
        Text("音色")
          .margin(3)
          .fontSize(20)
          .textAlign(TextAlign.Center)
      }
      .height('17%')
      Scroll() {
        Row() {
          Row() {}
          .width('15%')
          Stack() {
            Image($r('app.media.female_voice'))
              .borderRadius($r('app.float.general_border_radius'))
              .objectFit(ImageFit.Fill)
              .onClick(() => {
                this.assistantSet.timbre = 2
                AssistantSetModel.updateAssistantSet(this.assistantSet)
                this.controller.close()
              })
            Radio({ value: 'radio0', group: 'voiceRadio' })
              .checked(this.assistantSet && this.assistantSet.timbre === 1 ? false : true)
              .width($r('app.float.general_icon_size'))
              .height($r('app.float.general_icon_size'))
              .margin(10)
              .onChange((isChecked: boolean) => {
                if (isChecked) {
                  this.assistantSet.timbre = 2
                  AssistantSetModel.updateAssistantSet(this.assistantSet)
                  this.controller.close()
                }
              })
          }
          .alignContent(Alignment.BottomEnd)
          .width('67%')
          .height('100%')
          Row() {}
          .width('5%')
          Stack() {
            Image($r('app.media.male_voice'))
              .borderRadius($r('app.float.general_border_radius'))
              .objectFit(ImageFit.Fill)
              .onClick(() => {
                this.assistantSet.timbre = 1
                AssistantSetModel.updateAssistantSet(this.assistantSet)
                this.controller.close()
              })
            Radio({ value: 'radio1', group: 'voiceRadio' })
              .checked(this.assistantSet && this.assistantSet.timbre === 1 ? true : false)
              .width($r('app.float.general_icon_size'))
              .height($r('app.float.general_icon_size'))
              .margin(10)
              .onChange((isChecked: boolean) => {
                if (isChecked) {
                  this.assistantSet.timbre = 1
                  AssistantSetModel.updateAssistantSet(this.assistantSet)
                  this.controller.close()
                }
              })
          }
          .alignContent(Alignment.BottomEnd)
          .width('67%')
          .height('100%')
          Row() {}
          .width('15%')
        }
        .alignItems(VerticalAlign.Top)
        .justifyContent(FlexAlign.SpaceEvenly)
        .height('100%')
      }
      .scrollable(ScrollDirection.Horizontal)
      .scrollBar(BarState.Off)
      .height('67%')
    }
    .width('48%')
    .height('62%')
    .backgroundColor($r('app.color.page_general_background'))
    .borderRadius($r('app.float.general_border_radius'))
  }
}