import React from 'react';
import styled from 'styled-components';

interface StyleProps {
  backgroundColor: string;
  minHeight: string;
  src: string;
}

interface VideoProps {}

interface Props {
  backgroundColor: string;
  children: React.ReactNode;
  minHeight: string;
  mp4: string;
  src: string;
  theme: string;
  webm: string;
}

const CoverBackground = ({ backgroundColor, children, minHeight, mp4, src, theme, webm }: Props) => {
  return (
    <Cover data-test="component-cover-background" id="nwc--cover-background" className={theme} src={src} backgroundColor={backgroundColor} minHeight={minHeight}>
      {(webm || mp4) && (
        <CoverVideo id="nwc--video" playsInline autoPlay muted loop>
          <source data-test="component-cover-background-webm" src={webm} type="video/webm" />
          <source data-test="component-cover-background-mp4" src={mp4} type="video/mp4" />
        </CoverVideo>
      )}
      <div style={{ zIndex: 9, position: 'relative', width: '100%' }}>{children}</div>
    </Cover>
  );
};

export default CoverBackground;

/* styles */
const Cover = styled.div<StyleProps>`
  background-image: ${({ src }) => `url(${src})`};
  background-color: ${({ backgroundColor }) => backgroundColor};
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  position: relative;
  min-height: ${({ minHeight }) => minHeight};
`;

const CoverVideo = styled.video<VideoProps>`
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  min-width: 100%;
`;