import React, { useEffect, useState } from "react";
import "./Receiver_info_holder.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faLocationDot, faPhone } from "@fortawesome/free-solid-svg-icons";
import Cancel_Order_btn from "../../../common-components/common_btn/cancel_Order_btn/Cancel_Order_btn";

import { encodeId } from "../../../../utils/common";

import { useDispatch, useSelector } from "react-redux";
import { useRouter } from "next/navigation";

function Receiver_info_holder_return({ order }) {
  const navigate = useRouter();

  const handleClick = (id) => {
    navigate.push(`/cancel-order/${encodeId(id)}`);
  };
  const handleClickReturn = (id) => {
    navigate.push(`/return-order/${encodeId(id)}`);
  };
  const dispatch = useDispatch();
  const appSetupdata = useSelector((state) => state.master.app_setup);
  // useEffect(() => {
  //   // Ensure ID is valid before dispatching
  //   dispatch(appSetup());
  // }, [dispatch]);

  const [errorMessage, setErrorMessage] = useState("");

  const isReturnPeriodValid = (updatedAt, returnPeriod) => {
    const updatedDate = new Date(updatedAt);
    const today = new Date();
    const diffInDays = Math.floor(
      (today - updatedDate) / (1000 * 60 * 60 * 24)
    );
    return diffInDays <= Number(returnPeriod);
  };

  const handleReturnClick = () => {
    const returnPeriod = appSetupdata?.return_period;
    const updatedAt = order?.updatedAt;

    const isValid = isReturnPeriodValid(updatedAt, returnPeriod);

    if (!isValid) {
      setErrorMessage(
        "Return period has expired. You can't return this order."
      );
    } else {
      setErrorMessage("");
      navigate.push(`/return-order/${encodeId(order?.id)}`);
    }
  };

  console.log(order?.order_status_id," order?.order_status_id");

  return (
    <>
      <section className="Receiver_info_holder">
        <div className="text_holder">
          <h4>{order?.Product_Order?.User_Address?.first_name}</h4>
          <div className="name_holder">
            <div>
              <div className="icon_holder">
                <FontAwesomeIcon className="info_icon" icon={faPhone} />
              </div>
            </div>
            <p> +91 {order?.Product_Order?.User_Address?.contact_no}</p>
          </div>

          <p>Apartment</p>
          <div className="name_holder">
            <div>
              <div className="icon_holder">
                <FontAwesomeIcon className="info_icon" icon={faLocationDot} />
              </div>
            </div>
            <p>
              {" "}
              {order?.Product_Order?.User_Address?.building},
              {order?.User_Address?.street},
              {
                order?.Product_Order?.User_Address?.Users_Address_Detail?.City
                  ?.name
              }
              ,{" "}
              {
                order?.Product_Order?.User_Address?.Users_Address_Detail?.State
                  ?.name
              }
              ,–{" "}
              {
                order?.Product_Order?.User_Address?.Users_Address_Detail
                  ?.Pincode?.name
              }
              ,{" "}
              {
                order?.Product_Order?.User_Address?.Users_Address_Detail
                  ?.Country?.name
              }
              .
            </p>
          </div>

          {order?.Product_Order?.order_status_id === 11 && (
            <div className="tracking-steps">
              <div className="step completed">
                <div className="step-content">
                  <div
                    className="step-title"
                    style={{ color: "green", fontWeight: 600 }}
                  >
                    💸 Refund Processed Successfully
                  </div>
                  <div className="step-info" style={{ marginTop: "6px" }}>
                    The refund amount has been{" "}
                    <strong>added to your wallet balance</strong>.
                    <br />
                    You can use it for your next purchase or{" "}
                    <strong>withdraw it anytime</strong> from the wallet
                    section. 💳
                    <br />
                    💡 <em>Note:</em> If you selected{" "}
                    <strong>Cash on Delivery (COD)</strong>, no refund is
                    applicable.
                  </div>
                </div>
              </div>
            </div>
          )}

          {order?.order_status_id === 2 && (
            <Cancel_Order_btn
              order={order}
              btnText={"Cancel Order"}
              onClick={() => handleClick(order?.id)}
            />
          )}
          {order?.order_status_id === 6 && (
            <Cancel_Order_btn
              order={order}
              btnText={"Return Order"}
              // onClick={handleReturnClick}
              onClick={() => handleClickReturn(order?.id)}
            />
          )}

          {errorMessage && (
            <p style={{ color: "red", marginTop: "8px" }}>{errorMessage}</p>
          )}
        </div>
      </section>
    </>
  );
}

export default Receiver_info_holder_return;
