import { YTAvoid, yTRouter } from 'basic'
import { LoginCollect } from 'basic/src/main/ets/models/LoginCollect'
import { RegisterOrResetPassComp } from '../views/RegisterOrResetPassView'
import { LoginView } from '../views/LoginView'

// import { OtherLoginMethods } from '../views/OtherLoginMethods'


@Builder
function LoginBuilder() {
  NavDestination() {
    LoginPage()
  }
  .hideTitleBar(true)
}

@Component
struct LoginPage {
  @StorageProp(YTAvoid.SAFE_TOP_KEY) private safeTop: number = 0
  @StorageProp(YTAvoid.SAFE_BOTTOM_KEY) private safeBottom: number = 0
  @State private tabBarIndex: number = 0
  private tabController: TabsController = new TabsController()

  aboutToAppear(): void {

  }

  build() {
    Column() {
      Column() {
        Column() {
          Text('跳过')
            .fontSize(12)
            .fontWeight(400)
            .alignSelf(ItemAlign.End)
            .textAlign(TextAlign.Center)
            .fontColor($r('[basic].color.main_ac_color_light'))
            .onClick(() => {
              yTRouter.routerBack()
            })
            .height(24)
            .width(48)
            .borderRadius(12)
            .backgroundColor('#4DFFFFFF')
            .margin({ bottom: 24, right: 28, top: 20 })
          Text('你好，\n欢迎来到盒小仓')
            .lineHeight(40)
            .fontSize(28)
            .fontWeight(600)
            .fontColor($r('[basic].color.main_ac_color_dark'))
        }
        .padding({ left: 16, })
        .height(193)
        .width('100%')
        .alignItems(HorizontalAlign.Start)

        Row() {
          Text('注册')
            .fontSize(16)
            .fontWeight(600)
            .layoutWeight(1)
            .fontColor(this.tabBarIndex == 0 || this.tabBarIndex == 2 ? '#FF141111' : '#80141111')
            .backgroundColor(this.tabBarIndex == 0 || this.tabBarIndex == 2 ? Color.White : Color.Transparent)
            .textAlign(TextAlign.Center)
            .height(48)
            .borderRadius({ topLeft: 12, topRight: 12, bottomRight: this.tabBarIndex == 1 ? 12 : 0 })
            .onClick(() => {
              this.tabBarIndex = 0
              this.tabController.changeIndex(0)
            })
          Text('登录')
            .fontSize(16)
            .fontWeight(600)
            .borderRadius({
              topLeft: 12,
              topRight: 12,
              bottomLeft: this.tabBarIndex == 0 || this.tabBarIndex == 2 ? 12 : 0
            })
            .backgroundColor(this.tabBarIndex == 1 ? Color.White : Color.Transparent)
            .layoutWeight(1)
            .height(48)
            .textAlign(TextAlign.Center)
            .fontColor(this.tabBarIndex == 1 ? '#FF141111' : '#80141111')
            .onClick(() => {
              this.tabBarIndex = 1
              this.tabController.changeIndex(1)
            })

        }
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')

      }
      .padding({ top: this.safeTop })
      .linearGradient({ angle: 135, colors: [['#CAE2F9', -0.1571], ['#D4D1F4', 0.4709], ['#EDF5FD', 1.1235]] })
      .margin({ bottom: 20 })


      Tabs({ controller: this.tabController }) {
        TabContent() {
          RegisterOrResetPassComp({ loginCollect: new LoginCollect("register") })

        }
        .padding({ left: 20, right: 20 })

        TabContent() {
          LoginView({
            forgetPassClick: () => {
              this.tabBarIndex = 2
              this.tabController.changeIndex(2)
            }
          })
        }
        .padding({ left: 20, right: 20 })

        TabContent() {
          RegisterOrResetPassComp({ loginCollect: new LoginCollect("reset") })
        }
        .padding({ left: 20, right: 20 })
      }
      .scrollable(false)
      .layoutWeight(1)
      .barHeight(0)

    }

    .padding({

      bottom: this.safeBottom
    })
    .height('100%')
  }
}