import React, { type ReactNode } from "react";
import classNames from "classnames";
import { isDate, format } from "date-fns";

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

import { ArcSizeBreakpointsM } from "@arc-ui/tokens-arc";

import { AppButton } from "@arc-ui/components/AppButton";
import { Grid, GridRow, GridCol } from "@arc-ui/components/Grid";
import { ButtonV2 } from "@arc-ui/components/ButtonV2";
import { Heading, type HeadingLevel } from "@arc-ui/components/Heading";
import { Text } from "@arc-ui/components/Text";
import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
import { useMediaQuery } from "@arc-ui/components/use-media-query";
import { type VideoPlayerProps } from "@arc-ui/components/VideoPlayer";

import { Author } from "../Author";

import {
  type FeaturePostAppButtonFooter,
  type FeaturePostCtaFooter,
  type FeaturePostImage,
} from "./types";

import styles from "./FeaturePost.module.css";
import { MediaContent } from "./components/MediaContent/MediaContent";

/**
 * Use `FeaturePost` to direct traffic towards an article, case study, or product information page, or to a 3rd part App Store provider. Where the component links to an article page, the author attribution can be given here. The `FeaturePost` must be supported by an image, and in future, the component will support embedded video as well.
 * */
export const FeaturePost: React.FC<FeaturePostProps> = ({
  heading,
  id,
  headingLevel = "2",
  label,
  image,
  content,
  footer,
  video,
  isHeadingWordWrap,
  isReverseOrder = false,
  ...props
}) => {
  const isMinWidthArcBreakpointM = useMediaQuery(
    `(min-width: ${ArcSizeBreakpointsM})`,
  );

  return (
    <div
      data-testid="feature-post"
      className={classNames(styles.featurePost, {
        [styles.featurePostReversed]: isReverseOrder,
      })}
      {...filterAttrs(props)}
    >
      <div className={styles.col}>
        <div className={styles.contentContainer}>
          {label && (
            <Grid isGutterless isFluid>
              <GridRow align="baseline">
                <GridCol xs={12} m="auto">
                  <Heading size="xxs" fontStyle="overline">
                    {label.text}
                  </Heading>
                </GridCol>
                <GridCol xs={12} m="auto">
                  <div className={styles.labelDate}>
                    <Text size="xs" tone="muted">
                      {isDate(label.date) ? (
                        <time
                          dateTime={format(label.date as Date, "yyyy-MM-dd")}
                        >
                          {format(label.date as Date, "d MMMM yyyy")}
                        </time>
                      ) : (
                        <span>{label.date as string}</span>
                      )}
                    </Text>
                  </div>
                </GridCol>
              </GridRow>
              <VerticalSpace size="24" />
            </Grid>
          )}

          <Heading
            id={id}
            level={headingLevel}
            isWordWrap={isHeadingWordWrap}
            size="xl"
          >
            {heading}
          </Heading>

          {!isMinWidthArcBreakpointM && (
            <div data-testid="mobile-img">
              <VerticalSpace size="40" />

              <MediaContent image={image} video={video} />
            </div>
          )}

          <VerticalSpace size="24" />

          {typeof content === "string" ? (
            <Text size="l">{content}</Text>
          ) : (
            content
          )}

          {footer?.type === "cta" && (
            <>
              {footer.author && (
                <>
                  <VerticalSpace size="40" />
                  <Author {...footer.author} />
                </>
              )}
              <VerticalSpace size="40" />

              <ButtonV2 buttonStyle="secondary" {...footer.button} />
            </>
          )}

          {footer?.type === "appButton" && (
            <>
              <VerticalSpace size="40" />
              <Grid isGutterless isFluid>
                <GridRow>
                  {footer.appStore && (
                    <GridCol xs={12} s="auto">
                      <AppButton
                        type="apple-app-store"
                        screenReaderText={footer.appStore.screenReaderText}
                        url={footer.appStore.url}
                      />
                    </GridCol>
                  )}
                  {footer.googlePlay && (
                    <GridCol xs={12} s="auto">
                      <div className={styles.googlePlayButtonWrapper}>
                        <AppButton
                          type="google-play"
                          screenReaderText={footer.googlePlay.screenReaderText}
                          url={footer.googlePlay.url}
                        />
                      </div>
                    </GridCol>
                  )}
                </GridRow>
              </Grid>
            </>
          )}
        </div>
      </div>

      {isMinWidthArcBreakpointM && (
        <div className={styles.col}>
          <div data-testid="desktop-img" className={styles.imgContainer}>
            <MediaContent image={image} video={video} />
          </div>
        </div>
      )}
    </div>
  );
};

export interface FeaturePostProps {
  /**
   * heading for `FeaturePost`.
   */
  heading: string;

  /**
   * id for `FeaturePost`.
   */
  id?: string;

  /**
   * Determine a heading level for `<FeaturePost />`
   */
  headingLevel?: HeadingLevel;

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

  /**
   * Text content for `FeaturePost`.
   */
  content: ReactNode;

  /**
   * 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;

  /**
   * Image for `FeaturePost`.
   */
  image?: FeaturePostImage;

  /**
   * Footer for `FeaturePost`. Types included are `cta` or `appButton`.
   */
  footer?: FeaturePostCtaFooter | FeaturePostAppButtonFooter;

  /**
   * Label for `FeaturePost`.
   */
  label?: {
    text: string;
    date: string | Date;
  };

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