import React, { Suspense, useEffect, useState } from "react";

import { ArcSizeBreakpointsL, ArcSizeBreakpointsXl } from "@arc-ui/tokens-arc";

import { Columns, ColumnsCol } from "@arc-ui/components/Columns";
import { useMediaQuery } from "@arc-ui/components/use-media-query";

import { type HeadingLevel } from "@arc-ui/components/Heading";
import { type VideoPlayerProps } from "@arc-ui/components/VideoPlayer";

import {
  type CopyLeadButton,
  type CopyLeadImage,
  type CopyLeadListItem,
} from "../../types";

import { MediaContent } from "../../components/MediaContent";
import { Image } from "../../components/Image";
import { IconList } from "../../components/IconList";
import { Button } from "../../components/Button/Button";
import { Container } from "../../components/Container";
import { Column } from "../../components/Column";
import { getListHeadingLevel } from "../../utils/getListHeadingLevel";

const VideoPlayer = React.lazy(() =>
  import("@arc-ui/components/VideoPlayer").then(({ VideoPlayer }) => ({
    default: VideoPlayer,
  })),
);

export const MediaTemplate: React.FC<MediaTemplateProps> = ({
  button,
  id,
  heading,
  headingLevel,
  listItems,
  video,
  image,
  content,
  isHeadingWordWrap,
  isReverseOrder = false,
}) => {
  const [isClient, setIsClient] = useState(false);

  const isMinWidthArcBreakpointL = useMediaQuery(
    `(min-width: ${ArcSizeBreakpointsL})`,
  );

  const isMinWidthArcBreakpointXl = useMediaQuery(
    `(min-width: ${ArcSizeBreakpointsXl})`,
  );

  const listHeadingLevel = getListHeadingLevel(headingLevel);

  useEffect(() => {
    setIsClient(true);
  }, []);

  return (
    <div>
      {!isMinWidthArcBreakpointXl && (
        <Columns>
          <ColumnsCol span={12} spanM={9}>
            <MediaContent
              heading={heading}
              headingLevel={headingLevel}
              id={id}
              isHeadingWordWrap={isHeadingWordWrap}
              content={content}
            />
          </ColumnsCol>
        </Columns>
      )}
      <Container
        type="media"
        isReverseOrder={isReverseOrder}
        alignment={!isMinWidthArcBreakpointXl ? "top" : "center"}
      >
        <Column>
          {isMinWidthArcBreakpointXl && (
            <MediaContent
              heading={heading}
              headingLevel={headingLevel}
              id={id}
              isHeadingWordWrap={isHeadingWordWrap}
              content={content}
            />
          )}

          <IconList
            listItems={listItems}
            isLgScreen={isMinWidthArcBreakpointL}
            headingLevel={listHeadingLevel}
          />

          {button && <Button {...button} />}
        </Column>
        <Column>
          {video && isClient && (
            <Suspense fallback={null}>
              <VideoPlayer {...video} />
            </Suspense>
          )}
          {image && !video && <Image {...image} />}
        </Column>
      </Container>
    </div>
  );
};

interface MediaTemplateProps {
  heading: string;
  headingLevel: HeadingLevel;
  id?: string;
  isHeadingWordWrap?: boolean;
  listItems: CopyLeadListItem[];
  content?: string;
  isReverseOrder?: boolean;
  button?: CopyLeadButton;
  image?: CopyLeadImage;
  video?: VideoPlayerProps;
}