import { BottomNavDTO, TopNavDTO } from 'wdBean';
import curves from '@ohos.curves';
import { Logger, SPHelper } from 'wdKit/Index';
import { SpConstants } from 'wdConstant/Index';
import { ColorUtils } from '../../utils/ColorUtils';

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 = '地方频道'

const TAG: string = 'ChannelSubscriptionLayout'

export { ChannelSubscriptionLayout }

@Component
struct ChannelSubscriptionLayout {
  @State indexSettingArray: string [] = ['推荐', '热点']
  //当前选中的频道
  @Link currentTopNavSelectedIndex: number;
  @Prop homeChannelList: TopNavDTO []
  // 我的频道栏目的频道信息数组
  @Link @Watch('changeMyChannelData') myChannelList: TopNavDTO []
  // 更多频道栏目频道信息数组
  @Link moreChannelList: TopNavDTO []
  // 地方频道栏目频道信息数组
  @Link localChannelList: TopNavDTO []
  // 收集到的我的频道栏目中的频道id
  @State channelIds: number [] = []
  // 是否显示频道编辑页面
  @State isShow: boolean = false
  @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 indexSettingChannelId: number = AppStorage.get<number>('indexSettingChannelId') || 2002
  @State isEditIng: boolean = false
  navItem: BottomNavDTO = {} as BottomNavDTO
  // 顶部导航栏是否有临时跳转频道数据不
  @Prop haveTempTabData: boolean

  changeTab: (index: number) => void = () => {
  }

  aboutToAppear() {
    this.changeMyChannelData()
  }

  aboutToDisappear(): void {
  }

  //交换我的频道数组中的位置
  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])
    AppStorage.setOrCreate('channelIds', this.channelIds.join(','))
  }

  //删除频道
  delChannelItem(index: number) {

    let item = this.myChannelList.splice(index, 1)[0]
    // this.channelIds.splice(index, 1)
    AppStorage.setOrCreate('channelIds', this.channelIds.join(','))

    // 本地频道特殊处理
    let provinceName = SPHelper.default.getSync(SpConstants.LOCATION_PROVINCE_NAME, '') as string
    if (provinceName && provinceName.includes(item.name) && item.localChannel == '0') {
      item.localChannel = '1'
    }
    /*
       删除的频道信息回到原栏目中去
     */
    if (item.moreChannel === '1') {
      this.moreChannelList.unshift(item)
    }
    if (item.localChannel === '1') {
      this.localChannelList.unshift(item)
    }

    // 删除频道的索引值大于 我的栏目中频道最大索引值
    if (this.currentTopNavSelectedIndex > this.channelIds.length - 1) {
      //使用默认频道
      //缓存首页频道
      let index = this.myChannelList.findIndex(_item => _item?.channelId === this.indexSettingChannelId)
      if (index > -1) {
        this.currentTopNavSelectedIndex = index
      }
    } else {
      //检测删除频道后的当前频道是否是特殊频道
      let item = this.myChannelList[this.currentTopNavSelectedIndex]
      if (this.isBroadcast(item) || this.isLayout(item)) {

        this.changeTab(this.currentTopNavSelectedIndex)
        this.isShow = false

        let index = this.myChannelList.findIndex(_item => _item?.channelId === this.indexSettingChannelId)
        if (index > -1) {
          this.currentTopNavSelectedIndex = index
          this.changeTab(this.currentTopNavSelectedIndex)
        }
      }

    }
  }

  /**
   *  频道是播报
   * @param item
   * @returns
   */
  private isBroadcast(item?: TopNavDTO): boolean {
    return item?.channelId === 2066
  }

  /**
   * 频道是电子报
   * @param item
   * @returns
   */
  private isLayout(item?: TopNavDTO): boolean {
    return item?.channelId === 2006
  }

  // 添加频道
  addChannelItem(item: TopNavDTO) {
    this.channelIds.push(item.channelId)
    this.myChannelList.push(item)
    AppStorage.setOrCreate('channelIds', this.channelIds.join(','))

    // let storageChannelIds: string = AppStorage.get<string>('channelIds') || ''
    // console.debug('TopNavigationComponent', 'addChannelItem==>' + storageChannelIds)
  }

  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)
      }
    }
  }


  @Builder
  firstSettingItemBuilder (item:TopNavDTO, index: number){
    if (this.homeChannelList.length == 1) {
      Image('')
        .width('100%')
        .height('100%')
        .backgroundColor('#ED2800')
        .borderRadius(4)
    }else {
      Image(item.channelId === this.indexSettingChannelId ? $r('app.media.index_setting_button_active') :
      $r('app.media.index_setting_button'))
        .objectFit(ImageFit.Contain)
        .rotate({
          angle: index === 1 ? 180 : 0
        })
    }
  }

  @Builder
  sheetBuilder() {
    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.isShow = false
            this.isEditIng = false
          })
      }
      .width('100%')
      .padding({ bottom: 10 })

      List() {

        if (this.homeChannelList.length > 0) {
          ListItem() {
            Row() {
              Text(INDEX_SETTING_TITLE)
                .fontSize(16)
                .fontWeight(600)
                .margin({ right: 4 })

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

          }

          ListItem() {
            Flex({ justifyContent: FlexAlign.SpaceBetween }) {
              ForEach(this.homeChannelList, (item: TopNavDTO, index: number) => {
                Stack() {
                  this.firstSettingItemBuilder(item,index)
                  // Image(item.channelId === this.indexSettingChannelId ? $r('app.media.index_setting_button_active') :
                  // $r('app.media.index_setting_button'))
                  //   .objectFit(ImageFit.Contain)
                  //   .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)
                .layoutWeight(1)
                .onClick(() => {
                  this.indexSettingChannelId = item.channelId
                  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({ top:this.homeChannelList.length > 0?0:22,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.headlinesOn === 1 || item.movePermitted === 0 ? '#999999' : '#222222'))
                    .fontColor(item.headlinesOn === 1 || item.movePermitted === 0 ? '#999999' : '#222222')

                  if (this.isEditIng && item.delPermitted === 1 && item.movePermitted === 1) {
                    Image($r('app.media.icon_audio_close'))
                      .width(12)
                      .margin({ left: 1 })
                  }
                }
                .width('100%')
                .height('100%')
                .justifyContent(FlexAlign.Center)
                .backgroundColor(item.headlinesOn === 1 || item.movePermitted === 0 ? '#F5F5F5' : '#ffffff')
              }
              .width('23%')
              .height(40)
              .borderRadius(3)
              .border({
                width: 0.7,
                color: item.headlinesOn === 1 || item.movePermitted === 0 ? '#F5F5F5' : '#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.Parallel,
                  TapGesture()
                    .onAction((event?: GestureEvent) => {
                      if (this.isEditIng) {
                        if (item.delPermitted === 1 && item.movePermitted === 1) {
                          this.delChannelItem(index)
                        }
                      } else {
                        this.changeTab(index)
                        this.isShow = false
                      }
                    }),
                  LongPressGesture({ repeat: true })
                    .onAction((event: GestureEvent | undefined) => {
                      if (event) {
                        if (event.repeat && this.isEditIng === false) {
                          this.isEditIng = true;
                        }
                      }
                    }),
                  PanGesture({
                    fingers: 1,
                    direction: this.isEditIng ? PanDirection.All : PanDirection.None,
                    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: 0.7,
                  color: '#EDEDED',
                  radius: 3
                })
              }, (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: 0.7,
                  color: '#EDEDED',
                  radius: 3
                })
              }, (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: 40,
      left: 15
    })
    .backgroundColor('#ffffff')
  }

  build() {
    Row() {
      Image($r('app.media.icon_news_home_menu'))
        .width(18)
        .colorFilter(ColorUtils.getDrawingColorFilter(this.getChannelMoreColor("")))
    }
    .width(36)
    .height(40)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.isShow = true
      if (this.haveTempTabData) {
        // 存储数据
        AppStorage.setOrCreate('channelIds', this.channelIds.join(','))
        this.haveTempTabData = false
      }
    })
    .bindContentCover(this.isShow, this.sheetBuilder(), {
      modalTransition: ModalTransition.DEFAULT,
      onWillAppear: () => {
        console.log("BindContentCover onWillAppear.")
      },
      onAppear: () => {
        console.log("BindContentCover onAppear.")
      },
      onWillDisappear: () => {
        console.log("BindContentCover onWillDisappear.")
        this.isShow = false
        this.isEditIng = false
      },
      onDisappear: () => {
        console.log("BindContentCover onDisappear.")
      }
    })
  }

  /**
   * 改变我的频道栏目中频道id数据
   */
  changeMyChannelData() {

    this.channelIds = []
    this.myChannelList.forEach(item => {
      if (item != undefined && item.channelId != undefined) {
        this.channelIds.push(item.channelId)
      }
    })
    console.debug('TopNavigationComponent', '--changeMyChannelData  channelIds--->' + this.channelIds.join(','))

  }

  /**
   * 两侧文字图标颜色,搜索图标颜色
   * @returns
   */
  getChannelMoreColor(defaultColor: string): string {
    let bothColor = this.navItem.channelMoreColor ? this.navItem.channelMoreColor : defaultColor
    return bothColor
  }
}