import React from "react";
import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";

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 { MediaTemplate } from "./templates/Media";
import { ContentTemplate } from "./templates/Content";

/**
 * Use `CopyLead` to give supporting information about a page or proposition. It can be used to call out key benefits in bullet points, or link to a supporting explanatory video. An optional CTA can be used to link to further information or trigger a sales or enquiry journey.
 */
export const CopyLead: React.FC<CopyLeadProps> = ({
  button,
  heading,
  id,
  headingLevel = "2",
  listItems,
  video,
  image,
  content,
  isHeadingWordWrap,
  isReverseOrder = false,
  ...props
}) => {
  if (video || image) {
    return (
      <MediaTemplate
        id={id}
        content={content}
        video={video}
        image={image}
        listItems={listItems}
        heading={heading}
        headingLevel={headingLevel}
        isHeadingWordWrap={isHeadingWordWrap}
        button={button}
        isReverseOrder={isReverseOrder}
        {...filterAttrs(props)}
      />
    );
  }

  if (content) {
    return (
      <ContentTemplate
        id={id}
        listItems={listItems}
        heading={heading}
        headingLevel={headingLevel}
        isHeadingWordWrap={isHeadingWordWrap}
        button={button}
        content={content}
        {...filterAttrs(props)}
      />
    );
  }

  return null;
};

export interface CopyLeadProps {
  /**
   * heading for `CopyLead`.
   */
  heading: string;

  /**
   * Determine a heading level for `<MediaTemplate />` and `<ContentTemplate />`
   */
  headingLevel?: HeadingLevel;

  /**
   * id for the heading of `<MediaTemplate />` and `<ContentTemplate />`
   */
  id?: string;

  /**
   * Word wrap behavior for the heading
   */
  isHeadingWordWrap?: boolean;

  /**
   * Reverse the columns so the image / video appears on the left. Doesn't affect mobile layouts, and is only applied if there is a video or an image.
   */
  isReverseOrder?: boolean;

  /**
   * Text content for `CopyLead`.
   */
  content?: string;

  /**
   * Button for `CopyLead`.
   */
  button?: CopyLeadButton;

  /**
   * Image for `CopyLead`.
   */
  image?: CopyLeadImage;

  /**
   * Video embed. Supported platforms are YouTube and Vimeo.
   */
  video?: VideoPlayerProps;

  /**
   * List items for `CopyLead`
   */
  listItems: CopyLeadListItem[];
}