<!-- src/components/ChartComponent.vue -->
<template>
  <div v-if="isTimeSeries" class="chart-wrapper">
    <Scatter data-cy="main-chart" :data="chartData" :options="chartOptions" />
  </div>
  <div v-else class="no-data-state" data-cy="no-data-display">
    No data to display
  </div>
  <br />
</template>

<script lang="ts">
import { defineComponent, PropType, computed, proxyRefs } from "vue";
import {
  Chart as ChartJS,
  LinearScale,
  PointElement,
  LineElement,
  Tooltip,
  Legend,
  TimeScale,
  ChartOptions,
  ScatterDataPoint,
} from "chart.js";
import "chartjs-adapter-date-fns"; // Import the date adapter
import { Scatter } from "vue-chartjs";
import { Serie } from "../Measures/Serie";
import { TimeSeriesManager } from "../Measures/TimeSeriesManager";
import { Colors } from "../Measures/Utils";

// Register Chart.js components
ChartJS.register(
  LinearScale,
  PointElement,
  LineElement,
  Tooltip,
  Legend,
  TimeScale
);

export default defineComponent({
  name: "ChartComponent",
  components: {
    Scatter,
  },
  props: {
    manager: {
      type: Object as PropType<TimeSeriesManager>,
      required: true,
    },
  },
  setup(props) {
    const chartData = computed(() => {
      if ((props.manager as TimeSeriesManager).series.value as Serie[]) {
        let series_prepared = (props.manager.series.value as Serie[]).map(
          (s: Serie) => {
            return s.getSerie();
          }
        );

        return {
          datasets: series_prepared,
        };
      } else {
        return {
          datasets: [],
        };
      }
    });

    const chartOptions: ChartOptions<"scatter"> = {
      responsive: true,
      maintainAspectRatio: true,
      scales: {
        x: {
          type: "time",
          position: "bottom",
          title: {
            text: "Time",
            display: true,
          },
          time: {
            unit: "minute", // Adjust the unit as needed (e.g., "minute", "hour", "day")
            displayFormats: {
              second: "HH:mm:ss", // Format for seconds
              minute: "MMM-dd HH:mm", // Format for minutes
              hour: "MMM dd HH:mm", // Format for hours
              day: "MMM dd", // Format for days
            },
          },
          grid: {
            drawOnChartArea: true, // only want the grid lines for one axis to show up
          },
        },
        temperature: {
          type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
          position: "left",
          title: {
            text: "Temperature [°C]",
            display: true,
          },
          ticks: {
            color: Colors.BLUE,
          },
          grid: {
            drawOnChartArea: true, // only want the grid lines for one axis to show up
          },
          min: -10,
          max: 40,
        },
        humidity: {
          type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
          position: "right",
          title: {
            text: "Humidity [%]",
            display: true,
          },
          ticks: {
            color: Colors.GREEN,
          },
          grid: {
            drawOnChartArea: true, // only want the grid lines for one axis to show up
          },
          min: 0,
          max: 100,
        },
      },
    };

    const isTimeSeries = computed(() => {
      return (
        props.manager.series.value &&
        (props.manager.series.value as Serie[]).length > 0
      );
    });

    return {
      chartOptions,
      chartData,
      isTimeSeries,
    };
  },
});
</script>

<style scoped>
.chart-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-container {
  flex: 1;
  min-height: 300px;
}

.loading-state,
.error-state,
.no-data-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 1.2rem;
  color: #666;
}

.error-state {
  color: #dc3545;
}
</style>
