<template>
  <div class="control-panel">
    <button @click="newMeasurments" class="action-button" data-cy="new-measurements-button">
        New Measurments
    </button>

    <button
        @click="fetchData"
        class="refresh-button"
        data-cy="fetch-measurements-button"
        >
        Fetch Measurments
    </button>
  </div>

  <div>
      <span>
        <multiselect
        data-cy="user-mulitselect"
        id="user-select"
        v-model="manager.selected_user"
        :options="manager.user_options"
        :multiple="false"
        :group-select="false"
        placeholder="User"
        track-by="user"
        label="user"
        </multiselect>
      </span>
      <span>
        <multiselect
        data-cy="room-mulitselect"
        id="room-select"
        v-model="manager.selected_room"
        :options="manager.room_options"
        :multiple="false"
        :group-select="false"
        placeholder="Room"
        track-by="room"
        label="room"
        </multiselect>
      </span>
      <span>
        <multiselect
        data-cy="device-mulitselect"
        id="device-select"
        v-model="manager.selected_device"
        :options="manager.device_options"
        :close-on-select="true"
        :multiple="false"
        :group-select="false"
        placeholder="Device"
        track-by="device"
        label="device"
        </multiselect>
      </span>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Multiselect from "vue-multiselect";
import "vue-multiselect/dist/vue-multiselect.css"; // Add
import { ref } from "vue";
import { TimeSeriesManager } from "@/Measures/TimeSeriesManager";


export default defineComponent({
  name: "ControlPanel",
  props: {
    manager: {
      type: TimeSeriesManager,
      required: true,
    },
  },
  components: {
    Multiselect,
  },
  methods: {
    newMeasurments() {
      // Implement your functionality here
      console.log("New measurments clicked");
      this.manager
        .getNewValue()
        .then((result) => {})
        .catch((error) => {
          console.error("Error asking data:", error);
        });
    },
    fetchData() {
      console.log("Fetch measurments clicked");
      this.manager
        .getTimeSeriesData()
        .then((result) => {})
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },
  },
  mounted() {
    this.fetchData();
  },
});
</script>

<style scoped>
.control-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.5rem;
}

.action-button,
.refresh-button,
.demo-button {
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-button {
  background-color: #3490dc;
  color: white;
}

.action-button:hover {
  background-color: #2779bd;
}

.refresh-button {
  background-color: #38c172;
  color: white;
}

.refresh-button:hover {
  background-color: #2d995b;
}

.demo-button {
  background-color: #f6993f;
  color: white;
}

.demo-button:hover {
  background-color: #e67e22;
}

.button-icon {
  margin-right: 0.5rem;
  font-size: 1.2rem;
}

.sensor-selector h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  color: #333;
}

.sensor-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sensor-option {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.sensor-option input {
  margin-right: 0.5rem;
  cursor: pointer;
}
</style>
