import { mergeProps } from 'solid-js';
import { GeneralObserver } from '../general-observer';
import { getPadding } from '../../utilities';
import { handleWistiaLoad } from './utilities';
export const Wistia = (props) => {
    const props_ = mergeProps({
        allowfullscreen: true,
        aspectRatio: '16:9',
        width: '100%',
        height: '100%',
        autoPlay: false,
    }, props);
    return (<GeneralObserver onEnter={handleWistiaLoad}>
      <div class="wistia-container-solid-social" style={{
            position: 'relative',
            width: '100%',
            ...getPadding(props_.aspectRatio),
        }}>
        <iframe title={`wistia-${props_.videoId}`} class="wistia-solid-social" src={`//fast.wistia.net/embed/iframe/${props_.videoId}${props.autoPlay ? '?autoPlay=true' : ''}`} allow={`autoplay; ${props_.allowfullscreen ? 'fullscreen' : ''}`} style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: props_.width,
            height: props_.height,
        }}/>
      </div>
    </GeneralObserver>);
};