import { DateTimePicker } from "@expo/ui/community/datetime-picker";
import { useState } from "react";
import { Modal, Platform, Pressable, Text, View } from "react-native";
import { autopilotTimeOfDay } from "../lib/autopilot";
import { useI18n } from "../lib/i18n";
import { useMobileTokens, useResolvedAppearance } from "../lib/native";

/**
 * The native time picker for "Until a time". Android opens its clock dialog; iOS shows the wheel in
 * a sheet with Start. Either way the caller gets "HH:MM" and unmounts the picker.
 */
export function AutopilotTimePicker({
  onPick,
  onClose,
}: {
  onPick: (time: string) => void;
  onClose: () => void;
}) {
  const tokens = useMobileTokens();
  const colorScheme = useResolvedAppearance();
  const { t } = useI18n();
  const [value, setValue] = useState(() => {
    const morning = new Date();
    morning.setHours(8, 0, 0, 0);
    return morning;
  });

  if (Platform.OS === "android") {
    return (
      <DateTimePicker
        mode="time"
        value={value}
        onValueChange={(_event, date) => onPick(autopilotTimeOfDay(date))}
        onDismiss={onClose}
      />
    );
  }

  return (
    <Modal visible animationType="slide" presentationStyle="pageSheet" onRequestClose={onClose}>
      <View style={{ flex: 1, backgroundColor: tokens.background, padding: 20, gap: 12 }}>
        <View
          style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}
        >
          <Pressable accessibilityRole="button" onPress={onClose} hitSlop={12}>
            <Text style={{ color: tokens.mutedForeground, fontSize: 17 }}>{t("Cancel")}</Text>
          </Pressable>
          <Text style={{ color: tokens.foreground, fontSize: 17, fontWeight: "600" }}>
            {t("Until when?")}
          </Text>
          <Pressable
            accessibilityRole="button"
            onPress={() => onPick(autopilotTimeOfDay(value))}
            hitSlop={12}
          >
            <Text style={{ color: tokens.foreground, fontSize: 17, fontWeight: "600" }}>
              {t("Start")}
            </Text>
          </Pressable>
        </View>
        <DateTimePicker
          mode="time"
          display="spinner"
          value={value}
          themeVariant={colorScheme}
          onValueChange={(_event, date) => setValue(date)}
        />
      </View>
    </Modal>
  );
}