import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";

dayjs.extend(relativeTime);

type SensorReading = {
  val: number;
  unit: string;
  when: dayjs.Dayjs;
  title: string;
};

const mockSensorReadings: SensorReading[] = [
  {
    title: "Temperature",
    val: 22.5,
    unit: "°C",
    when: dayjs().subtract(2, "minute"),
  },
  {
    title: "Humidity",
    val: 45.3,
    unit: "%",
    when: dayjs().subtract(1, "minute"),
  },
  { title: "Pressure", val: 1013.25, unit: "hPa", when: dayjs() },
  {
    title: "PM 1.0",
    val: 8.2,
    unit: "µg/m³",
    when: dayjs().subtract(30, "second"),
  },
  {
    title: "PM 2.5",
    val: 12.7,
    unit: "µg/m³",
    when: dayjs().subtract(30, "second"),
  },
  {
    title: "PM 10",
    val: 24.1,
    unit: "µg/m³",
    when: dayjs().subtract(45, "second"),
  },
];

function SensorReadingCard({ reading }: { reading: SensorReading }) {
  const fontSize = reading.unit.length > 2 ? "text-4xl" : "text-6xl";
  return (
    <div class="rounded-md bg-green-300 p-4 flex flex-col justify-center items-center">
      <h1 class={`${fontSize} font-sans mb-4`}>
        {reading.val} {reading.unit}
      </h1>
      <hr class="border-t border-black w-full my-2" />
      <h2>{reading.title}</h2>
      <p class="text-sm">updated: {reading.when.fromNow()}</p>
    </div>
  );
}

function App() {
  // const [count, setCount] = createSignal(0)

  return (
    <div class="h-screen flex flex-col">
      <header class="h-8 bg-pink-100"></header>
      <main class="h-full grid grid-cols-3 grid-rows-3 gap-8 p-8">
        {mockSensorReadings.map((reading) => (
          <SensorReadingCard reading={reading} />
        ))}
      </main>
      <footer class="px-2 h-8 flex items-center text-sm">
        <a
          class="underline"
          href="https://git.travisshears.com/travisshears/weather-portal"
        >
          Quellcode
        </a>
      </footer>
    </div>
  );
}

export default App;