import { useState, useMemo } from "react";
import Avatar from "../common/Avatar";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import Timeline from "../common/TimeLine";
import moment from "moment";
import { getColorNameFromHex } from "../../utils/appUtils";
const PaymentStatusLogs = ({ data }) => {
  const sortedLogs = useMemo(() => {
    if (!data?.updateLogs) return [];
    return [...data.updateLogs].sort(
      (a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)
    );
  }, [data?.updateLogs]);

  const timelineData = useMemo(() => {
    return sortedLogs.map((log, index) => ({
      id: log.id,
      title: log.nextStatus?.name || "Status Updated",
      description: log.nextStatus?.description || "",
      timeAgo: log.updatedAt,
      color: getColorNameFromHex(log.nextStatus?.color) || "primary",
      userComment: log.comment,
      users: log.updatedBy
        ? [
            {
              firstName: log.updatedBy.firstName || "",
              lastName: log?.updatedBy?.lastName || "",
              role: log.updatedBy.jobRoleName || "",
              avatar: log.updatedBy.photo,
            },
          ]
        : [],
    }));
  }, [sortedLogs]);

  const handleShowMore = () => {
    setVisibleCount((prev) => prev + 4);
  };
  return (
    <div className="">
      <div className="d-flex mb-1 pt-10">
        <i className="bx bx-time-five me-2 "></i>{" "}
        <p className="fw-semibold">TimeLine</p>
      </div>
      <div className="row h-74 overflow-auto px-3">
        <Timeline items={timelineData} />
      </div>
    </div>
  );
};

export default PaymentStatusLogs;