import { defineStore } from "pinia";
import apiError from '@/module/apiError.js';
import iconDeleteGray from '@/assets/icon-delete-gray.svg';

export default defineStore('acctMgmtStore', {
  state: () => ({
    allUserAccoutList: [],
    isAcctMenuOpen: false,
    currentViewingUser: {}
  }),
  getters: {
  },
  actions: {
    /**
     * Set related boolean to true
     */
    openAcctMenu(){
      this.isAcctMenuOpen = true;
    },
    /**
     * Set related boolean to false
     */
    closeAcctMenu(){
      this.isAcctMenuOpen = false;
    },
    toggleIsAcctMenuOpen() {
      this.isAcctMenuOpen = !this.isAcctMenuOpen;
    },
    /**
     * For convenience, set current viewing data according to unique user ID.
     * @param {string} username 
     */
    setCurrentViewingUser(username) {
      const userFind = this.allUserAccoutList.find(user => user.username === username);
      this.currentViewingUser = userFind ? userFind : {};
    },
    /**
     * Get all user accounts
     */
    async getAllUserAccounts() {
      const apiGetUserList = `/api/users`;
      try {
        const response = await this.$axios.get(apiGetUserList);
        const customizedResponseData = await this.customizeAllUserList(response.data);
        this.allUserAccoutList = customizedResponseData;
        console.log('getAllUserAccounts success');
      } catch(error) {
        apiError(error, 'Failed to get all users.');
      }
    },
    /**
     * For example, add isHovered field
     */
    async customizeAllUserList(rawResponseData){
      return rawResponseData.map(user => ({
          ...user, // 保留後端傳來的欄位
          isDeleteHovered: false, // 針對前端顯示而額外增加的欄位
          isRowHovered: false,
          isEditHovered: false,
      }));
    },
    /**
     * According to mouseover or mouseleave status, change the bool value.
     * @param {string} username 
     * @param {boolean} isDeleteHovered 
     */
    changeIsDeleteHoveredByUser(username, isDeleteHovered) {
      const userToChange = this.allUserAccoutList.find(user => user.username === username);
      if (userToChange) {
        userToChange.isDeleteHovered = isDeleteHovered;
      }
    },
    /**
     * According to mouseover or mouseleave status, change the bool value.
     * @param {string} username 
     * @param {boolean} isRowHovered 
     */
    changeIsRowHoveredByUser(username, isRowHovered){
      const userToChange = this.allUserAccoutList.find(user => user.username === username);
      if (userToChange) {
        userToChange.isRowHovered = isRowHovered;
      }
    },
        /**
     * According to mouseover or mouseleave status, change the bool value.
     * @param {string} username 
     * @param {boolean} isEditHovered 
     */
      changeIsEditHoveredByUser(username, isEditHovered) {
        const userToChange = this.allUserAccoutList.find(user => user.username === username);
        if (userToChange) {
          userToChange.isEditHovered = isEditHovered;
        }
      },
  },
})