<template>
  <div class="collect-quotes__container">
    <QuoteCard v-for="quote in quotes" :key="quote.id" :quote="quote" :editable="true" />
    <QuoteCardNew v-if="showNewQuoteCard" @click="createNewQuote" />
    <QuoteCard v-if="!showNewQuoteCard" :quote="newQuote" :editable="true" :instant-edit="true" @edit-end="editEnd" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Quote } from '@/composables/engine.d'
import useEngine from '@/composables/useEngine'
const engine = useEngine()
const quotes = engine.getQuotesRef()
await engine.loadQuotes()

const showNewQuoteCard = ref(true)
const newQuote = ref({} as Quote)

const createNewQuote = () => {
  showNewQuoteCard.value = false
  newQuote.value = {
    id: '',
    quote: '',
  }
}

const editEnd = () => {
  showNewQuoteCard.value = true
}
</script>

<style lang="scss">
.collect-quotes {
  &__container {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
