'use client';

import { statusEnumSchema } from '@/database/schema';
import { addLocalOffsetFromDate, removeLocalOffsetFromDate } from '@/lib/utils';
import { Clock12, Hourglass, Timer } from 'lucide-react';
import { useState, useEffect } from 'react';
import { z } from 'zod';

const WorkingTaskTimer = ({
  startedTime,
  endedTime,
  status
}: {
  startedTime: Date | string;
  endedTime?: Date | string;
  status:z.infer<typeof statusEnumSchema>
}) => {
  const [elapsedTime, setElapsedTime] = useState<string>('00:00');

  const formatDuration = (milliseconds: number) => {
    const totalSeconds = Math.floor(milliseconds / 1000);
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;

    if (hours > 0) {
      // Formato horas:minutos:segundos
      return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    } else {
      // Formato minutos:segundos
      return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    }
  };

  useEffect(() => {
    const start = new Date(startedTime).getTime();
    const end = endedTime ? new Date(endedTime).getTime() : null;

    if(!startedTime)return
    if (end) {
      // Si endedTime existe, mostramos el tiempo total transcurrido
      const totalElapsedTime = end - start;
      setElapsedTime(formatDuration(totalElapsedTime));
    } else {
      // Si no hay endedTime, actualizamos el tiempo en tiempo real
      const start = addLocalOffsetFromDate(startedTime).getTime() // Milisegundos sin considerar zona horaria
      const interval = setInterval(() => {
        const currentTime = new Date().getTime(); // Obtiene el tiempo actual en milisegundos
        const elapsedTime = currentTime - start;
        setElapsedTime(formatDuration(elapsedTime));
      }, 1000);

      return () => clearInterval(interval); // Limpiar el intervalo al desmontar el componente
    }
  }, [startedTime, endedTime]);



  return <div>
    <p className='flex items-center gap-0.5'>
    {startedTime  && status === 'en proceso' ? <Hourglass className='m-auto animate-pulse' size={20}/>: <Clock12 size={20}/>}
    {status !== 'en proceso' && <span className='text-sm font-semibold'>{elapsedTime}</span>}
    </p>
  </div>;
};

export default WorkingTaskTimer;