<template>
  <main class="plant-form-container">
    <h3>If you would like to specify specific environment information you can do so, if not, we have some common defaults</h3>

    <form @submit.prevent="submitForm" class="plant-form">
      <section class="environmental-section">
        <Tabs value="0">
          <TabList>
            <Tab header="Atmosphere" value="0">
              Atmosphere
            </Tab>
            <Tab header="Soil" value="1">
              Soil
            </Tab>
            <Tab header="Light" value="2">
              Light
            </Tab>
            <Tab header="Water" value="3">
              Water
            </Tab>
          </TabList>
          <TabPanels class="conditions-tabs" >
            <TabPanel header="Atmosphere" value="0">
              <Card class="condition-card">
                <template #content>
                  <div class="field-grid">
                    <div class="field">
                      <label for="air_temperature">Air Temperature (°C)</label>
                      <Slider v-model="formData.environmental_characteristics.atmosphere.air_temperature"
                              :min="-50" :max="50"
                              :step="1"
                              class="w-full" />
                      <InputNumber v-model="formData.environmental_characteristics.atmosphere.air_temperature"
                                   :min="-50" :max="50"
                                   class="mt-2" />
                      <small>The ambient temperature surrounding the plant (-50 to 50°C)</small>
                    </div>

                    <div class="field">
                      <label for="relative_humidity">Relative Humidity (%)</label>
                      <Slider v-model="formData.environmental_characteristics.atmosphere.relative_humidity"
                              :min="0" :max="100"
                              class="w-full" />
                      <InputNumber v-model="formData.environmental_characteristics.atmosphere.relative_humidity"
                                   :min="0" :max="100"
                                   class="mt-2" />
                      <small>The amount of water vapor in the air (0-100%)</small>
                    </div>

                    <div class="field">
                      <label for="co2_concentration">Carbon Dioxide Concentration (ppm)</label>
                      <Slider v-model="formData.environmental_characteristics.atmosphere.co2_concentration"
                              :min="0" :max="5000"
                              :step="100"
                              class="w-full" />
                      <InputNumber v-model="formData.environmental_characteristics.atmosphere.co2_concentration"
                                   :min="0" :max="5000"
                                   class="mt-2" />
                      <small>Concentration of CO₂ in the atmosphere (0-5000 ppm)</small>
                    </div>

                    <div class="field">
                      <label for="air_pressure">Atmospheric Pressure (kPa)</label>
                      <Slider v-model="formData.environmental_characteristics.atmosphere.air_pressure"
                              :min="50" :max="150"
                              :step="1"
                              class="w-full" />
                      <InputNumber v-model="formData.environmental_characteristics.atmosphere.air_pressure"
                                   :min="50" :max="150"
                                   class="mt-2" />
                      <small>Atmospheric pressure (50-150 kPa)</small>
                    </div>

                    <div class="field">
                      <label for="wind_speed">Wind Speed (m/s)</label>
                      <Slider v-model="formData.environmental_characteristics.atmosphere.wind_speed"
                              :min="0" :max="20"
                              :step="0.1"
                              class="w-full" />
                      <InputNumber v-model="formData.environmental_characteristics.atmosphere.wind_speed"
                                   :min="0" :max="20"
                                   :step="0.1"
                                   class="mt-2" />
                      <small>Speed of air movement (0-20 m/s)</small>
                    </div>
                  </div>
                </template>
              </Card>
            </TabPanel>

            <TabPanel header="Soil"  value="1">
              <Card class="condition-card">
                <template #content>
                  <div class="field-grid">
                    <div class="field">
                      <label for="soil_temperature">Soil Temperature (°C)</label>
                      <Slider v-model="formData.environmental_characteristics.soil.soil_temperature"
                              :min="-50" :max="50"
                              class="w-full" />
                      <InputNumber v-model="formData.environmental_characteristics.soil.soil_temperature"
                                   :min="-50" :max="50"
                                   class="mt-2" />
                      <small>The temperature of the soil (-50 to 50°C)</small>
                    </div>

                    <div class="field">
                      <label for="soil_acidity">Soil Acidity (pH)</label>
                      <Slider v-model="formData.environmental_characteristics.soil.soil_acidity"
                              :min="0" :max="14"
                              :step="0.1"
                              class="w-full" />
                      <InputNumber v-model="formData.environmental_characteristics.soil.soil_acidity"
                                   :min="0" :max="14"
                                   :step="0.1"
                                   class="mt-2" />
                      <small>The acidity or alkalinity of the soil (0-14 pH)</small>
                    </div>

                    <div class="field">
                      <label for="soil_moisture">Soil Moisture (%)</label>
                      <Slider v-model="formData.environmental_characteristics.soil.soil_moisture"
                              :min="0" :max="100"
                              class="w-full" />
                      <InputNumber v-model="formData.environmental_characteristics.soil.soil_moisture"
                                   :min="0" :max="100"
                                   class="mt-2" />
                      <small>The amount of water held in the soil (0-100%)</small>
                    </div>

                    <div class="field">
                      <label for="nutrients">Nutrients</label>
                      <MultiSelect v-model="formData.environmental_characteristics.soil.nutrients"
                                   :options="nutrientOptions"
                                   display="chip"
                                   placeholder="Select Nutrients"
                                   class="w-full" />
                      <small>Essential minerals for plant growth</small>
                    </div>
                  </div>
                </template>
              </Card>
            </TabPanel>

            <TabPanel header="Light"  value="2">
              <Card class="condition-card">
                <template #content>
                  <div class="field-grid">
                    <div class="field">
                      <label for="light_intensity">Light Intensity (PPFD)</label>
                      <Slider v-model="formData.environmental_characteristics.light.light_intensity"
                              :min="0" :max="2000"
                              :step="50"
                              class="w-full" />
                      <InputNumber v-model="formData.environmental_characteristics.light.light_intensity"
                                   :min="0" :max="2000"
                                   class="mt-2" />
                      <small>Amount of light available for photosynthesis (0-2000 μmol/m²/s)</small>
                    </div>

                    <div class="field">
                      <label for="photoperiod">Photoperiod (hours/day)</label>
                      <Slider v-model="formData.environmental_characteristics.light.photoperiod"
                              :min="0" :max="24"
                              class="w-full" />
                      <InputNumber v-model="formData.environmental_characteristics.light.photoperiod"
                                   :min="0" :max="24"
                                   class="mt-2" />
                      <small>Duration of light the plant receives (0-24 hours)</small>
                    </div>
                  </div>
                </template>
              </Card>
            </TabPanel>

            <TabPanel header="Water"  value="3">
              <Card class="condition-card">
                <template #content>
                  <div class="field">
                    <label for="watering_frequency">Watering Frequency (times/week)</label>
                    <Slider v-model="formData.environmental_characteristics.water.watering_frequency"
                            :min="0" :max="14"
                            class="w-full" />
                    <InputNumber v-model="formData.environmental_characteristics.water.watering_frequency"
                                 :min="0" :max="14"
                                 class="mt-2" />
                    <small>How often the plant is watered (0-14 times/week)</small>
                  </div>
                </template>
              </Card>
            </TabPanel>
          </TabPanels>
        </Tabs>
      </section>
    </form>
  </main>
</template>

<script setup>
import { ref } from 'vue';
import { usePlantStateStore } from '@/stores/plantState';
import TabView from 'primevue/tabview';
import TabPanel from 'primevue/tabpanel';
import Card from 'primevue/card';
import Slider from 'primevue/slider';
import InputNumber from 'primevue/inputnumber';
import MultiSelect from 'primevue/multiselect';
import Button from 'primevue/button';
import Tab from "primevue/tab";
import TabList from "primevue/tablist";
import TabPanels from "primevue/tabpanels";
import Tabs from "primevue/tabs";


const plantStore = usePlantStateStore();

const nutrientOptions = [
  "Nitrogen (N)",
  "Phosphorus (P)",
  "Potassium (K)",
  "Calcium (Ca)",
  "Magnesium (Mg)",
  "Sulfur (S)"
];

const formData = plantStore.conditionData

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

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

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

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

.condition-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: 1rem;
}

label {
  margin-bottom: 3px;
}

:deep(.p-slider) {
  margin-bottom: 5px;
}
</style>
