import { request } from '../../utils/request'
import { OutfitItem, ClothesItem, PagedResult } from '../../types/models'

const CATEGORIES = [
  { name: '全部', value: '' },
  { name: '上装', value: '上装' },
  { name: '下装', value: '下装' },
  { name: '连衣裙', value: '连衣裙' },
  { name: '外套', value: '外套' },
  { name: '鞋', value: '鞋' },
  { name: '配饰', value: '配饰' },
]

Page({
  data: {
    uuid: '',
    isEdit: false,
    view: 'form' as 'form' | 'select',
    outfitName: '',
    outfitDesc: '',
    scene: '',
    selectedUuids: [] as string[],
    selectedItems: [] as ClothesItem[],
    categories: CATEGORIES,
    activeCategory: 0,
    allClothes: [] as ClothesItem[],
    selectLoading: true,
  },

  onLoad(query: Record<string, string>) {
    const uuid = query.uuid || ''
    if (uuid) {
      this.setData({ uuid, isEdit: true })
      this.fetchOutfit(uuid)
    }
  },

  async fetchOutfit(uuid: string) {
    try {
      const outfit = await request<OutfitItem>({ url: `/outfit/${uuid}` })
      const uuids = outfit.items.map((i) => i.clothes_uuid)
      const clothes = await Promise.all(
        uuids.map(async (id) => {
          try {
            return await request<ClothesItem>({ url: `/clothes/${id}`, showError: false })
          } catch (e) {
            return { clothes_uuid: id } as ClothesItem
          }
        })
      )
      this.setData({
        outfitName: outfit.outfit_name,
        outfitDesc: outfit.outfit_desc,
        scene: outfit.scene,
        selectedUuids: uuids,
        selectedItems: clothes,
      })
    } catch (e) {}
  },

  onNameInput(e: WechatMiniprogram.Input) {
    this.setData({ outfitName: e.detail.value })
  },
  onDescInput(e: WechatMiniprogram.Input) {
    this.setData({ outfitDesc: e.detail.value })
  },
  onSceneInput(e: WechatMiniprogram.Input) {
    this.setData({ scene: e.detail.value })
  },

  openSelect() {
    this.setData({ view: 'select', selectLoading: true })
    this.fetchAllClothes()
  },

  backToForm() {
    this.setData({ view: 'form' })
  },

  fetchAllClothes() {
    const cat = CATEGORIES[this.data.activeCategory].value
    const params: Record<string, any> = { page: 1, page_size: 50 }
    if (cat) params.category_main = cat
    request<PagedResult<ClothesItem>>({ url: '/clothes', data: params })
      .then((res) => {
        const list = res.list.map((it) => ({
          ...it,
          _selected: this.data.selectedUuids.indexOf(it.clothes_uuid) >= 0,
        }))
        this.setData({ allClothes: list, selectLoading: false })
      })
      .catch(() => this.setData({ selectLoading: false }))
  },

  onCategoryTap(e: WechatMiniprogram.TouchEvent) {
    const index = Number(e.currentTarget.dataset.index)
    if (index === this.data.activeCategory) return
    this.setData({ activeCategory: index, selectLoading: true })
    this.fetchAllClothes()
  },

  onToggleSelect(e: WechatMiniprogram.CustomEvent) {
    const item = e.detail.item as ClothesItem
    const uuids = this.data.selectedUuids
    const idx = uuids.indexOf(item.clothes_uuid)
    if (idx >= 0) {
      this.syncSelect(uuids.filter((u) => u !== item.clothes_uuid))
    } else {
      if (uuids.length >= 10) {
        wx.showToast({ title: '最多选择 10 件衣物', icon: 'none' })
        return
      }
      this.syncSelect([...uuids, item.clothes_uuid])
    }
  },

  syncSelect(uuids: string[]) {
    this.setData({
      selectedUuids: uuids,
      allClothes: this.data.allClothes.map((it) => ({
        ...it,
        _selected: uuids.indexOf(it.clothes_uuid) >= 0,
      })),
    })
  },

  confirmSelect() {
    const selectedItems = this.data.allClothes.filter(
      (it) => this.data.selectedUuids.indexOf(it.clothes_uuid) >= 0
    )
    this.setData({ view: 'form', selectedItems })
  },

  onSave() {
    const name = this.data.outfitName.trim()
    if (!name) {
      wx.showToast({ title: '请填写穿搭名称', icon: 'none' })
      return
    }
    if (!this.data.selectedUuids.length) {
      wx.showToast({ title: '至少选择 1 件衣物', icon: 'none' })
      return
    }

    const body = {
      outfit_name: name,
      outfit_desc: this.data.outfitDesc,
      scene: this.data.scene,
      items: this.data.selectedUuids.map((u) => ({ clothes_uuid: u })),
    }
    const req = this.data.isEdit
      ? request({ url: `/outfit/${this.data.uuid}`, method: 'PUT', data: body })
      : request({ url: '/outfit', method: 'POST', data: body })
    req
      .then(() => {
        wx.showToast({ title: '已保存', icon: 'success' })
        setTimeout(() => wx.navigateBack(), 500)
      })
      .catch(() => {})
  },

  onDelete() {
    wx.showModal({
      title: '确认删除这套穿搭？',
      content: '删除后不可恢复，但不会影响衣橱内的单品。',
      confirmText: '确认删除',
      confirmColor: '#FF3B30',
      success: (res) => {
        if (!res.confirm) return
        request({ url: `/outfit/${this.data.uuid}`, method: 'DELETE' })
          .then(() => {
            wx.showToast({ title: '已删除', icon: 'success' })
            setTimeout(() => wx.navigateBack(), 500)
          })
          .catch(() => {})
      },
    })
  },
})