import { createMemo, mergeProps } from 'solid-js';
import { GeneralObserver } from '../general-observer';
import { getPadding } from '../../utilities';
export const YouTube = (props) => {
    const props_ = mergeProps({
        aspectRatio: '16:9',
        autoPlay: false,
        skipTo: { h: 0, m: 0, s: 0 },
        noCookie: false,
    }, props);
    const startTime = createMemo(() => {
        const { h, m, s } = props_.skipTo;
        return (h ?? 0) * 60 + m * 60 + s;
    });
    const source = createMemo(() => `//www.youtube${props_.noCookie ? '-nocookie' : ''}.com/embed/${props_.youTubeId
        ? `${props_.youTubeId}?&autoplay=${props_.autoPlay.toString()}&start=${startTime()}`
        : `&videoseries?list=${props_.youTubePlaylistId ?? ''}`}`);
    return (<GeneralObserver>
      <div class="youtube-solid-social" style={{
            position: 'relative',
            width: '100%',
            ...getPadding(props_.aspectRatio),
        }}>
        <iframe class="youtube" title={`youtube-${props_.youTubeId ?? props_.youTubePlaylistId ?? ''}`} src={source()} allow="accelerometer; autoplay; encrypted-media; fullscreen; gyroscope; picture-in-picture" style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
        }}/>
      </div>
    </GeneralObserver>);
};