import { useMetaData } from '@websolutespa/bom-mixer-hooks';
import { IMetaData, TwitterCardApp, TwitterCardPlayer, TwitterCardType } from '@websolutespa/bom-mixer-models';
import Head from 'next/head';
import React from 'react';

export function renderTwitterCard(data: TwitterCardType): React.ReactElement[] {
  const tags: React.ReactElement[] = [];

  // Basic Twitter Card tags
  tags.push(<meta key="twitter:card" name="twitter:card" content={data.card} />);

  if (data.site) {
    tags.push(<meta key="twitter:site" name="twitter:site" content={data.site} />);
  }

  if (data.siteId) {
    tags.push(<meta key="twitter:site:id" name="twitter:site:id" content={data.siteId} />);
  }

  if (data.creator) {
    tags.push(<meta key="twitter:creator" name="twitter:creator" content={data.creator} />);
  }

  if (data.creatorId) {
    tags.push(<meta key="twitter:creator:id" name="twitter:creator:id" content={data.creatorId} />);
  }

  if (data.title) {
    tags.push(<meta key="twitter:title" name="twitter:title" content={data.title} />);
  }

  if (data.description) {
    tags.push(<meta key="twitter:description" name="twitter:description" content={data.description} />);
  }

  if (data.image) {
    tags.push(<meta key="twitter:image" name="twitter:image" content={data.image} />);
  }

  if (data.imageAlt) {
    tags.push(<meta key="twitter:image:alt" name="twitter:image:alt" content={data.imageAlt} />);
  }

  // Card-specific tags
  switch (data.card) {
    case 'app': {
      const appData = data as TwitterCardApp;
      if (appData.appNameIphone) {
        tags.push(<meta key="twitter:app:name:iphone" name="twitter:app:name:iphone" content={appData.appNameIphone} />);
      }
      if (appData.appIdIphone) {
        tags.push(<meta key="twitter:app:id:iphone" name="twitter:app:id:iphone" content={appData.appIdIphone} />);
      }
      if (appData.appUrlIphone) {
        tags.push(<meta key="twitter:app:url:iphone" name="twitter:app:url:iphone" content={appData.appUrlIphone} />);
      }
      if (appData.appNameIpad) {
        tags.push(<meta key="twitter:app:name:ipad" name="twitter:app:name:ipad" content={appData.appNameIpad} />);
      }
      if (appData.appIdIpad) {
        tags.push(<meta key="twitter:app:id:ipad" name="twitter:app:id:ipad" content={appData.appIdIpad} />);
      }
      if (appData.appUrlIpad) {
        tags.push(<meta key="twitter:app:url:ipad" name="twitter:app:url:ipad" content={appData.appUrlIpad} />);
      }
      if (appData.appNameGoogleplay) {
        tags.push(
          <meta
            key="twitter:app:name:googleplay"
            name="twitter:app:name:googleplay"
            content={appData.appNameGoogleplay}
          />
        );
      }
      if (appData.appIdGoogleplay) {
        tags.push(
          <meta key="twitter:app:id:googleplay" name="twitter:app:id:googleplay" content={appData.appIdGoogleplay} />
        );
      }
      if (appData.appUrlGoogleplay) {
        tags.push(
          <meta
            key="twitter:app:url:googleplay"
            name="twitter:app:url:googleplay"
            content={appData.appUrlGoogleplay}
          />
        );
      }
      if (appData.appCountry) {
        tags.push(<meta key="twitter:app:country" name="twitter:app:country" content={appData.appCountry} />);
      }
      break;
    }
    case 'player': {
      const playerData = data as TwitterCardPlayer;
      tags.push(<meta key="twitter:player" name="twitter:player" content={playerData.player} />);
      tags.push(
        <meta key="twitter:player:width" name="twitter:player:width" content={playerData.playerWidth.toString()} />
      );
      tags.push(
        <meta key="twitter:player:height" name="twitter:player:height" content={playerData.playerHeight.toString()} />
      );
      if (playerData.playerStream) {
        tags.push(<meta key="twitter:player:stream" name="twitter:player:stream" content={playerData.playerStream} />);
      }
      break;
    }
  }
  return tags;
}

export function TwitterCard({ item }: { item?: (metaData: IMetaData) => TwitterCardType }) {
  const metaData = useMetaData();
  const twitterCard = item ? item(metaData) : metaData.twitterCard;
  if (twitterCard) {
    return (
      <Head>
        {renderTwitterCard(twitterCard)}
      </Head>
    );
  }
  return <></>;
}