/* eslint-disable */
import {
  h, useEffect, useProp, Component, FunctionalComponent, useRef,
} from "atomico";
// import Plyr from 'plyr';
// import Maybe from "purify-ts/es/Maybe";
import {getComponentOrDefine} from "../../hooks/aync-hook/redirect";
import Eplayer from 'eplayer'
import {Option} from 'funfix';
  //注册 customElement
customElements.define('e-player', Eplayer)

import {mockStyle} from '../../common/mock-style';

const KunVideoPlayer: FunctionalComponent = () => {

  const [url] = useProp<string>("url");

  const [height] = useProp<number>("height");
  const r = useRef();
  const heightVideo = Option.of(height).getOrElse(400);
  return (
    <host>
      <style>{mockStyle}</style>
      <div className="w-full" >
        <e-player src={url}></e-player>
      </div>
    </host>
  );
};

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

export default getComponentOrDefine("kun-video-player", KunVideoPlayer);
