import * as React from "react";
import { useRef } from "react";
import { SingleCardProps } from "./CardProps";
import { FacebookA } from "./facebook/FacebookA";
import { FacebookB } from "./facebook/FacebookB";
import { InstagramA } from "./instagram/InstagramA";
import { InstagramB } from "./instagram/InstagramB";
import { InstagramC } from "./instagram/InstagramC";
import { InstagramD } from "./instagram/InstagramD";
import { InstagramE } from "./instagram/InstagramE";
import { InstagramF } from "./instagram/InstagramF";
import { InstagramG } from "./instagram/InstagramG";
import { InstagramH } from "./instagram/InstagramH";
import { InstagramI } from "./instagram/InstagramI";
import { InstagramJ } from "./instagram/InstagramJ";
import { InstagramK } from "./instagram/InstagramK";
import { InstagramL } from "./instagram/InstagramL";
import { InstagramN } from "./instagram/InstagramN";
import { TiktokA } from "./tiktok/TiktokA";
import { TiktokB } from "./tiktok/TiktokB";
import { TiktokC } from "./tiktok/TiktokC";
import { TiktokEmbed } from "./tiktok/TiktokEmbed";
import { TwitterA } from "./twitter/TwitterA";
import { TwitterB } from "./twitter/TwitterB";
import { YoutubeA } from "./YoutubeA";
import { YoutubeB } from "./YoutubeB";

const cardLayouts = {
  "instagram-a": InstagramA,
  "instagram-b": InstagramB,
  "instagram-c": InstagramC,
  "instagram-d": InstagramD,
  "instagram-e": InstagramE,
  "instagram-f": InstagramF,
  "instagram-g": InstagramG,
  "instagram-h": InstagramH,
  "instagram-i": InstagramI,
  "instagram-j": InstagramJ,
  "instagram-k": InstagramK,
  "instagram-l": InstagramL,
  // "instagram-m": InstagramM,
  "instagram-n": InstagramN,
  "youtube-a": YoutubeA,
  "youtube-b": YoutubeB,
  "twitter-a": TwitterA,
  "twitter-b": TwitterB,
  "facebook-a": FacebookA,
  "facebook-b": FacebookB,
  "tiktok-a": TiktokA,
  "tiktok-b": TiktokB,
  "tiktok-c": TiktokC,
  "tiktok-embed": TiktokEmbed,
} as const;

export type CardLayoutKey = keyof typeof cardLayouts;
export type CardProps = SingleCardProps & { layout?: CardLayoutKey };

export const Card = React.forwardRef<HTMLDivElement, CardProps>(
  ({ layout = "instagram-a", ...props }, receivedRef) => {
    const Component = cardLayouts[layout];

    const tabIndexValue =
      props.onCardClick && !props.showCallToAction ? 0 : undefined;

    //Create and use a always ref
    const localRef = useRef(null);
    const ref = receivedRef || localRef;

    return (
      <Component
        ref={ref}
        {...props}
        layout={layout as any}
        tabIndex={tabIndexValue}
        data-layout-type={layout}
      />
    );
  }
);