<template>
  <main class="plant-form-container">
    <h3>Feel like being more precise? Insert additional information if you know it</h3>

    <form @submit.prevent="submitForm" class="plant-form">
      <section class="plant-section">
        <Tabs value="0">
          <TabList>
            <Tab header="Morphological" value="0">
              Morphological Characteristics
            </Tab>
            <Tab header="Physiological" value="1">
              Physiological Characteristics
            </Tab>
          </TabList>
          <TabPanels class="plant-tabs">
            <TabPanel header="Morphological" value="0">
              <Card class="plant-card">
                <template #content>
                  <div class="field-grid">
                    <div class="field">
                      <label for="plant_type">Plant Type</label>
                      <InputText v-model="formData.plant_characteristics.morphological.plant_type"
                                 id="plant_type"
                                 class="w-full" />
                      <small>Basil, rosemary etc.</small>
                    </div>

                    <div class="field">
                      <label for="height">Height (cm)</label>
                      <InputNumber v-model="formData.plant_characteristics.morphological.height"
                                   id="height"
                                   :min="0"
                                   class="w-full" />
                      <small>Height of the plant in cm</small>
                    </div>

                    <div class="field">
                      <label for="leaf_color">Leaf Color</label>
                      <InputText v-model="formData.plant_characteristics.morphological.leaf_color"
                                 id="leaf_color"
                                 class="w-full" />
                      <small>Color of the leaves (e.g., green, yellow, purple)</small>
                    </div>

                    <div class="field">
                      <label for="presence_of_flowers">Presence of Flowers</label>
                      <InputSwitch v-model="formData.plant_characteristics.morphological.presence_of_flowers"
                                   id="presence_of_flowers" />
                    </div>

                    <div class="field">
                      <label for="fruit_development">Fruit Development</label>
                      <InputSwitch v-model="formData.plant_characteristics.morphological.fruit_development"
                                   id="fruit_development" />
                    </div>

                    <div class="field">
                      <label for="root_health">Root Health</label>
                      <InputText v-model="formData.plant_characteristics.morphological.root_health"
                                 id="root_health"
                                 class="w-full" />
                      <small>Color and structure of roots (e.g., white and firm)</small>
                    </div>
                  </div>
                </template>
              </Card>
            </TabPanel>

            <TabPanel header="Physiological" value="1">
              <Card class="plant-card">
                <template #content>
                  <div class="field-grid">
                    <div class="field">
                      <label for="health_status">Health Status</label>
                      <Dropdown v-model="formData.plant_characteristics.physiological.health_status"
                                :options="healthOptions"
                                placeholder="Select Health Status"
                                class="w-full" />
                    </div>

                    <div class="field">
                      <label for="growth_rate">Growth Rate (cm/week)</label>
                      <InputNumber v-model="formData.plant_characteristics.physiological.growth_rate"
                                   id="growth_rate"
                                   :min="0"
                                   :step="0.1"
                                   class="w-full" />
                    </div>

                    <div class="field">
                      <label for="photosynthesis_rate">Photosynthesis Rate (%)</label>
                      <Slider v-model="formData.plant_characteristics.physiological.photosynthesis_rate"
                              :min="0"
                              :max="100"
                              class="w-full" />
                      <InputNumber v-model="formData.plant_characteristics.physiological.photosynthesis_rate"
                                   :min="0"
                                   :max="100"
                                   class="mt-2" />
                      <small>Efficiency of converting light to energy</small>
                    </div>

                    <div class="field">
                      <label for="transpiration_rate">Transpiration Rate (%)</label>
                      <Slider v-model="formData.plant_characteristics.physiological.transpiration_rate"
                              :min="0"
                              :max="100"
                              class="w-full" />
                      <InputNumber v-model="formData.plant_characteristics.physiological.transpiration_rate"
                                   :min="0"
                                   :max="100"
                                   class="mt-2" />
                      <small>Rate of water movement and evaporation from leaves</small>
                    </div>
                  </div>
                </template>
              </Card>
            </TabPanel>
          </TabPanels>
        </Tabs>
      </section>
    </form>
  </main>
</template>

<script setup>
import { ref } from 'vue';
import { usePlantStateStore } from '@/stores/plantState';
import TabPanel from 'primevue/tabpanel';
import Card from 'primevue/card';
import InputNumber from 'primevue/inputnumber';
import InputText from 'primevue/inputtext';
import InputSwitch from 'primevue/inputswitch';
import Dropdown from 'primevue/dropdown';
import Button from 'primevue/button';
import Slider from 'primevue/slider';
import TabList from 'primevue/tablist';
import Tab from 'primevue/tab';
import Tabs from 'primevue/tabs';
import TabPanels from 'primevue/tabpanels';

const plantStore = usePlantStateStore();

const healthOptions = [
  "Thriving",
  "Healthy",
  "Stressed",
  "Wilting",
  "Diseased",
  "Dying",
  "Dead"
];

const formData = plantStore.plantData

const submitForm = () => {
  plantStore.setPlantData(formData.value);
};
</script>

<style scoped>
.plant-form-container {
  width: 100%;
  margin: 0 auto;
}

.plant-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.plant-tabs {
  margin-bottom: 1.5rem;
}

.plant-card {
  margin-top: 1rem;
  padding: 1rem;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

small {
  color: var(--text-color-secondary);
  font-size: 0.875rem;
}

.form-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

h3 {
  margin-bottom: 2rem;
}

label {
  margin-bottom: 3px;
}
</style>
