import { SetServerViewModel } from './SetServerViewModel';


@Entry({ routeName: 'SetServer1' })
@Component
struct SetServerPage {

  @State viewModel: SetServerViewModel = new SetServerViewModel();
  @State operation: string = ''
  appendOperationLog(info: string) {
    this.operation += `${info}\n`
  }

  aboutToAppear(): void {
    this.viewModel.savedServer.httpPort = '6000'
    this.viewModel.savedServer.httpsPort = '6443'
    this.appendOperationLog('aboutToAppear set 6xx');
  }

  onPageShow(): void {
    this.viewModel.enableSave = !this.viewModel.enableSave
    this.viewModel.savedServer.httpPort = '7000'
    this.viewModel.savedServer.httpsPort = '7443'
    this.appendOperationLog('aboutToAppear set 7xx with enableSave');
  }

  build() {
    Column() {
      Text(this.operation).width('100%').padding({left: 16, right: 16})

      Flex({
        justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center
      }) {
        Text('host').margin({ left: 20 }).maxLines(1).fontSize(15)

        TextInput({ text: this.viewModel.savedServer.host }).maxLines(1).textAlign(TextAlign.End).type(InputType.Normal)
          .backgroundColor(Color.White)
          .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20})
          .onChange((value) => {
            this.viewModel.savedServer.host = value;
          })
      }
      .width('100%')
      .margin({ top: 16 })
      .backgroundColor(0xfff000)
      .height(48)
      .backgroundColor(Color.White)

      Flex({
        justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center
      }) {
        Text('httpPort').margin({ left: 20 }).maxLines(1).fontSize(15)

        TextInput({ text: this.viewModel.savedServer.httpPort }).maxLines(1).textAlign(TextAlign.End).type(InputType.Number)
          .backgroundColor(Color.White)
          .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20})
          .onChange((value) => {
            this.viewModel.savedServer.httpPort = value;
          })
      }
      .width('100%')
      .margin({ top: 16 })
      .backgroundColor(0xfff000)
      .height(48)
      .backgroundColor(Color.White)

      Flex({
        justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center
      }) {
        Text('httpsPort').margin({ left: 20 }).maxLines(1).fontSize(15)

        TextInput({ text: this.viewModel.savedServer.httpsPort }).maxLines(1).textAlign(TextAlign.End).type(InputType.Number)
          .backgroundColor(Color.White)
          .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20})
          .onChange((value) => {
            this.viewModel.savedServer.httpsPort = value;
          })
      }
      .width('100%')
      .margin({ top: 16 })
      .backgroundColor(0xfff000)
      .height(48)
      .backgroundColor(Color.White)


      Button('8xx').margin({ top: 24 }).width('80%')
        .onClick(() => {
          this.viewModel.savedServer.httpPort = '8008'
          this.viewModel.savedServer.httpsPort = '8443'
          this.appendOperationLog('Button click set 8xx');
        })

      Button('9xx').margin({ top: 24 }).width('80%')
        .onClick(() => {
          this.viewModel.enableSave = !this.viewModel.enableSave;
          this.viewModel.savedServer.httpPort = '9000'
          this.viewModel.savedServer.httpsPort = '9443'
          this.appendOperationLog('Button click set 9xx with enableSave');
        })
    }.width('100%').height('100%').backgroundColor('#F4F5F6').justifyContent(FlexAlign.Center)
  }
}

@Component
struct InputItem {
  @State hint: string = ''
  @State inputText: string = ''
  @State inputType: InputType = InputType.Normal;
  onInputChanged?: (value: string) => void;

  build() {
    Flex({
      justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center
    }) {
      Text(this.hint).margin({ left: 20 }).maxLines(1).fontSize(15)

      TextInput({ text: this.inputText }).maxLines(1).textAlign(TextAlign.End).type(this.inputType)
        .backgroundColor(Color.White)
        .fontSize(15).flexGrow(1).layoutWeight(1).margin({ right: 20})
        .onChange((value) => {
          this.onInputChanged?.(value);
        })
    }
    .width('100%')
    .margin({ top: 16 })
    .backgroundColor(0xfff000)
    .height(48)
    .backgroundColor(Color.White)
  }
}