import { DeerSearch } from '../components/DeerSearch'
import { SecondViewModel } from './viewModel/SecondViewModel'
import { CustomTextStyle } from '../style/CustomTextStyle'
import { bookItemComp } from '../components/BuilderIndex'

@ComponentV2
export struct SecondView {
  vm: SecondViewModel = new SecondViewModel()

  build() {
    Column(){
      Row({space: 12}){
        Row({space: 6}){
          Text('年龄选择')
            .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))

          Image($r('[basic].media.icon_expension'))
            .width(10)
            .height(8)
            .rotate({ angle: this.vm.openAgeDialog ? 180 : 0 })
            .animation({duration: 200, curve: Curve.Smooth})
        }
        .borderRadius(18)
        .backgroundColor('#FFFECF2F')
        .border({width: 2, color: '#FF000000'})
        .padding({left: 15, top: 8, right: 15, bottom: 8})
        .bindMenu(this.ageSelect())
        .onClick(() => { if(!this.vm.openAgeDialog) this.vm.openAgeDialog = true })

        DeerSearch({showSearchButton: false, enable: false})
          .layoutWeight(1)
      }
      .width("100%")
      .padding({left: 16, right: 16, top: this.vm.safeTop, bottom: 20})
      .linearGradient( this.vm.openTypeDialog ? {colors: [['#FFF2C0', 0], ['#FFF3C6', 1]]} : undefined)

      Column(){
        RelativeContainer(){
          // 页面的 Title
          Column(){
            Row(){
              Row(){
                List({space: 22, scroller: this.vm.categoryControl}){
                  ForEach(this.vm.categoryList, (item: string, index) => {
                    ListItem(){
                      Column(){
                        Text(item)
                          .zIndex(99)
                          .onClick(() => { this.vm.changeCategory(index) })
                          .attributeModifier(new CustomTextStyle({size: 16, weight: 600, color: this.vm.categoryIndex == index ? '#FF111111' : '#FF777777'}))

                        if(this.vm.categoryIndex == index){
                          Image($r('[basic].media.icon_SelectBg'))
                            .width(45)
                            .height(16)
                            .margin({top:-10})
                            .transition(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.TOP), TransitionEffect.move(TransitionEdge.TOP)).animation({ duration: 100, curve: Curve.Smooth }))
                        }
                      }
                      .alignItems(HorizontalAlign.Center)
                    }
                  })
                }
                .height(40)
                .width("100%")
                .scrollBar(BarState.Off)
                .listDirection(Axis.Horizontal)
              }.layoutWeight(1)

              Row(){
                Image($r('[basic].media.icon_expension'))
                  .width(10)
                  .height(8)
                  .rotate({ angle: this.vm.openTypeDialog ? 180 : 0 })
                  .animation({duration: 200, curve: Curve.Smooth})
              }
              .padding({left: 16, top: 2})
              .onClick(() => { this.vm.openCategoryDialog() })

            }.alignItems(VerticalAlign.Top)

            Row(){
              Row(){
                ForEach(['最新', '最热'], (item: string, index: number) => {
                  Text(item)
                    .borderRadius(15)
                    .padding({left: 12, top: 5, right: 12, bottom: 5})
                    .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))
                    .border({width: 2, color: this.vm.sortType == index ? '#FF000000' : Color.Transparent})
                    .backgroundColor(this.vm.sortType == index ? '#FFFECF2F' : Color.Transparent)
                    .onClick(() => { this.vm.changeSortType(index) })
                })
              }

              Row({space: 16}){
                Row({space: 6}){
                  Blank()
                    .width(14)
                    .aspectRatio(1)
                    .borderRadius(2)
                    .border({width: 2, color: '#FF000000'})
                    .backgroundColor(this.vm.isRead ? '#FFFECF2F' : Color.White)
                  Text('未读')
                    .attributeModifier(new CustomTextStyle({size: 14, weight: 400}))
                }.onClick(() => { this.vm.changeIsRead() })

                Text(this.vm.showMode ? '封面模式' : '列表模式')
                  .onClick(() => { this.vm.changeShowMode() })
                  .attributeModifier(new CustomTextStyle({size: 14, weight: 400}))
              }
            }
            .width("100%")
            .margin({top: 10})
            .justifyContent(FlexAlign.SpaceBetween)
          }
          .width("100%")
          .id('classify')
          .backgroundColor(Color.White)
          .borderRadius({bottomLeft: 20, bottomRight: 20})
          .padding({left: 16, right: 16, bottom: 18})
          .alignRules({
            left: { anchor: '__container__', align: HorizontalAlign.Start },
            top: { anchor: '__container__', align: VerticalAlign.Top }
          })


          // 书籍列表项
          Column(){
            List({space: 12}){
              ListItem()

              Repeat(this.vm.bookList)
                .each((item) => {
                  bookItemComp(item.item, () => {})
                })
            }
            .width("100%")
            .height("100%")
            .scrollBar(BarState.Off)
          }
          .id('list')
          .width("100%")
          .layoutWeight(1)
          .padding({left: 16, right: 16})
          .backgroundColor(Color.Transparent)
          .alignRules({
            left: { anchor: '__container__', align: HorizontalAlign.Start },
            top: { anchor: 'classify', align: VerticalAlign.Bottom }
          })


          // 分类弹窗
          if(this.vm.openTypeDialog){
            Column(){
              Column(){
                Row(){
                  Column(){
                    Text('选择分类')
                      .zIndex(99)
                      .attributeModifier(new CustomTextStyle({size: 16, weight: 600}))

                    Image($r('[basic].media.icon_SelectBg'))
                      .width(45)
                      .height(16)
                      .margin({top:-10})
                  }

                  Column(){
                    Image($r('[basic].media.icon_expension'))
                      .width(10)
                      .height(8)
                      .rotate({ angle: this.vm.openTypeDialog ? 180 : 0 })
                      .animation({duration: 200, curve: Curve.Smooth})
                  }
                  .width(50)
                  .height(24)
                  .alignItems(HorizontalAlign.End)
                  .justifyContent(FlexAlign.Center)
                  .onClick(() => { this.vm.openCategoryDialog() })
                }
                .width("100%")
                .justifyContent(FlexAlign.SpaceBetween)

                Grid(){
                  ForEach(this.vm.categoryList, (item: string, index: number) => {
                    GridItem(){
                      Text(item)
                        .width('100%')
                        .borderRadius(18)
                        .textAlign(TextAlign.Center)
                        .padding({top: 6, bottom: 6})
                        .backgroundColor(this.vm.categoryIndex == index ? '#FFFECF2F' : '#FFFFFF')
                        .border({width: 2, color: this.vm.categoryIndex == index ? '#FF000000' : '#FFFFFF'})
                        .attributeModifier(new CustomTextStyle({size: 16, weight: 400}))
                        .onClick(() => {
                          this.vm.changeCategory(index, true)
                          this.vm.openCategoryDialog()
                        })
                    }
                  })
                }
                .rowsGap(14)
                .columnsGap(23)
                .margin({top: 13})
                .maxCount(Math.abs(this.vm.categoryList.length/3))
                .columnsTemplate('repeat(3, 1fr)')
              }
              .width("100%")
              .onClick(() => {})
              .padding({left: 17, right: 17, bottom: 13})
              .borderRadius({bottomLeft: 16, bottomRight: 16})
              .linearGradient({colors: [['#FFF3C6', 0], ['#FFF9E4', 1]]})
              .transition(TransitionEffect.translate({ y: -20 })
                .animation({ duration: 200, curve: Curve.Friction}))
            }
            .width("100%")
            .height("100%")
            .backgroundColor('rgba(0, 0, 0, 0.5)')
            .onClick(() => { this.vm.openCategoryDialog() })
            .alignRules({
              left: { anchor: '__container__', align: HorizontalAlign.Start },
              top: { anchor: '__container__', align: VerticalAlign.Top }
            })
          }
        }
        .width('100%')
        .height('100%')
        .backgroundColor('#F7F9FA')
      }
      .width('100%')
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  ageSelect(){
    Column({space: 17}){
      ForEach(['0-2岁', '3-6岁', '7-10岁', '10岁+'], (item: string, index) => {
        Text(item)
          .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))
      })
    }
    .margin(-4)
    .borderRadius(20)
    .border({width: 2, color: '#FF000000'})
    .padding({left: 32, right: 32, top: 19, bottom: 19})
    .onDisAppear(() => { this.vm.openAgeDialog = false })
  }
}