import Header from "@/components/header/Header";
import DashboardLayout from "@/components/Layout/DashboardLayout";
import PreviousButton from "@/components/previousBtn/previousButton";
import UserInformation from "@/components/userInformation/userInformation";
import styles from "@/styles/modules/userManagement.module.css";
import { useAppSelector } from "@/utils/Redux-Toolkit/hooks";
import Image from "next/image";
import React, { useEffect, useState } from "react";

const Detail = () => {
  // State
  const [taskDetail, setTaskDetail] = useState<
    { title: string; value: string | number | boolean | undefined }[]
  >([]);
  const [orderDetail, setOrderDetail] = useState<
    { title: string; value: string | number | boolean | undefined }[]
  >([]);

  // Redux
  const data = useAppSelector((e) => e.paymentSlice);

  //TransectionHistory
  function convertMinutesToHours(minutes: number) {
    const hours = Math.floor(minutes / 60);
    const remainingMinutes = minutes % 60;

    if (hours > 0 && remainingMinutes > 0) {
      return `${hours} hour(s) and ${remainingMinutes} minute(s)`;
    } else if (hours > 0) {
      return `${hours} hour(s)`;
    } else {
      return `${remainingMinutes} minute(s)`;
    }
  }

  useEffect(() => {
    const TaskDetail = [
      {
        title: "Transaction ID",
        value: data?.captureId ? data?.captureId : "N/A",
      },
      {
        title: "Title",
        value: data?.assignmentId?.title,
      },
      {
        title: "Location",
        value: data?.assignmentId?.location,
      },
      {
        title: "Address",
        value: data?.assignmentId?.address,
      },
      {
        title: "Duration",
        value: data?.assignmentId?.durationTime,
      },
      {
        title: "Created At",
        value: data?.assignmentId?.createdAt?.length
          ? new Date(data?.assignmentId?.createdAt).toLocaleString()
          : "---",
      },
      {
        title: "Start Date and Time",
        // value: `${data?.assignmentId?.startDate}, ${data?.assignmentId?.startTime}`, //"10-08-2024, 16:00"
        value: `${
          data?.assignmentId?.startDate
            ? `${data?.assignmentId?.startDate} ${
                data?.assignmentId?.startTime &&
                data?.assignmentId?.startTime &&
                data?.assignmentId?.startTime.toString() !== "0"
                  ? `, ${data?.assignmentId?.startTime}`
                  : ""
              }`
            : "Flexible"
        }`, //"10-08-2024, 16:00"
      },
      {
        title: "End Date",
        value: data?.assignmentId?.endDate,
      },
      {
        title: "Description",
        value: data?.assignmentId?.description,
      },
      {
        title: "Tip",
        value: data?.assignmentId?.tip,
      },
      {
        title: "Status",
        value: data?.assignmentId?.status,
      },
      {
        title: "Is Paid",
        value: data?.assignmentId?.isPaid ? "True" : "False",
      },
      {
        title: "Cancel By",
        value: data?.assignmentId?.cancelBy?.length
          ? data?.assignmentId?.cancelBy
          : "---",
      },
      {
        title: "Cancel Reason",
        value: data?.assignmentId?.cancelReason?.length
          ? data?.assignmentId?.cancelReason
          : "---",
      },
    ];

    const OrderDetail = [
      {
        title: "Order Id",
        value: data?.orderId,
      },
      {
        title: "Amount",
        value: data?.amount ? `$${data?.amount.toFixed(3)}` : "---",
      },
      {
        title: "Platform Fee",
        value: data?.platformFee ? `$${data?.platformFee}` : "---",
      },
      {
        title: "Commission",
        value: data?.commission ? `$${data?.commission}` : "---",
      },
      {
        title: "Currency",
        value: data?.currency,
      },
      {
        title: "Purpose",
        value: data?.purpose,
      },
      {
        title: "Order Status",
        value: data?.orderStatus,
      },
      {
        title: "Created At",
        value: data?.createdAt?.length
          ? new Date(data?.createdAt).toLocaleString()
          : "---",
      },
    ];

    setOrderDetail(OrderDetail);
    setTaskDetail(TaskDetail);
  }, [data]);

  return (
    <DashboardLayout>
      <Header />
      <div className="mainContent">
        <div className={styles.topPart}>
          <div className={styles.leftSide}>
            <PreviousButton />
            <h1>Detail</h1>
          </div>
        </div>

        <div className={styles.mainContent}>
          <div className={styles.colOne}>
            <h1>Assignment</h1>
            <div className={styles.container}>
              <UserInformation
                data={{ userInformation: taskDetail }}
                padding={"14px"}
              />
            </div>
          </div>

          <div className={styles.colOne}>
            <h1>Receipt</h1>
            <div className={styles.container}>
              <UserInformation
                data={{ userInformation: orderDetail }}
                padding={"14px"}
              />
            </div>
          </div>

          <div className={styles.colThree}>
            <div className={styles.mainCard}>
              <h1>Payer</h1>

              <div className={styles.Card}>
                <div className={styles.CardImage}>
                  <Image
                    src={`${
                      data?.payerId?.image ??
                      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT1oyt9166XWnxUIF4AgPIJSA2AfNh1ebiRig&s"
                    }`}
                    width={100}
                    height={100}
                    alt=""
                  />
                  <div className={styles.tag}>
                    {data?.payerId?.userType === "client" ? (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 448 512"
                        style={{ width: "12px", fill: "#fff" }}
                      >
                        <path d="M96 128a128 128 0 1 0 256 0A128 128 0 1 0 96 128zm94.5 200.2l18.6 31L175.8 483.1l-36-146.9c-2-8.1-9.8-13.4-17.9-11.3C51.9 342.4 0 405.8 0 481.3c0 17 13.8 30.7 30.7 30.7l131.7 0c0 0 0 0 .1 0l5.5 0 112 0 5.5 0c0 0 0 0 .1 0l131.7 0c17 0 30.7-13.8 30.7-30.7c0-75.5-51.9-138.9-121.9-156.4c-8.1-2-15.9 3.3-17.9 11.3l-36 146.9L238.9 359.2l18.6-31c6.4-10.7-1.3-24.2-13.7-24.2L224 304l-19.7 0c-12.4 0-20.1 13.6-13.7 24.2z" />
                      </svg>
                    ) : data?.payerId?.userType === "waiter" ? (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 512 512"
                        style={{ width: "12px", fill: "#fff" }}
                      >
                        <path d="M216 64c-13.3 0-24 10.7-24 24s10.7 24 24 24l16 0 0 33.3C119.6 157.2 32 252.4 32 368l448 0c0-115.6-87.6-210.8-200-222.7l0-33.3 16 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-40 0-40 0zM24 400c-13.3 0-24 10.7-24 24s10.7 24 24 24l464 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L24 400z" />
                      </svg>
                    ) : (
                      ""
                    )}
                  </div>
                </div>

                <div>
                  <h1>
                    {data?.payerId?.firstname
                      ? `${data?.payerId?.firstname} ${data?.payerId?.lastname}`
                      : "---"}
                  </h1>
                  <a
                    href={`${
                      data?.payerId?.email
                        ? `mailto:${data?.payerId?.email}`
                        : "#"
                    }`}
                  >
                    {data?.payerId?.email ? `${data?.payerId?.email}` : "---"}
                  </a>
                </div>
              </div>
            </div>

            <div className={styles.mainCard}>
              <h1>Payee</h1>

              <div className={styles.Card}>
                <div className={styles.CardImage}>
                  <Image
                    src={`${
                      data?.payeeId?.image ??
                      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT1oyt9166XWnxUIF4AgPIJSA2AfNh1ebiRig&s"
                    }`}
                    width={100}
                    height={100}
                    alt=""
                  />
                  <div className={styles.tag}>
                    {data?.payeeId?.userType === "client" ? (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 448 512"
                        style={{ width: "12px", fill: "#fff" }}
                      >
                        <path d="M96 128a128 128 0 1 0 256 0A128 128 0 1 0 96 128zm94.5 200.2l18.6 31L175.8 483.1l-36-146.9c-2-8.1-9.8-13.4-17.9-11.3C51.9 342.4 0 405.8 0 481.3c0 17 13.8 30.7 30.7 30.7l131.7 0c0 0 0 0 .1 0l5.5 0 112 0 5.5 0c0 0 0 0 .1 0l131.7 0c17 0 30.7-13.8 30.7-30.7c0-75.5-51.9-138.9-121.9-156.4c-8.1-2-15.9 3.3-17.9 11.3l-36 146.9L238.9 359.2l18.6-31c6.4-10.7-1.3-24.2-13.7-24.2L224 304l-19.7 0c-12.4 0-20.1 13.6-13.7 24.2z" />
                      </svg>
                    ) : data?.payeeId?.userType === "waiter" ? (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 512 512"
                        style={{ width: "12px", fill: "#fff" }}
                      >
                        <path d="M216 64c-13.3 0-24 10.7-24 24s10.7 24 24 24l16 0 0 33.3C119.6 157.2 32 252.4 32 368l448 0c0-115.6-87.6-210.8-200-222.7l0-33.3 16 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-40 0-40 0zM24 400c-13.3 0-24 10.7-24 24s10.7 24 24 24l464 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L24 400z" />
                      </svg>
                    ) : (
                      ""
                    )}
                  </div>
                </div>

                <div>
                  <h1>
                    {data?.payeeId?.firstname
                      ? `${data?.payeeId?.firstname} ${data?.payeeId?.lastname}`
                      : "---"}
                  </h1>
                  <a
                    href={`${
                      data?.payeeId?.email
                        ? `mailto:${data?.payeeId?.email}`
                        : "#"
                    }`}
                  >
                    {data?.payeeId?.email ? `${data?.payeeId?.email}` : "---"}
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </DashboardLayout>
  );
};

export default Detail;