import classNames from 'classnames';
import React, { FC, ReactElement } from 'react';
import Content from '../../components/Content';
import { getModifier } from '../../helpers/getModifier';
import SaleSVG from '../../assets/icons/ribbon-sale.svg';

export interface SliceProps {
  title: string;
  type?: string;
  description?: string;
  background: string;
  id?: string;
  children?: ReactElement;
  backgroundOdd?: boolean;
  fullWidthCampaign?: boolean;
}

import css from './index.module.css';
import { MilaGridColumn, MilaGridVoid } from '../../index';

const Slice: FC<SliceProps> = ({
  children,
  title,
  background,
  id,
  description,
  type,
  backgroundOdd = false,
  fullWidthCampaign = false,
}) => {
  const sliceClassNames = classNames(css.slice, {
    [`${css[`slice${getModifier(background)}`]}`]: background,
    [`${css[`odd`]}`]: backgroundOdd && !background,
    [`${css[`even`]}`]: !backgroundOdd && !background,
  });

  let sliceType = type || '';
  if (
    sliceType === 'ContentfulSliceRows' &&
    children?.props?.variant === 'bubble'
  ) {
    sliceType = 'Bubble';
  }
  if (
    sliceType === 'ContentfulSliceRows' &&
    children?.props?.variant === 'roles'
  ) {
    sliceType = 'Roles';
  }

  if (
    sliceType === 'ContentfulSliceRows' &&
    children?.props?.variant === 'partners'
  ) {
    sliceType = 'Partners';
  }
  if (
    sliceType === 'ContentfulSliceRows' &&
    children?.props?.variant === 'campaign'
  ) {
    sliceType = 'Campaign';
  }
  switch (sliceType) {
    case 'ContentfulSliceCarousel':
      return (
        <div
          className={sliceClassNames}
          id={id}
          style={background ? { backgroundColor: `${background}` } : null}
        >
          <Content>
            <MilaGridVoid>
              <div className={`${css.carousel__wrap} ${css.slice__wrap}`}>
                <MilaGridColumn
                  columns={['sm-12', 'lg-10', 'xl-8', 'xxl-6']}
                  offset={['lg-1', 'xl-2', 'xxl-3']}
                >
                  <h2 className={css.slice__title}>{title}</h2>
                  {description && (
                    <div className={`lead-2 ${css.slice__description}`}>
                      {description}
                    </div>
                  )}
                </MilaGridColumn>
                <div className={css.slice__items}>{children}</div>
              </div>
            </MilaGridVoid>
          </Content>
        </div>
      );
    case 'Bubble':
      return (
        <div
          className={sliceClassNames}
          id={id}
          style={background ? { backgroundColor: `${background}` } : null}
        >
          <Content>
            <MilaGridVoid>
              <div className={`${css.row__bubbleWrap} ${css.slice__wrap}`}>
                <MilaGridColumn
                  columns={['sm-12', 'lg-10', 'xl-8', 'xxl-6']}
                  offset={['lg-1', 'xl-2', 'xxl-3']}
                >
                  <h2 className={css.slice__title}>{title}</h2>
                  {description && (
                    <div className={`lead-2 ${css.slice__description}`}>
                      {description}
                    </div>
                  )}
                </MilaGridColumn>
                <MilaGridColumn columns={['sm-12', 'md-10']} offset={['md-1']}>
                  <div
                    className={css.slice__items}
                    style={
                      background ? { backgroundColor: `${background}` } : null
                    }
                  >
                    {children}
                  </div>
                </MilaGridColumn>
              </div>
            </MilaGridVoid>
          </Content>
        </div>
      );

    case 'Partners':
      return (
        <div
          className={sliceClassNames}
          id={id}
          style={background ? { backgroundColor: `${background}` } : null}
        >
          <Content>
            <MilaGridVoid>
              <div className={`${css.row__bubbleWrap} ${css.slice__wrap}`}>
                <MilaGridColumn
                  columns={['sm-12', 'lg-10', 'xl-8', 'xxl-6']}
                  offset={['lg-1', 'xl-2', 'xxl-3']}
                >
                  <h2 className={css.slice__title}>{title}</h2>
                  {description && (
                    <div className={`lead-2 ${css.slice__description}`}>
                      {description}
                    </div>
                  )}
                </MilaGridColumn>
                <MilaGridColumn columns={['sm-12', 'xl-10']} offset={['xl-1']}>
                  <div className={css.slice__items}>{children}</div>
                </MilaGridColumn>
              </div>
            </MilaGridVoid>
          </Content>
        </div>
      );

    case 'Roles':
      return (
        <div
          className={sliceClassNames}
          id={id}
          style={background ? { backgroundColor: `${background}` } : null}
        >
          <Content>
            <MilaGridVoid>
              <div className={`${css.row__bubbleWrap} ${css.slice__wrap}`}>
                <MilaGridColumn
                  columns={['sm-12', 'lg-10', 'xl-8', 'xxl-6']}
                  offset={['lg-1', 'xl-2', 'xxl-3']}
                >
                  <h2 className={css.slice__title}>{title}</h2>
                  {description && (
                    <div className={`lead-2 ${css.slice__description}`}>
                      {description}
                    </div>
                  )}
                </MilaGridColumn>
                <MilaGridColumn
                  {...(children?.props?.children.length > 2
                    ? { columns: ['sm-12', 'lg-10'], offset: ['lg-1'] }
                    : {
                        columns: ['sm-12', 'lg-10', 'xl-8', 'xxl-6'],
                        offset: ['lg-1', 'xl-2', 'xxl-3'],
                      })}
                >
                  <div className={css.slice__items}>{children}</div>
                </MilaGridColumn>
              </div>
            </MilaGridVoid>
          </Content>
        </div>
      );
    case 'Campaign':
      return (
        <div
          className={
            fullWidthCampaign
              ? `${sliceClassNames} ${css.slice__campaign}`
              : sliceClassNames
          }
          id={id}
        >
          <Content>
            {fullWidthCampaign && (
              <div className={css.ribbon}>
                <SaleSVG />
              </div>
            )}
            <MilaGridVoid>
              <MilaGridColumn
                columns={['sm-12', 'lg-10', 'xl-8', 'xxl-6']}
                offset={['lg-1', 'xl-2', 'xxl-3']}
                className={css.slice__wrap}
              >
                {title && <h2 className={css.slice__title}>{title}</h2>}
                {description && (
                  <div
                    className={`lead-2 ${css.slice__description} ${css.slice__description__campaign}`}
                  >
                    {description}
                  </div>
                )}
                <div className={css.slice__items}>{children}</div>
              </MilaGridColumn>
            </MilaGridVoid>
          </Content>
        </div>
      );

    default:
      return (
        <div
          className={sliceClassNames}
          id={id}
          style={background ? { backgroundColor: `${background}` } : null}
        >
          <Content>
            <MilaGridVoid>
              <MilaGridColumn
                columns={['sm-12', 'lg-10', 'xl-8', 'xxl-6']}
                offset={['lg-1', 'xl-2', 'xxl-3']}
                className={css.slice__wrap}
              >
                {title && <h2 className={css.slice__title}>{title}</h2>}
                {description && (
                  <div className={`lead-2 ${css.slice__description}`}>
                    {description}
                  </div>
                )}
                <div className={css.slice__items}>{children}</div>
              </MilaGridColumn>
            </MilaGridVoid>
          </Content>
        </div>
      );
  }
};

export default Slice;