activist/src/stores/stickersStore.ts

import { acceptHMRUpdate, defineStore } from 'pinia'

import type { User } from '@/stores/types'
import { useUserStore } from '@/stores/userStore'


export interface Sticker {
  color: string,
  createdBy: string | null,
  layout: string,
  orgs: string[],
  message1: string | null,
  message2: string | null,
  message3: string | null,
  message4: string | null,
  owner: string | null,
  id: string,
}

export const activist: Sticker = {
  color: '888888',
  createdBy: null,
  layout: 'layout1',
  orgs: [],
  message1: 'I AM AN ACTIVIST',
  message2: null,
  message3: null,
  message4: null,
  owner: null,
  id: '6dcd2dae-7be2-4f79-8b10-caeb379452fc',
};

export const colors = [
  'c9c918', 'abe11c', '8bf226',
  '6afc37', '4bfd4c', '2ff665',
  '18e780', '09d09a', '02b4b3',
  '0395c9', '0d74d9', '1e54e3',
  '3637e7', '541ee3', '740dd9',
  '9503c9', 'b402b3', 'd0099a',
  'e71880', 'f62f65', 'fd4b4c',
  'fc6a37', 'f28b26', 'e1ab1c',
];

export interface State {
  activeSticker: string | null;  // id
  stickers: Sticker[];
}

function randomColor() {
  return colors[Math.floor(Math.random() * colors.length)];
}

export const useStickersStore = defineStore('stickers', {
  actions: {
    create(username: string) {
      const sticker = structuredClone(activist);
      sticker.color = randomColor();
      sticker.createdBy = username;
      sticker.id = self.crypto.randomUUID();
      this.stickers.push(sticker);
      return sticker;
    },
    async fetch(id: string) {
      if (this.getSticker(id)) {
        return;
      }
      // TODO: Check if we have it already and if it's stale.
      const response = await fetch(
        `/api/sticker/${id}`,
      );
      const json = await response.json();
      this.stickers.push(json);
    },
    async put(id: string) {
      const sticker = this.getSticker(id)
      if (!sticker) {
        return;
      }
      const response = await fetch(
        `/api/sticker/${id}`,
        {
          body: JSON.stringify(sticker),
          method: 'PUT',
        },
      );
      const json = await response.json();
      // Disable this for now so we don't clobber the new owner.
      // this.sticker = json;
    },
    setOwner(sticker: Sticker, user: User) {
      sticker.owner = user.username;
      this.put(sticker.id);
      const userStore= useUserStore();
      userStore.addSticker(user.username, sticker.id);
    },
  },
  getters: {
    getSticker: (state: State) => {
      return (id: string): Sticker | undefined => {
        return state.stickers.find((sticker: Sticker) => sticker.id === id)
      };
    },
    getStickersCreatedBy: (state: State) => {
      return (username: string | null | undefined): Sticker[] => {
        if (!username) {
          return [];
        }
        return state.stickers
          .filter((sticker: Sticker) => sticker.createdBy === username);
      };
    },
  },
  state: (): State =>  {
    return {
      activeSticker: null,
      stickers: [],
    };
  },
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useStickersStore, import.meta.hot))
}