// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import DatePicker from "react-mobile-datepicker";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/button";
import dayjs from "@/utils/dayjs";
import { useHourFormat } from "@/hook/use-hour-format";
import { formatJalali } from "@/utils/jalali";

const dateConfig = {
  date: {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    format: (value: Date) => formatJalali(value, "jD jMMMM"),
    caption: "روز",
    step: 1,
  },
  hour: {
    format: "hh",
    caption: "ساعت",
    step: 1,
  },
  minute: {
    format: "mm",
    caption: "دقیقه",
    step: 1,
  },
};

export const DeliveryTime = ({
  onSelect,
  defaultValue,
}: {
  onSelect: (selectedDate: Date) => void;
  defaultValue: Date;
}) => {
  const { t } = useTranslation();
  const { hourFormat } = useHourFormat();
  const [selectedTime, setSelectedTime] = useState(defaultValue);

  return (
    <div className="">
      <div className="p-5">
        <h5 className="text-[22px] font-semibold ">{t("delivery.date")}</h5>
      </div>
      <DatePicker
        min={new Date(Date.now())}
        max={dayjs().add(1, "month").toDate()}
        dateConfig={dateConfig}
        confirmText=""
        cancelText=""
        theme="ios"
        isOpen
        isPopup={false}
        value={selectedTime}
        onChange={(value: Date) => setSelectedTime(value)}
      />
      <div className="p-5">
        <Button onClick={() => onSelect(selectedTime)} fullWidth>
          {t("delivery.date")} -{" "}
          {`${formatJalali(selectedTime, "jD jMMMM")}، ${dayjs(selectedTime).format(hourFormat)}`}
        </Button>
      </div>
    </div>
  );
};
