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

interface PromoBannerProps {
  className?: string;
  image?: string;
  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;
  children?: React.ReactNode;
  itemClassName?: string;
  imageClassName?: string;
  variant?: "vertical" | "reverse";
}

const CLASS_ROOT = "promo-banner";
export const PromoBanner = ({
  image,
  className,
  alignImage,
  flushTopSmDown,
  flushBottomSmDown,
  bleedImage,
  children,
  itemClassName,
  imageClassName,
  variant,
  imageFullWidth,
}: PromoBannerProps) => {
  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" && !!image,
    [`${CLASS_ROOT}--vertical`]: variant === "vertical",
  });
  return (
    <div className={classes}>
      <Grid columnGapSize="large">
        {variant === "reverse" && image && (
          <GridCol
            size={{ xs: 12, md: 6 }}
            className={cx(
              `${CLASS_ROOT}__image`,
              "align-center align-md-left",
              imageClassName,
            )}
          >
            <Image
              src={image}
              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: image ? 6 : 7 }
          }
          className={cx(
            `${CLASS_ROOT}__item`,
            {
              "align-items-center align-center align-self-center":
                variant === "vertical",
            },
            itemClassName,
          )}
        >
          {children}
        </GridCol>

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