<template>

  <div class="plant-wrapper">
    <div class="loose">
      <h1>Plant not doing too well?</h1>

      <img :src="plantStateStore.imageBase64" alt="">

      <h3>Here are some tips on how to make it feel better!</h3>
    </div>
    <div class="precise">
      <ProgressBar v-if="isLoading" mode="indeterminate" style="width: 100%; height: 2rem; margin-top: 1rem;"></ProgressBar>
      <Card v-else class="cure-card">
        <template #content>
          <ul>
            <li class="list-item" v-for="(line, index) in textResponse" :key="index">{{ line }}</li>
          </ul>
        </template>
      </Card>
    </div>
  </div>

</template>

<script setup>
import Button from 'primevue/button';

import { usePlantStateStore } from "@/stores/plantState.js";
import Textarea from "primevue/textarea";
const plantStateStore = usePlantStateStore();
import ProgressBar from "primevue/progressbar";
import {computed, ref} from 'vue';
import Card from "primevue/card";

const isLoading = ref(false);
import { onMounted } from 'vue';
onMounted(() => {
  isLoading.value = true;
  plantStateStore.askForCure().finally(() => {
    isLoading.value = false;
  });
});

const textResponse = computed(() =>
  plantStateStore.cure.split('.').filter(line => line.trim() !== '').map(line => line.trim())
);
</script>

<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');


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

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

h3 {
  margin-top: 1rem;
}

.plant-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: start;
  gap: 2rem;
  overflow-y: scroll;
  width: 100%;
}

.loose {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-content: center;
  gap: 1.5rem;
}

.footer {
  display: flex;
  justify-content: flex-end;
}

img {
  max-height: 40rem;
  width: 100%;
  border-radius: 4px;
  object-fit: contain;
}
</style>
