import classNames from 'classnames';
import React, { FC, ReactType, Fragment } from 'react';
import { LinkProps } from '../../blocks/Link';
import Content from '../Content';
import css from './index.module.css';
import { ImageProps } from '../../blocks/Image';

import { MilaGridVoid, MilaGridColumn, MilaGridContainer } from '../../index';
import { PartnerListProps } from '../PartnerList';

export interface BannerProps {
  Image?: ReactType;
  ImageProps?: {
    fixed?: unknown;
    imgStyle?: unknown;
    style?: unknown;
    svg?: {
      title?: string;
      description?: string;
      svg?: {
        absolutePath?: string;
        content?: string;
        dataURI?: string;
        originalContent?: string;
        relativePath?: string;
      };
      file?: {
        contentType?: string;
        url?: string;
        fileName?: string;
        details?: {
          image?: {
            width?: string;
            height?: string;
          };
        };
      };
      fluid?: unknown;
    };
  };
  isSvgImage?: boolean;
  title?: string;
  subtitle?: string;
  pageType?: string;
  cta?: LinkProps;
  LogoProps?: ImageProps;
  Logo?: ReactType;
  Link?: ReactType;
  CategoryTab?: ReactType;
  FeaturedPartnersList?: ReactType;
  FeaturedPartnersListProps?: PartnerListProps;
  bannerBackgroundColor?: string;
  isPackage?: boolean;
}
const Banner: FC<BannerProps> = ({
  Image,
  ImageProps,
  isSvgImage = false,
  title,
  subtitle,
  pageType,
  cta,
  LogoProps,
  Logo,
  Link,
  CategoryTab,
  FeaturedPartnersList,
  FeaturedPartnersListProps,
  bannerBackgroundColor,
  isPackage = false,
}) => {
  const bannerClassNames = classNames(css.banner, {
    [css.bannerPackage]: isPackage,
    [css.bannerWithImage]: !!ImageProps && isPackage,
    [css.bannerWithLogo]: !!LogoProps,
    [css.bannerWithSvgImage]: !!ImageProps?.svg?.svg,
    [css.bannerWithFeaturedPartner]: !!FeaturedPartnersListProps,
  });

  const bannerTitles = classNames({
    [css.banner__titles]: true,
  });

  const bannerContainer = classNames({
    [css.banner__text]: pageType !== 'partner',
    [css.banner__container]: pageType === 'partner',
  });

  const isSvgLogo =
    LogoProps && LogoProps?.file?.contentType === 'image/svg+xml';
  return (
    <div
      className={bannerClassNames}
      data-testid="Banner"
      style={{
        background: bannerBackgroundColor ? bannerBackgroundColor : '',
      }}
    >
      {!isSvgImage && !!Image && <Image {...ImageProps} />}

      <MilaGridContainer>
        <MilaGridVoid>
          <MilaGridColumn
            columns={['sm-12', 'lg-10', 'xl-8', 'xxl-6']}
            offset={['lg-1', 'xl-2', 'xxl-3']}
          >
            {LogoProps && Logo && (
              <div className={css.banner__logo}>
                {!isSvgLogo && (
                  <Logo {...LogoProps} className={css.banner__logoImage} />
                )}
                {isSvgLogo && (
                  <div
                    dangerouslySetInnerHTML={{
                      __html: LogoProps.svg.content,
                    }}
                    className={css.banner__logoImage}
                  />
                )}
              </div>
            )}
            {!!Image && !!ImageProps && (
              <Fragment>
                {isSvgImage && ImageProps?.svg?.svg && (
                  <div
                    dangerouslySetInnerHTML={{
                      __html: ImageProps.svg.svg.content,
                    }}
                    className={css.banner__svg}
                  />
                )}
              </Fragment>
            )}

            {(title || subtitle) && (
              <div className={css.banner__textWrap}>
                <div className={bannerContainer}>
                  {title && (
                    <div className={bannerTitles}>
                      <h1 className={css.banner__title}>
                        {title === 'axaReplace' ? '' : title}
                      </h1>
                      {subtitle && (
                        <p className={`${css.banner__subtitle} lead-1`}>
                          {subtitle}
                        </p>
                      )}
                      {cta && (
                        <div className={css.banner__link}>
                          <br />
                          <Link {...cta} />
                        </div>
                      )}
                    </div>
                  )}
                </div>
              </div>
            )}
          </MilaGridColumn>
        </MilaGridVoid>
      </MilaGridContainer>
      {CategoryTab}

      {FeaturedPartnersList && FeaturedPartnersListProps && (
        <Content className={css.featuredPartner}>
          <MilaGridVoid>
            <MilaGridColumn
              columns={['sm-12', 'lg-10', 'xl-8', 'xxl-6']}
              offset={['lg-1', 'xl-2', 'xxl-3']}
            >
              <FeaturedPartnersList {...FeaturedPartnersListProps} />
            </MilaGridColumn>
          </MilaGridVoid>
        </Content>
      )}
    </div>
  );
};

export default Banner;