import React, { useCallback, useState } from "react";
import { Platform, Pressable, View } from "react-native";
import DateTimePicker, { type DateTimePickerEvent } from "@react-native-community/datetimepicker";
import { cn, useThemeColor } from "heroui-native";
import { CalendarIcon } from "../helpers/icons";
import { useNTheme } from "../hooks/useNTheme";
import { NText } from "./NText";

export interface NDatePickerProps {
  value: Date;
  onChange: (date: Date) => void;
  label?: string;
  mode?: "date" | "time" | "datetime";
  display?: "default" | "spinner" | "compact" | "inline";
  minimumDate?: Date;
  maximumDate?: Date;
  disabled?: boolean;
  className?: string;
  labelClassName?: string;
}

export const NDatePicker = React.memo<NDatePickerProps>(
  ({
    value,
    onChange,
    label,
    mode = "date",
    display,
    minimumDate,
    maximumDate,
    disabled = false,
    className,
    labelClassName,
  }) => {
    const { isDarkMode } = useNTheme();
    const [mutedColor] = useThemeColor(["muted"]);
    const isIOS = Platform.OS === "ios";
    const [showPicker, setShowPicker] = useState(isIOS);

    const handleChange = useCallback(
      (_: DateTimePickerEvent, date?: Date) => {
        if (!isIOS) setShowPicker(false);
        if (date) onChange(date);
      },
      [onChange, isIOS],
    );

    const displayText = mode === "time" ? value.toLocaleTimeString() : value.toLocaleDateString();
    const resolvedDisplay = display ?? (isIOS ? "compact" : "default");

    return (
      <View className={cn("mb-3 gap-1.5", className)}>
        {label && (
          <NText className={cn("px-1.5 text-base font-medium text-foreground", labelClassName)}>
            {label}
          </NText>
        )}
        {!isIOS && (
          <Pressable
            onPress={() => !disabled && setShowPicker(true)}
            className={cn(
              "min-h-12 justify-center rounded-2xl border-[1.5px] border-field-border bg-field px-3",
              disabled && "opacity-50",
            )}
          >
            <View className="flex-row items-center justify-between">
              <NText className="text-[16px]">{displayText}</NText>
              <CalendarIcon size={18} color={mutedColor} />
            </View>
          </Pressable>
        )}
        {showPicker && (
          <DateTimePicker
            value={value}
            mode={mode}
            display={resolvedDisplay}
            minimumDate={minimumDate}
            maximumDate={maximumDate}
            disabled={disabled}
            themeVariant={isDarkMode ? "dark" : "light"}
            onChange={handleChange}
          />
        )}
      </View>
    );
  },
);

NDatePicker.displayName = "NDatePicker";