import { useState } from "react";
import { Stack, Button, Center } from "@mantine/core";
import { TimePicker } from "@mantine/dates";

type Time = { hour: number; minute: number };

function fromString(timeString: string): Time {
  const [hour, minute] = timeString.split(":").map(Number);
  return { hour, minute };
}

function intoString(time: Time): string {
  return `${String(time.hour).padStart(2, "0")}:${String(time.minute).padStart(2, "0")}`;
}

export default function Home() {
  const [time, setTime] = useState<Time | null>(null);

  const handleTimeChange = (value: string) => {
    setTime(value ? fromString(value) : null);
  };

  return (
    <Center w="100%" h="100%">
      <Stack>
        <TimePicker
          value={time ? intoString(time) : ""}
          onChange={handleTimeChange}
          withDropdown
        />
        <pre>Time: {JSON.stringify(time, null, 2)}</pre>
        <Button onClick={() => setTime({ hour: 12, minute: 0 })}>
          Set to 12:00
        </Button>
        <Button onClick={() => setTime({ hour: 10, minute: 0 })}>
          Set to 10:00
        </Button>
        <Button onClick={() => setTime(null)}>Clear</Button>
      </Stack>
    </Center>
  );
}