import { InformationCircleIcon } from "@heroicons/react/24/outline";
import moment from "moment";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import Input from "../../../../../../../components/Input";
import Label from "../../../../../../../components/Label";
import { changeBadgeBaseProperties } from "../../../../../../../features/badges/badgesSlice";
import formatToLocalDateTime from "../../../../../../../utils/formatToLocalDateTime";

const BadgeValidity = () => {
  const dispatch = useDispatch();
  const { valid_from, valid_to, limited_time_badge } = useSelector((state) => state.badges);

  const handleBadgeSettingPropertiesChange = (name, localValue) => {
    if (!localValue) {
      dispatch(changeBadgeBaseProperties({ name, value: "" }));
      return;
    }
    // Convert LOCAL → UTC before storing
    const utcValue = moment(localValue).utc().format("YYYY-MM-DDTHH:mm");
    dispatch(changeBadgeBaseProperties({ name, value: utcValue }));
  };

  const handleBadgeLimitToggle = (e) => {
    if (!e.target.checked) {
      dispatch(changeBadgeBaseProperties({ name: "valid_to", value: "" }));
      dispatch(changeBadgeBaseProperties({ name: "valid_from", value: "" }));
    }
    dispatch(changeBadgeBaseProperties({ name: "limited_time_badge", value: e.target.checked }));
  };

  useEffect(() => {
    if (valid_from || valid_to) {
      dispatch(changeBadgeBaseProperties({ name: "limited_time_badge", value: true }));
    }
  }, [valid_from, valid_to]);

  return (
    <>
      <div className="wmx-flex wmx-gap-1 wmx-items-center">
        <input id="limited_time_badge" onChange={handleBadgeLimitToggle} checked={limited_time_badge} type="checkbox" />
        <label htmlFor="limited_time_badge" className="wmx-font-medium wmx-select-none wmx-text-[15px] -wmx-mt-[3px]">
          Enable limited-time badge (set start & end time)
        </label>
      </div>
      {limited_time_badge && (
        <div className="wmx-mt-2">
          <div className="wmx-flex wmx-items-center wmx-gap-2 wmx-mt-1">
            <div className="wmx-w-full">
              <Label>Start Date & Time:</Label>
              <Input
                className="wmx-w-full"
                type="datetime-local"
                value={formatToLocalDateTime(valid_from)} // UTC → LOCAL
                onChange={(e) => handleBadgeSettingPropertiesChange("valid_from", e.target.value)}
              />
              <span className="wmx-flex wmx-items-center wmx-mt-1 wmx-gap-1">
                <InformationCircleIcon className="wmx-size-4" />
                <span className="wmx-text-sm wmx-mt-0.5">Leave empty to show immediately</span>
              </span>
            </div>

            <span className="wmx-text-base wmx-font-semibold">To</span>

            <div className="wmx-w-full">
              <Label>End Date & Time:</Label>
              <Input
                type="datetime-local"
                className="wmx-w-full"
                value={formatToLocalDateTime(valid_to)} // UTC → LOCAL
                onChange={(e) => handleBadgeSettingPropertiesChange("valid_to", e.target.value)}
              />
              <span className="wmx-flex wmx-items-center wmx-mt-1 wmx-gap-1">
                <InformationCircleIcon className="wmx-size-4" />
                <span className="wmx-text-sm wmx-mt-0.5">Leave empty for no end date</span>
              </span>
            </div>
          </div>
        </div>
      )}
    </>
  );
};
export default BadgeValidity;
