"use client";

import { useField, useFormFields } from "@payloadcms/ui";

const calculateTicks = (value: number) => {
  const totalMinutes = value * 10;
  const days = Math.floor(value / 144);
  const hours = Math.floor(totalMinutes / 60) % 24;
  const minutes = totalMinutes % 60;
  return `${days >= 1 ? `${days}d ` : ""}${hours}h ${minutes}m`;
};

export const TickDurationDescription = ({ task }: { task: string }) => {
  const { value, setValue } = useField();

  return value && typeof value === "number" ? (
    <p className="field-description">
      The number of ticks (<code className="px-1">10</code> minutes *{" "}
      <code className="px-1">{value}</code> ={" "}
      <strong className="px-1">{calculateTicks(value)}</strong>) it takes to {task}.
    </p>
  ) : (
    <p className="field-description">The number of ticks it takes to {task}.</p>
  );
};

export default TickDurationDescription;