import { IBestToast, yTRouter } from "basic"
import { DiaLogPageEnum, DiaLogParam, YTDiaLogModel } from "basic/src/main/ets/models/YTDiaLogModel"
import { BabyInfo, Recipe } from "../model/Index"
import { AppStorageV2 } from "@kit.ArkUI"
import { routerUtils } from "../utils/RouterUtils"
import { emitter } from "@kit.BasicServicesKit"
import { EventConstant } from "../model/Constant"

@ComponentV2
export struct RecipeComp {
  @Require @Param recipe: Recipe[] = []
  // 当前的宝宝信息
  @Local babyInfo: BabyInfo = AppStorageV2.connect<BabyInfo>(BabyInfo, () => new BabyInfo())!

  // 展开食谱弹窗
  async expandRecipe(item: Recipe){
    item.ingredients = ['南瓜100g', '高铁面粉100g', '高铁面粉100g']
    item.steps = ['1. 南瓜去皮去籽，切成小块', '2. 上锅蒸15分钟至软烂', '3. 用勺子压成泥状', '4.米粉用温水调成糊状', '5.将南瓜泥与米粉混合均匀']
    item.description = '富含β-胡萝卜素和膳食纤维，\n' +
      '有助于宝宝视力发展和消化\n' +
      '系统健康'

    let param: DiaLogParam = {
      pageEnum: DiaLogPageEnum.RecipePopup,
      align: YTDiaLogModel.Center,
      param: {
        generics: item,
      }
    }
    yTRouter.router2NaviDiaLog(param, (res) => {
      setTimeout(() => {
        this.addToPlan(item)
      }, 200)
    })
  }

  // 打开 添加至食谱计划弹窗
  async addToPlan(item: Recipe){
    let param: DiaLogParam = {
      pageEnum: DiaLogPageEnum.AddToRecipe,
      align: YTDiaLogModel.Center,
      param: {
        generics: item,
      }
    }
    yTRouter.router2NaviDiaLog(param, (res) => {
      /**
       * 0-1 周一 - 早餐
       * 1-2 周二 - 午餐
       * 2-3 周三 - 晚餐
       */
      let ans = res.result as string

      if(!this.babyInfo.id) {
        IBestToast.show('请先添加宝宝信息')
        return routerUtils.router2IncreaseBabyInfo(() => {
          this.addToPlanEvent(item, ans)
        })
      }
      this.addToPlanEvent(item, ans)
    })
  }

  // 触发添加至计划 事件
  addToPlanEvent(item: Recipe, ans: string){
    emitter.emit(EventConstant.ADD_RECIPE_TO_WEEKLY_PLAN, { data: {
      recipe: item,
      week: ans.split('-')[0],
      meal: ans.split('-')[1]
    } })
  }

  build() {
    Column() {
      Grid(){
        ForEach(this.recipe, (item: Recipe, index) => {
          GridItem(){
            this.RecipeBuilder(item)
          }
        })
      }
      .rowsGap(12)
      .width("100%")
      .height("100%")
      .scrollBar(BarState.Off)
      .columnsTemplate("1fr 1fr")
      .padding({ bottom: 25 })
    }
    .width("100%")
    .height("100%")
  }


  @Builder RecipeBuilder(item: Recipe){
    Column({space: 10}){
      Image(item.imageUrl)
        .width('100%')
        .height(112)
        .borderRadius({topLeft: 8, topRight: 8})

      Column({space: 4}){
        Text(item.name)
          .fontSize(12)
          .fontWeight(400)

        Text(item.monthRange)
          .fontSize(10)
          .borderRadius(10)
          .fontColor('#F0A040')
          .backgroundColor('#F8F0E6')
          .padding({left: 10, right: 10, top: 5, bottom: 5})
      }
      .width("100%")
      .alignItems(HorizontalAlign.Start)
      .padding({left: 12, right: 10, bottom: 8, top: 8})
    }
    .width(154)
    .borderRadius(8)
    .backgroundColor(Color.White)
    .shadow({
      radius: 15, type: ShadowType.COLOR, color: 'rgba(0, 0, 0, 0.1)', offsetY: 4
    })
    .onClick(() => { this.expandRecipe(item) })
  }
}