import React, { useMemo, useState } from 'react';
import VideoTitle from './components/Title';
import { RightExtBar } from './components/Bar';
// import 'ocean-player/es/player.css';
// import './style/base.less';
import Player from './ocean-player';


function PlayerComponent({ file, className, isLive, title, hasLiveBar = true, hasHistory, hasPauseBar, ...props }) {
  const { onClose } = props;
  const [playObj, setPlayObj] = useState(null);
  const [videoSize, setVideoSize] = useState('contain');
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const videoKey = useMemo(() => file, [file]);
  const isVideoFill = videoSize === 'fill';

  return (
    <Player
      autoPlay={true}
      isLive={false}
      file={file}
      className={`lm-c-player-component ${isVideoFill ? 'video-fill' : 'video-contain'} ${className}`}
      onInitPlayer={(p) => setPlayObj(p)}
      key={videoKey}
      rightExtContents={<RightExtBar captrueSearch={false} player={playObj} isLive={isLive} isVideoFill={isVideoFill} setVideoSize={setVideoSize} />}
    >
      <VideoTitle title={title} menus={{}} file={file} onClose={onClose} player={playObj} />
    </Player>
  );
}

PlayerComponent.defaultProps = {
  isLive: true,
  isLoop: false,
  className: '',
};

export default React.memo(PlayerComponent);
