<template>
  <h1>{{ msg }}</h1>
  <div>
    <button
      class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
      @click="addProduct"
    >
      order product n°{{ data.products }}
    </button>
    <button
      class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
      @click="data.price++"
    >
      inc price {{ data.price }}€
    </button>
    <button
      class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
      @click="decPrice"
    >
      dec price {{ data.price }}€
    </button>
  </div>
  <p>TOTAL HT = {{ state.count }}€ <br /></p>
  <p>TOTAL HT = {{ ttc }}€ <br /></p>
  <button
    class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
    @click="reset"
  >
    RESET
  </button>
</template>

<script lang="ts">
import global from '@/stores/global'
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  props: {
    msg: { type: String, required: true }
  },
  setup() {
    const data = reactive({
      products: 1,
      price: 10
    })
    const { state, ttc, inc, reset } = global

    function decPrice() {
      if (data.price > 1) data.price--
    }

    const addProduct = () => {
      data.products++
      inc(data.price)
    }
    return { data, state, ttc, reset, decPrice, addProduct }
  }
})
</script>
