import { graphql } from "@/gql";
import { type EmbedBlockFragment } from "@/gql/graphql";
import styles from "./embedBlock.module.scss";

const EmbedBlockFragmentDefinition = graphql(`
  fragment EmbedBlock on EmbedBlock {
    url
    embed
    rawEmbed
  }
`);

export const EmbedBlock = ({ block }: { block: EmbedBlockFragment }) => {
  if (!block.embed) {
    return <></>;
  }

  /* YouTube rawEmbed example
  {
    title: "EEEAAAOOO",
    type: "video",
    thumbnail_url: "https://i.ytimg.com/vi/v1K4EAXe2oo/hqdefault.jpg",
    width: 200,
    height: 113,
    html: '<iframe width="200" height="113" src="https://www.youtube.com/embed/v1K4EAXe2oo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen title="EEEAAAOOO"></iframe>',
  };
  */
  let embedData: any = {};
  try {
    embedData = block.rawEmbed ? JSON.parse(block.rawEmbed) : {};
  } catch (e) {
    embedData = {};
  }
  const { width, height } = embedData;
  const aspectRatio = width && height ? width / height : null;
  return (
    <div
      className={styles.embed}
      dangerouslySetInnerHTML={{ __html: block.embed }}
      data-type={embedData?.type ?? ""}
      style={
        aspectRatio
          ? ({ "--aspect-ratio": aspectRatio } as React.CSSProperties)
          : {}
      }
    ></div>
  );
};