import { useEffect, useState } from 'react';

import { useContext } from '@/hooks/useContextSelector';
import logWebUserEvent from '@/logging/logWebUserEvent';

import Button, { ButtonVariant } from '../button/Button';
import StudioContext from './StudioContext';

export default function DelayedLegacyEditButton({
  clipId,
  delayTime = 5000,
}: {
  clipId: string;
  delayTime?: number;
}) {
  const studioContext = useContext(StudioContext);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setVisible(true);
    }, delayTime);

    return () => clearTimeout(timeout);
  }, []);

  return (
    <Button
      href={`/edit-legacy/${clipId}`}
      variant={ButtonVariant.Secondary}
      className={`mt-2 text-sm text-gray-500 transition-opacity duration-300 hover:underline ${
        visible ? 'opacity-100' : 'opacity-0'
      }`}
      onClick={() => {
        logWebUserEvent({
          actionName: 'EditV3ReturnToEditV2',
          context: {
            editSessionId:
              studioContext?.editSessionId || 'MISSING_EDIT_SESSION_ID',
            editingClipId:
              studioContext.state.editClipId || 'MISSING_EDIT_CLIP_ID',

            usedCrop: !!studioContext?.state.metadata?.usedCrop,
            usedReorder: !!studioContext?.state.metadata?.usedReorder,
            usedDuplicate: !!studioContext?.state.metadata?.usedDuplicate,
            usedDelete: !!studioContext?.state.metadata?.usedDelete,
            usedSplit: !!studioContext?.state.metadata?.usedSplit,
            usedCreateSection:
              !!studioContext?.state.metadata?.usedCreateSection,
            usedReplaceSection:
              !!studioContext?.state.metadata?.usedReplaceSection,
            usedExtend: !!studioContext?.state.metadata?.usedExtend,
          },
        });
      }}
    >
      Open in Legacy Editor
    </Button>
  );
}