const { secure, toast } = require("../../utils/api");
Component({
  options: { styleIsolation: "apply-shared" },
  lifetimes: {
    attached() {
      this.load();
    },
  },
  pageLifetimes: {
    show() {
      this.load();
    },
  },
  data: {
    meetups: [],
    pets: [],
    selected: [],
    active: null,
    userId: "",
    joined: false,
    busy: false,
  },
  methods: {
    async load() {
      if (this.loading) return;
      this.loading = true;
      try {
        const [meetups, pets, me] = await Promise.all([
          secure("/meetups"),
          secure("/pets"),
          secure("/me"),
        ]);
        this.setData({
          meetups: meetups.map((m) => ({
            ...m,
            date: new Date(m.starts_at).toLocaleString("zh-CN"),
          })),
          pets,
          userId: me.id,
        });
      } catch (e) {
        toast(e);
      } finally {
        this.loading = false;
      }
    },
    create() {
      wx.navigateTo({ url: "/pages/meetup-edit/meetup-edit" });
    },
    async open(e) {
      const summary = this.data.meetups[e.currentTarget.dataset.index];
      try {
        const active = await secure("/meetups/" + summary.id);
        const participant = (active.people || []).find(
          (person) => person.user_id === this.data.userId,
        );
        this.setData({
          active: {
            ...active,
            date: new Date(active.starts_at).toLocaleString("zh-CN"),
          },
          joined: !!participant,
          selected: participant ? participant.pet_ids : [],
        });
      } catch (error) {
        toast(error);
      }
    },
    close() {
      this.setData({ active: null, joined: false, selected: [] });
    },
    pick(e) {
      this.setData({ selected: e.detail.selected });
    },
    async join() {
      if (this.data.busy) return;
      if (!this.data.selected.length) {
        wx.showToast({ title: "请选择同行的狗狗", icon: "none" });
        return;
      }
      this.setData({ busy: true });
      try {
        await secure("/meetups/" + this.data.active.id + "/join", "POST", {
          pet_ids: this.data.selected,
        });
        wx.showToast({ title: "报名成功", icon: "success" });
        this.close();
        await this.load();
      } catch (e) {
        toast(e);
      } finally {
        this.setData({ busy: false });
      }
    },
    async leave() {
      if (this.data.busy) return;
      const result = await wx.showModal({
        title: "退出约遛",
        content: "确定不参加这场约遛了吗？",
      });
      if (!result.confirm) return;
      this.setData({ busy: true });
      try {
        await secure("/meetups/" + this.data.active.id + "/join", "DELETE");
        this.close();
        await this.load();
      } catch (error) {
        toast(error);
      } finally {
        this.setData({ busy: false });
      }
    },
    location() {
      const active = this.data.active;
      if (active && active.latitude && active.longitude) {
        wx.openLocation({
          latitude: active.latitude,
          longitude: active.longitude,
          name: active.place_name,
          scale: 16,
        });
      }
    },
    async cancel() {
      if (this.data.busy) return;
      const r = await wx.showModal({
        title: "取消约遛",
        content: "确定取消这场约遛吗？",
      });
      if (!r.confirm) return;
      this.setData({ busy: true });
      try {
        await secure("/meetups/" + this.data.active.id + "/cancel", "POST");
        this.close();
        await this.load();
      } catch (e) {
        toast(e);
      } finally {
        this.setData({ busy: false });
      }
    },
  },
});