import React from 'react';
import PropTypes from 'prop-types';
import { getVideoPaddingTop } from '../../tools/aspectRatios';
import { ASPECT_RATIO_VIDEO } from '../../constants/aspectRatios';
import { createNamespace } from '../../tools/namingTools';
import './styles/VideoPlayer.scss';

const n = createNamespace('VideoPlayer');

const VideoPlayer = ({
    title,
    src
}) => {
    if (!src) {
        return null;
    }

    // Small hack for having iframe to keep the video aspect ratio of 16:9
    const paddingTop = getVideoPaddingTop(ASPECT_RATIO_VIDEO);

    const modifiers = paddingTop && 'smart-ratio';

    const componentVariables = {
        'wrapper-padding-top': paddingTop && `${paddingTop}%`
    };

    return (
        <div {...n('wrapper', modifiers).withVariables(componentVariables).props}>
            <iframe {...n('video', modifiers).withTestId().props} title={title} src={src} />
        </div>
    );
};

VideoPlayer.propTypes = {
    title: PropTypes.string,
    src: PropTypes.string
};

VideoPlayer.defaultProps = {
    title: '',
    src: ''
};

export default VideoPlayer;
