import { useEffect, useState } from 'react';

import SpinnerSVG from '@/components/svg/SpinnerSVG';
import useDebounceCallback from '@/hooks/useDebounceCallback';
import { CheckIcon } from '@/icons';

interface SaveIndicatorProps {
  isSaving: boolean;
}

const SaveIndicator = ({ isSaving }: SaveIndicatorProps) => {
  const [show, setShow] = useState(false);
  const [delayedIsSaving, setDelayedIsSaving] = useState(isSaving);

  const debouncedSetIsSaving = useDebounceCallback((isSaving: boolean) => {
    setDelayedIsSaving(isSaving);
  }, 1000);

  useEffect(() => {
    if (isSaving) {
      setDelayedIsSaving(true);
    } else {
      debouncedSetIsSaving(false);
    }
  }, [isSaving]);

  useEffect(() => {
    if (isSaving) {
      setShow(true);
    } else {
      const timer = setTimeout(() => {
        setShow(false);
      }, 2000);
      return () => clearTimeout(timer);
    }
  }, [isSaving]);

  if (!show) return null;

  return (
    <div
      className='absolute right-4 bottom-4 z-50 flex items-center gap-2 rounded-lg bg-white/5 px-3 py-2 text-sm text-foreground-primary backdrop-blur-md transition-opacity duration-200'
      style={{
        opacity: show ? 1 : 0,
      }}
    >
      {delayedIsSaving ? (
        <>
          <SpinnerSVG className='h-4 w-4' />
          <span>Saving...</span>
        </>
      ) : (
        <>
          <CheckIcon className='h-4 w-4' />
          <span>Saved</span>
        </>
      )}
    </div>
  );
};

export default SaveIndicator;