import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Container from '../../Layout/Container';
import Wave from '../../Wave';
import PMU from './svg/pmu.svg';
import Jacadi from './svg/jacadi.svg';
import OperadeParis from './svg/operadeparis.svg';
import Century21 from './svg/century21.svg';
import Aigle from './svg/aigle.svg';
import Backmarket from './svg/backmarket.svg';
import Ornikar from './svg/ornikar.svg';
import Payfit from './svg/payfit.svg';

const Root = styled.div`
  position: relative;
  text-align: center;

  [class*='wave-top'] {
    transform: translateY(2px);
  }

  [class*='wave-bottom'] {
    transform: translateY(-2px);
  }

  h2 {
    font-family: ${props => props.theme.fonts.text};
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: ${props => props.theme.colors.grey.v400};
    text-transform: uppercase;
  }
`;

const Wrapper = styled.div`
  position: relative;
  z-index: 100;
  padding: 40px 0;
  background: ${props => props.theme.colors.secondary};
`;

const Logos = styled.ul`
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 80px;
  padding: 20px 0;
  margin-bottom: -40px;

  > li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 90px;

    > span {
      z-index: -1;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 0;
      overflow: hidden;
    }
  }

  svg {
    width: 100%;
    height: 100%;
    margin: 20px;

    path:not([fill]) {
      fill: #ffffff;
    }

    path:not([stroke]) {
      stroke: none;
    }
  }
`;

const Content = styled.div`
  padding: 60px 0 0;

  @media (min-width: ${props => props.theme.breakpoints.large}px) {
    padding: 80px 0 0;
  }
`;

const inlineSvg = {
  pmu: <PMU />,
  jacadi: <Jacadi />,
  operadeparis: <OperadeParis />,
  century21: <Century21 />,
  aigle: <Aigle />,
  backmarket: <Backmarket />,
  ornikar: <Ornikar />,
  payfit: <Payfit />
};

const TrustedBy = ({ withWaves, title, partners, children }) => {
  if (!partners || partners.length === 0) {
    return <></>;
  }

  // If there is no active partners, do not display this component
  const activePartners = partners.filter(partner => {
    return partner.active && typeof inlineSvg[partner.code] !== 'undefined';
  });
  if (activePartners.length === 0) {
    return <></>;
  }

  return (
    <Root>
      {withWaves ? <Wave absoluteTop name="wave-top-fantasy" height={400} /> : null}
      <Wrapper>
        <Container>
          {title ? <h2>{title}</h2> : null}
          <Logos>
            {activePartners.map((partner, key) => (
              <li key={key}>
                {inlineSvg[partner.code]}
                <span>{partner.code}</span>
              </li>
            ))}
          </Logos>
          {children ? <Content>{children}</Content> : null}
        </Container>
        {withWaves ? <Wave absoluteBottom name="wave-bottom-fantasy" /> : null}
      </Wrapper>
    </Root>
  );
};

TrustedBy.propTypes = {
  withWaves: PropTypes.bool,
  title: PropTypes.string,
  partners: PropTypes.array,
  children: PropTypes.any
};

export default TrustedBy;