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 ExpenseStatusLogs = ({ data }) => {


  const sortedLogs = useMemo(() => {
    if (!data?.expenseLogs) return [];
    return [...data.expenseLogs].sort(
      (a, b) => new Date(b.updateAt) - new Date(a.updateAt)
    );
  }, [data?.expenseLogs]);

  const timelineData = useMemo(() => {
    return sortedLogs.map((log, index) => ({
      id: index + 1,
      title: log.action || "Status Updated",
      description: log.comment || "",
      timeAgo: log.updateAt,
      color: getColorNameFromHex(log.nextStatus?.color) || "primary",
      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="page-min-h overflow-auto py-1">
      <Timeline items={timelineData} />
    </div>
  );
};

export default ExpenseStatusLogs;