import { c, useProp, useRef, h } from 'atomico';
import Maybe from 'purify-ts/es/Maybe';
import Eplayer from 'eplayer';

function getComponentOrDefine(name, comp) {
  if (!customElements.get(name)) { customElements.define(name, c(comp)); }
  // customElement(name, comp as Component); }
  return customElements.get(name);
}

const mockStyle = `
    .mock {
        
    }
`;

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-video-player/kun-video-player.tsx";/* eslint-disable */
  //注册 customElement
customElements.define('e-player', Eplayer);


const KunVideoPlayer = () => {

  const [url] = useProp("url");

  const [height] = useProp("height");
  const r = useRef();
  const heightVideo = Maybe.Maybe.fromNullable(height).orDefault(400);
  return (
    h('host', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 22}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 23}}, mockStyle)
      , h('div', { className: "w-full", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 24}} 
        , h('e-player', { src: url, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 25}})
      )
    )
  );
};

KunVideoPlayer.props = {
  height: {
    type: Number,
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
  url: {
    type: String,
    value: "kun-video-player",
    reflect: true,
    event: {
      type: "changeMessage",
    },
  },
};

var kunVideoPlayer = getComponentOrDefine("kun-video-player", KunVideoPlayer);

export default kunVideoPlayer;
