<template>
  <div>
    <h1>Index Page</h1>
    <br />
  </div>
</template>

<script lang="ts">
import { defineStore } from 'pinia';

function Store(options: { name?: string } = {}) {
  return function (StoreClass: any) {
    const storeName = options.name || StoreClass.name;

    // Define the store using Pinia
    const useStore = defineStore(storeName, {
      state: () => {
        const instance = new StoreClass();
        return { ...instance };
      },
      actions: {
        // Add actions from the class
        ...Object.getOwnPropertyNames(StoreClass.prototype)
          .filter((key) => key !== 'constructor' && typeof StoreClass.prototype[key] === 'function')
          .reduce((actions: any, key) => {
            actions[key] = StoreClass.prototype[key];
            return actions;
          }, {}),
      },
      getters: {
        // Add getters from the class
        ...Object.getOwnPropertyNames(StoreClass.prototype)
          .filter((key) => typeof Object.getOwnPropertyDescriptor(StoreClass.prototype, key)?.get === 'function')
          .reduce((getters: any, key) => {
            getters[key] = Object.getOwnPropertyDescriptor(StoreClass.prototype, key)!.get!;
            return getters;
          }, {}),
      },
    });

    // Return the store factory function
    return useStore;
  };
}

export { Store };

// @ts-ignore
@Store({ name: 'counter' }) // Use the decorator
export class CounterStore {
  // State
  count = 0;

  // Actions
  increment() {
    this.count++;
  }

  // Getters
  get doubleCount() {
    return this.count * 2;
  }
}

import {
  Component,
  setup,
  Vue,
} from '@frontend'


@Component({})
export default class IndexPage extends Vue {
  // Access the store
  // @ts-ignore
  // test = CounterStore();
 // test2 = setup(() =>CounterStore());

  // Example lifecycle hook
  override mounted() {
    // @ts-ignore
    console.log('Store initialized:', CounterStore());
// console.log('Store initialized:', this.test2);
  }
}
</script>