import { getHSEnv, getHubID, getHublet } from '@hubspot/cms-components';
import {
  // @ts-expect-error -- provider type not flowing through properly
  TranslationsProvider,
  useVideo,
  VideoFetchProvider,
  VideoPlayer,
  // @ts-expect-error -- provider type not flowing through properly
  VideoPlayerProvider,
} from '@hubspot/video-player-core';

import TrackHSVideoAnalytics from '../TrackHSVideoAnalytics.js';
import { HSVideoIslandProps } from '../types.js';

const HSVideoIsland = ({
  video,
  hubspotVideoParams,
  playButtonColor,
}: HSVideoIslandProps) => {
  const portalId = getHubID();
  const hsEnv = getHSEnv();
  const hublet = getHublet();
  const { video: clientFetchedVideo, error: videoFetchError } = useVideo(
    hubspotVideoParams.player_id,
    portalId,
    hsEnv,
    hublet,
    Boolean(video)
  );
  const resolvedVideo = video || clientFetchedVideo;

  return (
    <VideoFetchProvider
      env={hsEnv}
      hublet={hublet}
      videoId={hubspotVideoParams.player_id}
      video={resolvedVideo}
      videoFetchError={videoFetchError}
      hubspotVideoParams={hubspotVideoParams}
    >
      <VideoPlayerProvider video={resolvedVideo}>
        <TranslationsProvider translations={{}} language="en">
          <VideoPlayer
            portalId={portalId}
            playButtonColor={playButtonColor}
            theme="DARK"
          />
          {resolvedVideo && (
            <TrackHSVideoAnalytics video={resolvedVideo} portalId={portalId} />
          )}
        </TranslationsProvider>
      </VideoPlayerProvider>
    </VideoFetchProvider>
  );
};

export default HSVideoIsland;
