import { useState } from "react";
import { Platform, Modal, Pressable, Text, View } from "react-native";
import DateTimePicker, {
  DateTimePickerEvent,
} from "@react-native-community/datetimepicker";
import { useThemeStore } from "../stores/ThemeStore";
import { THEMES } from "../Themes";

type DateTimePickerButtonProps = {
  mode: "date" | "time";
  className?: string;
  label?: string;
  value: Date;
  onChange: (date: Date) => void;
};

const DateTimePickerButton = ({
  mode,
  label,
  value,
  onChange,
  className,
}: DateTimePickerButtonProps) => {
  const { theme } = useThemeStore();
  const [showPicker, setShowPicker] = useState(false);
  const isDark = theme === THEMES.defaultDark;

  const handleChange = (event: DateTimePickerEvent, selectedDate?: Date) => {
    if (Platform.OS === "android") {
      setShowPicker(false);
    }
    if (event.type === "set" && selectedDate) {
      onChange(selectedDate);
    }
  };

  const formattedValue =
    mode === "date"
      ? value.toLocaleDateString("de-DE", {
          day: "2-digit",
          month: "2-digit",
          year: "numeric",
        })
      : value.toLocaleTimeString("de-DE", {
          hour: "2-digit",
          minute: "2-digit",
        });

  return (
    <View className={className}>
      {label && (
        <Text style={{ color: theme.textSecondary }} className="text-sm mb-1">
          {label}
        </Text>
      )}
      <Pressable
        onPress={() => setShowPicker(true)}
        className="w-full rounded-lg px-3 py-2 border"
        style={{
          backgroundColor: theme.messageBorderBg,
          borderColor: theme.borderPrimary,
        }}
      >
        <Text style={{ color: theme.textPrimary }} className="text-base">
          {formattedValue}
        </Text>
      </Pressable>

      {Platform.OS === "ios" ? (
        <Modal
          visible={showPicker}
          transparent
          animationType="fade"
          onRequestClose={() => setShowPicker(false)}
        >
          <Pressable
            className="flex-1 justify-end"
            style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
            onPress={() => setShowPicker(false)}
          >
            <View
              style={{ backgroundColor: theme.secondaryBg }}
              className="rounded-t-2xl"
            >
              <View className="flex-row justify-end p-2">
                <Pressable onPress={() => setShowPicker(false)} className="p-2">
                  <Text
                    style={{ color: theme.chatBot }}
                    className="text-lg font-semibold"
                  >
                    Fertig
                  </Text>
                </Pressable>
              </View>
              <DateTimePicker
                value={value}
                mode={mode}
                display="spinner"
                onChange={handleChange}
                locale="de-DE"
                is24Hour={mode === "time"}
                accentColor={theme.chatBot}
                textColor={theme.textPrimary}
                themeVariant={isDark ? "dark" : "light"}
              />
            </View>
          </Pressable>
        </Modal>
      ) : (
        showPicker && (
          <DateTimePicker
            value={value}
            mode={mode}
            display="default"
            onChange={handleChange}
            is24Hour={mode === "time"}
            accentColor={theme.chatBot}
            textColor={theme.textPrimary}
            themeVariant={isDark ? "dark" : "light"}
          />
        )
      )}
    </View>
  );
};

// Convenience wrappers for simpler usage
export const DatePickerButton = (
  props: Omit<DateTimePickerButtonProps, "mode">,
) => <DateTimePickerButton {...props} mode="date" />;

export const TimePickerButton = (
  props: Omit<DateTimePickerButtonProps, "mode">,
) => <DateTimePickerButton {...props} mode="time" />;

export default DateTimePickerButton;
