<script setup>
import { usePlantStateStore} from "@/stores/plantState.js";
import Card from 'primevue/card';
import Accordion from 'primevue/accordion';
import AccordionPanel from 'primevue/accordionpanel';
import AccordionHeader from 'primevue/accordionheader';
import AccordionContent from 'primevue/accordioncontent';

const plantStore = usePlantStateStore();

const textResponse = plantStore.text_response.split('.').filter(line => line.trim() !== '').map(line => line.trim());

</script>

<template>
  <div class="simulation-result-wrapper">
    <h1>Your plant has been successfully simulated!</h1>

    <Card >
      <template #title><i class="pi pi-cog"></i><em>  Here's what we think will happen</em></template>
      <template #content>
        <ul>
          <li class="list-item" v-for="(line, index) in textResponse" :key="index">{{ line }}</li>
        </ul>
      </template>
      <template #footer>
        <a class="gray" href="https://books.google.it/books/about/Horticultural_Crop_Response_to_Different.html?id=TPmnzgEACAAJ&source=kp_book_description&redir_esc=y">Source: Horticultural Crop Response to Different Environmental and Nutritional Stress - Stefano Marino</a>
      </template>
    </Card>
    <div class="image-container">
      <img :src="plantStore.imageBase64" class="image-first" alt="First image">
      <img :src="plantStore.generatedImageBase64" class="image-second" alt="Second image">
    </div>


    <Accordion value="1">
      <AccordionPanel value="0">
        <AccordionHeader>Old Image</AccordionHeader>
        <AccordionContent>
          <img :src="plantStore.imageBase64" alt="Original Plant Image">
        </AccordionContent>
      </AccordionPanel>
    </Accordion>
  </div>
</template>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playwrite+HU:wght@100..400&family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');


@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

h1 {
  font-family: 'Playwrite HU', sans-serif;
  margin-bottom: 1rem;
}

.list-item {
  margin-bottom: 1rem;
  margin-left: 1.5rem;
  font-size: 110%;
}

ul {
  margin-top: 0.5rem;
}

.gray {
  opacity: 0.7;
}

img {
  margin-top: 2rem;
  max-height: 30rem;
  width: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.image-container {
  position: relative;
  width: 45rem;
  height: 30rem;
  margin-bottom: 10rem;
  object-fit: contain;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image-first {
  opacity: 1;
  animation: fadeOut 2s forwards;
  animation-delay: 1s; /* Optional delay before starting */
}

.image-second {
  opacity: 0;
  animation: fadeIn 2s forwards;
  animation-delay: 1; /* Match delay with fadeOut */
}
</style>
