import { TopNavDTO } from 'wdBean';
import curves from '@ohos.curves';

const INDEX_SETTING_TITLE: string = '首页设置'
const INDEX_SETTING_SUBTITLE: string = '将指定频道设置为首页'
const MY_CHANNEL: string = '我的频道'
const EDIT_TEXT: string = '编辑'
const EDIT_DOWN: string = '完成'
const MY_CHANNEL_TIP1: string = '点击进入频道'
const MY_CHANNEL_TIP2: string = '拖动调整频道顺序'
const MORE_CHANNEL: string = '更多频道'
const LOCAL_CHANNEL: string = '地方频道'


@CustomDialog
struct ChannelDialog {
  @State dragItem: number = -1
  private dragRefOffsetX: number = 0
  private dragRefOffsetY: number = 0
  @State offsetX: number = 0
  @State offsetY: number = 0
  private FIX_VP_X: number = 80
  private FIX_VP_Y: number = 48
  @State indexSettingTabIndex: number = 0
  @State isEditIng: boolean = false
  @State currentTopNavSelectedItem: TopNavDTO = {} as TopNavDTO
  @Link currentTopNavSelectedIndex: number
  @Link myChannelList: TopNavDTO[]
  @Link moreChannelList: TopNavDTO[]
  @Link localChannelList: TopNavDTO[]
  @Link homeChannelList: TopNavDTO[]
  @Link indexSettingChannelId: number
  controller?: CustomDialogController
  confirm: (index: number) => void = () => {
  }
  changeChannelIndex: (index1: number, index2: number) => void = () => {
  }
  delChannelItem: (index: number) => void = () => {
  }
  addChannelItem: (item: TopNavDTO) => void = () => {
  }

  aboutToAppear() {
    this.currentTopNavSelectedItem = this.myChannelList[this.currentTopNavSelectedIndex]
  }

  itemMove(index: number, newIndex: number): void {
    let targetItem = this.myChannelList[newIndex]
    if (!(targetItem?.headlinesOn === 1 || targetItem?.movePermitted === 0 || targetItem?.homeChannel === '1')) {
      this.changeChannelIndex(index, newIndex)
    }
  }

  //向下滑
  down(index: number): void {
    console.info(`向下滑`)
    this.offsetY -= this.FIX_VP_Y
    this.dragRefOffsetY += this.FIX_VP_Y
    this.itemMove(index, index + 4)
  }

  //向下滑(右下角为空)
  down2(index: number): void {
    this.offsetY -= this.FIX_VP_Y
    this.dragRefOffsetY += this.FIX_VP_Y
    this.itemMove(index, index + 4)
  }

  //向上滑
  up(index: number): void {
    console.info(`向上滑`)
    this.offsetY += this.FIX_VP_Y
    this.dragRefOffsetY -= this.FIX_VP_Y
    this.itemMove(index, index - 4)
  }

  //向左滑
  left(index: number): void {
    console.info(`向左滑`)
    this.offsetX += this.FIX_VP_X
    this.dragRefOffsetX -= this.FIX_VP_X
    this.itemMove(index, index - 1)
  }

  //向右滑
  right(index: number): void {
    console.info(`向右滑`)
    this.offsetX -= this.FIX_VP_X
    this.dragRefOffsetX += this.FIX_VP_X
    this.itemMove(index, index + 1)
  }

  //向右下滑
  lowerRight(index: number): void {
    console.info(`向右下滑`)
    this.offsetX -= this.FIX_VP_X
    this.dragRefOffsetX += this.FIX_VP_X
    this.offsetY -= this.FIX_VP_Y
    this.dragRefOffsetY += this.FIX_VP_Y
    this.itemMove(index, index + 5)
  }

  //向右上滑
  upperRight(index: number): void {
    console.info(`向右上滑`)
    this.offsetX -= this.FIX_VP_X
    this.dragRefOffsetX += this.FIX_VP_X
    this.offsetY += this.FIX_VP_Y
    this.dragRefOffsetY -= this.FIX_VP_Y
    this.itemMove(index, index - 3)
  }

  //向左下滑
  lowerLeft(index: number): void {
    console.info(`向左下滑`)
    this.offsetX += this.FIX_VP_X
    this.dragRefOffsetX -= this.FIX_VP_X
    this.offsetY -= this.FIX_VP_Y
    this.dragRefOffsetY += this.FIX_VP_Y
    this.itemMove(index, index + 3)
  }

  //向左上滑
  upperLeft(index: number): void {
    console.info(`向左上滑`)
    this.offsetX += this.FIX_VP_X
    this.dragRefOffsetX -= this.FIX_VP_X
    this.offsetY += this.FIX_VP_Y
    this.dragRefOffsetY -= this.FIX_VP_Y
    this.itemMove(index, index - 5)
  }

  handleAnimationTo(item: TopNavDTO, event: GestureEvent) {
    let index = this.myChannelList.findIndex(ele => ele.num === this.dragItem)
    if (!(item.headlinesOn === 1 || item.movePermitted === 0 || item.homeChannel === '1') && this.isEditIng) {
      this.offsetY = event.offsetY - this.dragRefOffsetY
      this.offsetX = event.offsetX - this.dragRefOffsetX
      if (this.offsetY >= this.FIX_VP_Y / 2 && (this.offsetX <= 44 && this.offsetX >= -44)
      ) {
        //向下滑
        this.down(index)
      } else if (this.offsetY <= -this.FIX_VP_Y / 2 && (this.offsetX <= 44 && this.offsetX >= -44)
      ) {
        //向上滑
        this.up(index)
      } else if (this.offsetX >= this.FIX_VP_X / 2 && (this.offsetY <= 20 && this.offsetY >= -20)
      ) {
        //向右滑
        this.right(index)
      } else if (this.offsetX <= -this.FIX_VP_X / 2 && (this.offsetY <= 20 && this.offsetY >= -20)
      ) {
        //向左滑
        this.left(index)
      } else if (this.offsetX >= this.FIX_VP_X / 2 && this.offsetY >= this.FIX_VP_Y / 2
      ) {
        //向右下滑
        this.lowerRight(index)
      } else if (this.offsetX >= this.FIX_VP_X / 2 && this.offsetY <= -this.FIX_VP_Y / 2
      ) {
        //向右上滑
        this.upperRight(index)
      } else if (this.offsetX <= -this.FIX_VP_X / 2 && this.offsetY >= this.FIX_VP_Y / 2
      ) {
        //向左下滑
        this.lowerLeft(index)
      } else if (this.offsetX <= -this.FIX_VP_X / 2 && this.offsetY <= -this.FIX_VP_Y / 2
      ) {
        //向左上滑
        this.upperLeft(index)
      } else if (this.offsetX >= this.FIX_VP_X / 2 && this.offsetY >= this.FIX_VP_Y / 2
      ) {
        //向右下滑(右下角为空)
        this.down2(index)
      }
    }
  }

  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%')
      .padding({ bottom: 10 })

      List() {

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

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

        }

        ListItem() {
          Flex({ justifyContent: FlexAlign.SpaceBetween }) {
            ForEach(this.homeChannelList, (item: TopNavDTO, index: number) => {
              Stack() {
                Image(item.channelId === this.indexSettingChannelId ? $r('app.media.index_setting_button_active') : $r('app.media.index_setting_button'))
                  .objectFit(ImageFit.Auto)
                  .rotate({
                    angle: index === 1 ? 180 : 0
                  })
                Row() {
                  if (index === 0) {
                    Image(item.channelId === this.indexSettingChannelId ? $r('app.media.recommend_icon') : $r('app.media.recommend_icon_active'))
                      .width(20)
                  }
                  Text(item.name)
                    .textAlign(TextAlign.Center)
                    .fontSize(16)
                    .fontColor(item.channelId === this.indexSettingChannelId ? '#ffffff' : '#ED2800')
                }
                .width('100%')
                .justifyContent(FlexAlign.Center)
              }
              .alignContent(Alignment.Start)
              .height(36)
              .onClick(() => {
                AppStorage.set('indexSettingChannelId', item.channelId)
              })
            })
          }
          .height(36)
          .margin({ bottom: 36 })
        }

        ListItem() {
          Row() {
            Row() {
              Text(MY_CHANNEL)
                .fontSize(16)
                .fontWeight(600)
                .margin({ right: 4 })
              Text(!this.isEditIng ? MY_CHANNEL_TIP1 : MY_CHANNEL_TIP2)
                .fontSize(12)
                .fontWeight(400)
                .fontColor('#222222')
            }

            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() {
          Grid() {
            ForEach(this.myChannelList, (item: TopNavDTO, index: number) => {
              GridItem() {
                Row() {
                  Text(item.name)
                    .fontSize(14)
                    .fontColor(this.currentTopNavSelectedItem.channelId === item.channelId ? '#ED2800' : (item.homeChannel === '1' || item.movePermitted === 0 ? '#999999' : '#222222'))

                  if (this.isEditIng && item.delPermitted === 1) {
                    Image($r('app.media.icon_audio_close'))
                      .width(12)
                      .margin({ left: 1 })
                  }
                }
                .width('100%')
                .height('100%')
                .justifyContent(FlexAlign.Center)
                .backgroundColor(item.homeChannel === '1' || item.movePermitted === 0 ? '#F5F5F5' : '#ffffff')
                .onClick(() => {
                  if (this.isEditIng) {
                    if (item.delPermitted === 1) {
                      this.delChannelItem(index)
                    }
                  } else {
                    this.confirm(index)
                    this.controller?.close()
                  }
                })
              }
              .width('23%')
              .height(40)
              .border({
                width: item.homeChannel === '1' ? 0 : 1,
                color: '#EDEDED',
                radius: 3
              })
              .zIndex(this.dragItem == item.num ? 1 : 0)
              .translate(this.dragItem == item.num ? { x: this.offsetX, y: this.offsetY } : { x: 0, y: 0 })

              .gesture(
                GestureGroup(GestureMode.Sequence,
                  PanGesture({ fingers: 1, direction: null, distance: 0 })
                    .onActionStart((event: GestureEvent) => {
                      this.dragItem = item.num
                      this.dragRefOffsetX = 0
                      this.dragRefOffsetY = 0
                    })
                    .onActionUpdate((event: GestureEvent) => {
                      animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
                        this.handleAnimationTo(item, event)
                      })
                    })
                    .onActionEnd((event: GestureEvent) => {
                      animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
                        this.dragItem = -1
                        this.offsetX = 0
                        this.offsetY = 0
                        this.dragRefOffsetX = 0
                        this.dragRefOffsetY = 0
                      })
                    })
                )
                  .onCancel(() => {
                    animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
                      this.dragItem = -1
                      this.offsetX = 0
                      this.offsetY = 0
                      this.dragRefOffsetX = 0
                      this.dragRefOffsetY = 0
                    })
                  }))

            }, (item: TopNavDTO) => JSON.stringify(item))
          }
          .width('100%')
          .margin({ bottom: 24 })
          .columnsTemplate('1fr 1fr 1fr 1fr')
          .columnsGap(8)
          .rowsGap(8)
          .height(Math.ceil(this.myChannelList.length / 4) * 48)
        }

        //更多频道列表
        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.addChannelItem(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.addChannelItem(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%')
      .scrollBar(BarState.Off)
    }
    .padding({ top: 40, right: 15, bottom: 20, left: 15 })
    .backgroundColor('#ffffff')
  }
}

// @Entry
@Component
struct ChannelSubscriptionLayout {
  @State indexSettingArray: string [] = ['推荐', '热点']
  //当前选中的频道
  @Link currentTopNavSelectedIndex: number;
  @Prop homeChannelList: TopNavDTO []
  @Prop indexSettingChannelId: number
  @Link myChannelList: TopNavDTO []
  @Link moreChannelList: TopNavDTO []
  @Link localChannelList: TopNavDTO []
  @Link channelIds: number []
  @StorageLink('channelIds') storeChannelIds: string = ''
  changeTab: (index: number) => void = () => {
  }
  //频道弹窗点击切换频道
  onAccept = (index: number) => {
    this.changeTab(index)
  }
  //交换我的频道数组中的位置
  changeChannelIndex = (index1: number, index2: number) => {
    let tmp = this.myChannelList.splice(index1, 1)
    let channelIdTmp = this.channelIds.splice(index1, 1)
    this.myChannelList.splice(index2, 0, tmp[0])
    this.channelIds.splice(index2, 0, channelIdTmp[0])
    this.storeChannelIds = this.channelIds.join(',')
  }
  //删除频道
  delChannelItem = (index: number) => {
    let item = this.myChannelList.splice(index, 1)[0]
    this.channelIds.splice(index, 1)
    this.storeChannelIds = this.channelIds.join(',')
    if (item.moreChannel === '1') {
      this.moreChannelList.unshift(item)
    }
    if (item.localChannel === '1') {
      this.localChannelList.unshift(item)
    }
  }
  // 添加频道
  addChannelItem = (item: TopNavDTO) => {
    this.channelIds.push(item.channelId)
    this.myChannelList.push(item)
    this.storeChannelIds = this.channelIds.join(',')
  }
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: ChannelDialog({
      currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
      indexSettingChannelId: $indexSettingChannelId,
      homeChannelList: $homeChannelList,
      myChannelList: $myChannelList,
      moreChannelList: $moreChannelList,
      localChannelList: $localChannelList,
      confirm: this.onAccept,
      changeChannelIndex: this.changeChannelIndex,
      delChannelItem: this.delChannelItem,
      addChannelItem: this.addChannelItem
    }),
    alignment: DialogAlignment.TopEnd,
    customStyle: true,
  })

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

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

export { ChannelSubscriptionLayout }