import React, { useState, useEffect, useMemo } from "react";
import { DateRangePicker as YzDateRangePicker } from "@yz1311/react-native-wheel-picker";
import { BottomSheet, Button } from "heroui-native";
import { View, Text } from "react-native";
import dayjs from "dayjs";
import { toDate } from "@/utils/time";

interface DateRangePickerProps {
  startDate: Date | string;
  endDate: Date | string;
  show?: boolean;
  onClose?: () => void;
  onConfirm?: (start: string, end: string) => void;
}

export default function DateRangePicker({
  startDate,
  endDate,
  show = false,
  onClose,
  onConfirm,
}: DateRangePickerProps) {
  const [tempStart, setTempStart] = useState<Date | undefined>(() => toDate(startDate));
  const [tempEnd, setTempEnd] = useState<Date | undefined>(() => toDate(endDate));

  useEffect(() => {
    setTempStart(toDate(startDate));
    setTempEnd(toDate(endDate));
  }, [startDate, endDate]);

  const isOpen = show;

  const handleClose = () => {
    onClose?.();
  };

  const handleCancel = () => {
    setTempStart(toDate(startDate));
    setTempEnd(toDate(endDate));
    handleClose();
  };

  const handleConfirm = () => {
    const start = dayjs(tempStart).format("YYYY-MM-DD");
    const end = dayjs(tempEnd).format("YYYY-MM-DD");

    onConfirm?.(start, end);
    handleClose();
  };

  const key = useMemo(
    () => `${dayjs(startDate).format("YYYY-MM-DD")}_${dayjs(endDate).format("YYYY-MM-DD")}`,
    [startDate, endDate],
  );

  return (
    <BottomSheet
      isOpen={isOpen}
      onOpenChange={(v) => {
        if (!v) handleClose();
      }}
    >
      <BottomSheet.Portal>
        <BottomSheet.Overlay />

        <BottomSheet.Content>
          <View style={{ width: "100%" }}>
            {/* Header */}
            <View className="flex-row items-center justify-between w-full">
              <Button size="sm" variant="tertiary" onPress={handleCancel}>
                取消
              </Button>

              <Text className="text-gray-800 text-base font-medium">选择日期区间</Text>

              <Button size="sm" onPress={handleConfirm}>
                确认
              </Button>
            </View>

            {/* Range Picker */}
            <YzDateRangePicker
              key={`${dayjs(startDate).valueOf()}_${dayjs(endDate).valueOf()}`}
              showHeader={false}
              startDate={tempStart}
              endDate={tempEnd}
              onValueChange={(start: Date, end: Date) => {
                setTempStart(start);
                setTempEnd(end);
              }}
            />
          </View>
        </BottomSheet.Content>
      </BottomSheet.Portal>
    </BottomSheet>
  );
}