import { TopNavDTO } from 'wdBean';


const INDEX_SETTING_TITLE: string = '首页设置'
const INDEX_SETTING_SUBTITLE: string = '将指定频道设置为首页'
const MY_CHANNEL: string = '我的频道'
const EDIT_TEXT: string = '编辑'
const EDIT_DOWN: string = '完成'
const MORE_CHANNEL: string = '更多频道'
const LOCAL_CHANNEL: string = '地方频道'

@CustomDialog
struct ChannelDialog {
  @State indexSettingTabIndex: number = 1
  @State isEditIng: boolean = false
  @Link currentTopNavSelectedIndex: number
  @Link myChannelList: TopNavDTO[]
  @Link moreChannelList: TopNavDTO[]
  @Link localChannelList: TopNavDTO[]
  @Link indexSettingArray: string[]
  controller?: CustomDialogController
  myChannelItemEditHandle = (index: number): void => {
    let item = this.myChannelList.splice(index, 1)[0]
    if (item.moreChannel === '1') {
      this.moreChannelList.unshift(item)
    }
    if (item.localChannel === '1') {
      this.localChannelList.unshift(item)
    }
  }

  build() {
    Column() {

      Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
        Image($r('app.media.icon_ren_min_ri_bao'))
          .width(72)
          .height(29)
        Image($r('app.media.close_button'))
          .width(24)
          .onClick(() => {
            this.controller?.close()
          })
      }
      .width('100%')
      .margin({ top: 30, bottom: 10 })

      List() {

        ListItem() {
          Row() {
            Text(INDEX_SETTING_TITLE)
              .fontSize(16)
              .fontWeight(600)
              .margin({ right: 4 })

            Text(INDEX_SETTING_SUBTITLE)
              .fontSize(12)
              .fontWeight(400)
          }
          .width('100%')
          .margin({ top: 22, bottom: 16 })

        }

        ListItem() {
          Flex({ justifyContent: FlexAlign.SpaceBetween }) {
            ForEach(this.indexSettingArray, (text: string, index: number) => {
              Button(text, { type: ButtonType.Normal, stateEffect: false })
                .width('48%')
                .borderRadius(2)
                .fontColor(index === this.indexSettingTabIndex ? '#ffffff' : '#ED2800')
                .fontSize(16)
                .fontWeight(400)
                .backgroundColor(index === this.indexSettingTabIndex ? '#ED2800' : '#FDE9E5')
                .onClick(() => {
                  this.indexSettingTabIndex = index
                })
            })
          }
          .height(36)
          .margin({ bottom: 36 })
        }

        ListItem() {
          Row() {
            Text(MY_CHANNEL)
              .fontSize(16)
              .fontWeight(600)
            Text(this.isEditIng ? EDIT_DOWN : EDIT_TEXT)
              .fontSize(14)
              .fontColor('#ED2800')
              .onClick(() => {
                this.isEditIng = !this.isEditIng
              })
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          .margin({ bottom: 12 })
        }

        ListItem() {
          GridRow({ columns: 4, gutter: 10 }) {
            ForEach(this.myChannelList, (item: TopNavDTO, index: number) => {
              GridCol() {
                Row() {
                  Text(item.name)
                    .fontSize(14)
                    .fontColor(this.currentTopNavSelectedIndex === index ? '#ED2800' : (item.homeChannel === '1' ? '#999999' : '#222222'))

                  if (this.isEditIng && item.myChannel !== '1') {
                    Image($r('app.media.icon_audio_close'))
                      .width(12)
                      .margin({ left: 1 })
                  }
                }
                .width('100%')
                .height('100%')
                .justifyContent(FlexAlign.Center)
                .backgroundColor(item.homeChannel === '1' ? '#F5F5F5' : '')
                .onClick(() => {
                  if (this.isEditIng) {
                    if (item.myChannel !== '1') {
                      this.myChannelItemEditHandle(index)
                    }
                  } else {
                    this.currentTopNavSelectedIndex = index
                    this.controller?.close()
                  }
                })
              }
              .width(80)
              .height(40)
              .border({
                width: item.homeChannel === '1' ? 0 : 1,
                color: '#EDEDED',
                radius: 3
              })
            }, (item: TopNavDTO) => JSON.stringify(item))
          }
          .width('100%')
          .margin({ bottom: 24 })
        }

        ListItem() {
          Column() {
            if (this.moreChannelList.length > 0) {
              Text(MORE_CHANNEL)
                .width('100%')
                .fontSize(16)
                .fontWeight(600)
                .margin({ bottom: 12 })
                .textAlign(TextAlign.Start)
            }

            GridRow({ columns: 4, gutter: 10 }) {
              ForEach(this.moreChannelList, (item: TopNavDTO, index: number) => {
                GridCol() {
                  Row() {
                    Text(item.name)
                      .fontSize(14)

                    Image($r('app.media.add_icon'))
                      .width(12)
                      .margin({ left: 1 })
                  }
                  .width('100%').height('100%')
                  .justifyContent(FlexAlign.Center)
                  .onClick(() => {
                    this.myChannelList.push(this.moreChannelList.splice(index, 1)[0])
                  })
                }
                .width(80)
                .height(40)
                .border({
                  width: 1,
                  color: '#EDEDED'
                })
              }, (item: TopNavDTO) => JSON.stringify(item))
            }
            .width('100%')
            .margin({ bottom: 24 })

          }
          .width('100%')
        }

        ListItem() {
          Column() {
            if (this.localChannelList.length > 0) {
              Text(LOCAL_CHANNEL)
                .width('100%')
                .fontSize(16)
                .fontWeight(600)
                .margin({ bottom: 12 })
                .textAlign(TextAlign.Start)
            }

            GridRow({ columns: 4, gutter: 10 }) {
              ForEach(this.localChannelList, (item: TopNavDTO, index: number) => {
                GridCol() {
                  Row() {
                    Text(item.name)
                      .fontSize(14)

                    Image($r('app.media.add_icon'))
                      .width(12)
                      .margin({ left: 1 })
                  }
                  .width('100%').height('100%')
                  .justifyContent(FlexAlign.Center)
                  .onClick(() => {
                    this.myChannelList.push(this.localChannelList.splice(index, 1)[0])
                  })
                }
                .width(80)
                .height(40)
                .border({
                  width: 1,
                  color: '#EDEDED'
                })
              }, (item: TopNavDTO) => JSON.stringify(item))
            }
            .width('100%')
            .margin({ bottom: 24 })
          }
          .width('100%')
        }

      }.width('100%').height('100%')

    }
    .padding(16)
    .backgroundColor('#ffffff')
  }
}

@Component
struct ChannelSubscriptionLayout {
  @State indexSettingArray: string [] = ['推荐', '热点']
  //当前选中的频道
  @Link currentTopNavSelectedIndex: number;
  @Link myChannelList: TopNavDTO []
  @Link moreChannelList: TopNavDTO []
  @Link localChannelList: TopNavDTO []

  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: ChannelDialog({
      currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
      indexSettingArray: $indexSettingArray,
      myChannelList: $myChannelList,
      moreChannelList: $moreChannelList,
      localChannelList: $localChannelList
    }),
    alignment: DialogAlignment.TopEnd,
    customStyle: true,
  })

  aboutToAppear() {

  }

  aboutToDisappear() {
    this.dialogController = null // 将dialogController置空
  }

  build() {
    Row() {
      Image($r('app.media.channel_button'))
        .width(18)
    }
    .width(36)
    .height(30)
    .justifyContent(FlexAlign.Center)
    .backgroundColor('#ffffff')
    .onClick(() => {
      if (this.dialogController != null) {
        this.dialogController.open()
      }
    })
  }
}

export { ChannelSubscriptionLayout }