'@typescript-eslint/no-unused-vars': 'off', // uses in new <script setup>

/**
* @file src/store/index.ts
* @author Artem Shuvaev
* @version 1.0.0
* @fileoverview Entry point of store
*/
import habrModule from './modules/habrModule'
export { habrModule }

/**
* @file src/store/modules/habrModule/index.ts
* @author Artem Shuvaev
* @version 1.0.0
* @fileoverview Entry of store module
*/
import state from './state'
import getters from './getters'
import actions from './actions'
export default {
    state,
    getters,
    actions
}

/**
* @file src/store/modules/habrModule/state.ts
* @author Artem Shuvaev
* @version 1.0.0
* @fileoverview State for store example with new Ref and Reactive Vue3
*/
import { ref, reactive } from 'vue'
export default class State {
  /**
   * Example string ref (reactive)
   */
  static strExample = ref('string example')
  /**
   * Example number ref (reactive)
   */
  static numberExample = ref(0)
  /**
   * Example string reactive
   */
  static objExample = reactive({
    property: 'property string',
  })
}

/**
* @file src/store/modules/habrModule/mutations.ts
* @author Artem Shuvaev
* @version 1.0.0
* @fileoverview Mutations for store example with new Ref and Reactive Vue3
*/
import State from './state'
export default class Mutations {
  /**
   * Set to state new string
   * @param value
   */
  static setString (value: string): void {
    State.strExample.value = value
  }
  /**
   * Increate the number in state
   */
  static increaseNumber (): void {
    State.numberExample.value++
  }
}

/**
* @file src/store/modules/habrModule/getters.ts
* @author Artem Shuvaev
* @version 1.0.0
* @fileoverview Getters for store example with new Ref and Reactive Vue3
*/
import type { Ref } from 'vue'
import State from './state'
export default class Getters {
  /**
   * Test getter with cache
   * @deprecated must use readonly and state proxy if not need any business logic
   */
  static get strExample(): Ref<string> {
    return State.strExample
  }
}

<script>
export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}
</script>

<script setup>
// all from SETUP here
</script>

<template>
  <div>
    <!-- Main body -->
    <div class="main">
      <h5>App.vue</h5>
      String from store: {{ readonlyStringFromStore }}
      <div>
        <button @click="increaseCounter">Counter: {{ counter }}</button>
      </div>
    </div>
    <!-- /Main body -->
    <TheHelloWorldComponent :counter="counter" @customEvent="increaseCounter" />
    <TheTestComponent :counter="counter" @click="increaseCounter" />
  </div>
</template>
<script lang="ts" setup>
/**
* @file src/App.vue
* @author Artem Shuvaev
* @version 1.0.0
* @fileoverview Entry Vue example file for it's project
*/
import { ref, onMounted, readonly, defineAsyncComponent } from 'vue'
import { habrModule } from './store'
/* Components */
// Vue + new setup script example component
const TheHelloWorldComponent = defineAsyncComponent(
  () => import('./components/TheHelloWorldComponent.vue')
)
// Vue + new setup and TSX render example
const TheTestComponent = defineAsyncComponent(
  () => import('./components/TheTestComponent/index')
)
/* Data */
// must be readonly cause of state proxying
const readonlyStringFromStore = readonly(habrModule.state.strExample)
// simple reactive variable
const counter = ref(0)
/* Hooks */
onMounted(() => {
  habrModule.actions.setString('changed from App.vue string')
})
/* Methods */
/**
* Increase local reactive counter
*/
const increaseCounter = () => {
  counter.value++
}
</script>¬
<style lang="css">
@import 'styles.css';
</style>
<style lang="css" scoped>
.main {
  background-color: aquamarine;
  padding: 5vh;
}
</style>

<template>
  <div class="hello">
    <h5>TheHelloWorldComponent</h5>
    Now counter is {{ props.counter }}
    <div>
      <button @click="emitCustomEvent">
        Emit custom event (increase counter)
      </button>
      <button @click="changeString">Change string in store</button>
    </div>
  </div>
</template>
<script lang="ts" setup>
/**
* @file /src/components/TheHelloWorldComponent.vue
* @fileoverview Child component example with using new setup, emits, store etc
* @author Artem Shuvaev
* @version 1.0.0
*/
import { defineEmit, defineProps } from 'vue'
import { habrModule } from '../store'
/* Props */
const props = defineProps({
  counter: {
    type: Number,
    required: true,
  },
})
/* Emits */
// Define emits signatures,
// I don't know but signatures works only with null as output type (instead VOID or UNDEFINED)
const emit = defineEmit({
  customEvent: null,
  customEvent2: (payload: { test: string }) => null,
})
/* Methods */
/**
* Call dispatch of store module
*/
const changeString = () =>
  habrModule.actions.setString('changed from HelloWorld.vue')
/**
* @emits customEvent
*/
const emitCustomEvent = () => emit('customEvent')
// it's typed payload!
const emitCustomEvent2 = () =>
  emit('customEvent2', {
    test: 'string',
  })
</script>
<style lang="css" scoped>
.hello {
  background-color: lightsteelblue;
  padding: 5vh;
  margin-top: 5vh;
}
</style>

/**
* @file /src/components/TheTestComponents/index.tsx
* @fileoverview Test component with using TSX rendering in setup function
* @author Artem Shuvaev
* @version 1.0.0
*/
import { defineComponent } from 'vue'
import styles from './styles.module.css'
export default defineComponent({
  name: 'TheTestComponent',
  props: {
    counter: {
      type: Number,
      default: 0,
    },
  },
  emits: {
    click: null,
  },
  setup(props, { emit }) {
    /** Methods */
    /**
     * Simple click handler
     * @emits click
     */
    const onClickHandler = () => emit('click')
    /** Rendering */
    return () => (
      <div class={styles.test}>
        <h5>TheTestComponent</h5>
        <div>Now counter is: {props.counter}</div>
        <button onClick={onClickHandler}>Emit click (increase counter)</button>
      </div>
    )
  },
})