'use client';

import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { createContext, useContext, useEffect, useMemo, useState } from 'react';
import { createPortal } from 'react-dom';
import { useIsClient } from 'usehooks-ts';

import { staticAssetUrl } from '@/utils/staticAssetUrl';

let everUnmounted = false;

const fadeOutAnimation = keyframes`
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
`;

const Wrapper = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  background-color: black;
  z-index: 1000000000;
  display: flex;
  align-items: center;
  justify-content: center;
  &.fade-out {
    pointer-events: none;
    animation: 1s ease-out 1s 1 both ${fadeOutAnimation};
  }
`;

const StudioLoadingContext = createContext<{
  done: boolean;
  setDone: (done: boolean) => void;
}>({ done: false, setDone: () => {} });

export const StudioLoadingCompleter = () => {
  const { setDone } = useContext(StudioLoadingContext);
  useEffect(() => {
    setDone(true);
  }, [setDone]);
  return null;
};

export const StudioLoadingOverlayProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const [done, setDone] = useState(false);
  const contextValue = useMemo(() => ({ done, setDone }), [done, setDone]);

  return (
    <StudioLoadingContext.Provider value={contextValue}>
      {children}
    </StudioLoadingContext.Provider>
  );
};

export default function StudioLoadingOverlay() {
  const { done } = useContext(StudioLoadingContext);
  const [unmounted, setUnmounted] = useState(everUnmounted);
  everUnmounted = unmounted || everUnmounted;
  useEffect(() => {
    if (done) {
      setTimeout(() => {
        setUnmounted(true);
      }, 8000);
    }
  }, [done]);

  const isClient = useIsClient();

  if (unmounted || !isClient) return null;

  return createPortal(
    <Wrapper key='studio-loading-overlay' className={done ? 'fade-out' : ''}>
      <video
        className='w-[280px]'
        autoPlay
        loop
        muted
        src={staticAssetUrl('studio/studio_loading_h264.mp4')}
        key='studio-loading-video'
      />
    </Wrapper>,
    document.body
  );
}