import cx from "classnames";
import React from "react";
import { Grid, GridCol } from "../Grid";
import { Image } from "../Image";

interface PromoBannerImageSrc {
  src: string;
  srcSet?: string;
}

interface PromoBannerProps {
  className?: string;
  image?: string | PromoBannerImageSrc;
  alignImage?: "bottom" | "top";
  /** Remove top padding from item on sm and smaller breakpoints */
  flushTopSmDown?: boolean;
  /** Remove bottom padding from item on sm and smaller breakpoints */
  flushBottomSmDown?: boolean;
  imageFullWidth?: boolean;
  /** Make image extend to the edge of viewport even when inside container */
  bleedImage?: boolean;
  /** Make image extend to Container boundaries on sm and smaller breakpoints */
  bleedImageSmDown?: boolean;
  children?: React.ReactNode;
  itemClassName?: string;
  imageClassName?: string;
  variant?: "vertical" | "reverse";
}

const CLASS_ROOT = "promo-banner";

const getImageProps = (image?: string | PromoBannerImageSrc) => {
  if (!image) return null;

  return typeof image === "string"
    ? { src: image }
    : { src: image.src, srcSet: image.srcSet };
};

export const PromoBanner = ({
  image,
  className,
  alignImage,
  flushTopSmDown,
  flushBottomSmDown,
  bleedImage,
  bleedImageSmDown,
  children,
  itemClassName,
  imageClassName,
  variant,
  imageFullWidth,
  ...other
}: PromoBannerProps) => {
  const imageProps = getImageProps(image);
  const classes = cx(CLASS_ROOT, className, {
    [`${CLASS_ROOT}--flush-top-sm-down`]: flushTopSmDown,
    [`${CLASS_ROOT}--flush-bottom-sm-down`]: flushBottomSmDown,
    [`${CLASS_ROOT}--reverse`]: variant === "reverse" && !!imageProps?.src,
    [`${CLASS_ROOT}--vertical`]: variant === "vertical",
  });
  return (
    <div className={classes} {...other}>
      <Grid columnGapSize="large">
        {variant === "reverse" && imageProps?.src && (
          <GridCol
            size={{ xs: 12, md: 6 }}
            className={cx(
              `${CLASS_ROOT}__image`,
              "align-center align-md-left",
              {
                [`${CLASS_ROOT}__image--bleed-sm-down`]: bleedImageSmDown,
              },
              imageClassName,
            )}
          >
            <Image
              src={imageProps.src}
              srcSet={imageProps.srcSet}
              alt="Obrázok"
              className={cx("mb-none", { fullwidth: imageFullWidth })}
            />
          </GridCol>
        )}

        <GridCol
          size={
            variant === "vertical"
              ? { xs: 12, sm: 10, md: 8, lg: 6 }
              : { xs: 12, md: imageProps?.src ? 6 : 7 }
          }
          className={cx(
            `${CLASS_ROOT}__item`,
            {
              "align-items-center align-center align-self-center":
                variant === "vertical",
            },
            itemClassName,
          )}
        >
          {children}
        </GridCol>

        {imageProps?.src && variant !== "reverse" && (
          <GridCol
            size={variant === "vertical" ? { xs: 12 } : { xs: 12, md: 6 }}
            className={cx(
              `${CLASS_ROOT}__image`,
              {
                [`${CLASS_ROOT}__image--bleed-right`]: bleedImage,
                [`${CLASS_ROOT}__image--bleed-sm-down`]: bleedImageSmDown,
                [`align-self-${alignImage}`]: alignImage,
                "align-center": variant === "vertical",
              },
              imageClassName,
            )}
          >
            <Image
              src={imageProps.src}
              srcSet={imageProps.srcSet}
              alt="Obrázok"
              className={cx("mb-none", { fullwidth: imageFullWidth })}
            />
          </GridCol>
        )}
      </Grid>
    </div>
  );
};