import { Island } from '@hubspot/cms-components';
import ContentFields from './ContentFields.js';
import StyleFields from './StyleFields.js';
// @ts-expect-error -- ?island not typed
import EmbedVideoIsland from './islands/EmbedVideoIsland.js?island';
// @ts-expect-error -- ?island not typed
import HSVideoIsland from './islands/HSVideoIsland.js?island';
import { VideoProps } from './types.js';

const VideoComponent = ({
  videoType,
  hubspotVideoParams,
  embedVideoParams,
  oembedThumbnail,
  playButtonColor,
  video,
}: VideoProps) => {
  if (videoType === 'hubspot_video' && hubspotVideoParams?.player_id) {
    return (
      <Island
        module={HSVideoIsland}
        hydrateOn="visible"
        hubspotVideoParams={hubspotVideoParams}
        playButtonColor={playButtonColor}
        video={video}
      />
    );
  }

  if (
    videoType === 'embed' &&
    Boolean(embedVideoParams?.oembed_url || embedVideoParams?.embed_html)
  ) {
    return (
      <Island
        module={EmbedVideoIsland}
        embedVideoParams={embedVideoParams}
        oembedThumbnail={oembedThumbnail}
        playButtonColor={playButtonColor}
      />
    );
  }

  return null;
};

type VideoComponentType = typeof VideoComponent & {
  ContentFields: typeof ContentFields;
  StyleFields: typeof StyleFields;
};

const Video = VideoComponent as VideoComponentType;
Video.ContentFields = ContentFields;
Video.StyleFields = StyleFields;

export default Video;
