import React from 'react';
import { useBarStatus } from '../utils';

import { Shared as microShared, Dict, BaseStore, LMConfig } from '@zenview/micro-basic-library'
import IconFont from '../../../themeComponents/IconFont'
import AuthComponent from '../../AuthComponent'
import { Bar } from '../ocean-player';
import { fullScreenHelper } from '@zenview/micro-utils';
const { qj } = Dict.device;
function VideoTitle({ title, onClose, player, isFile, onRectClick, downloadAction, type, getImageUrl, openPresetPanel, cid, deviceSource, menus, draggable,
  onDragOver, deviceInfo = {}, history }) {
  const barStatus = useBarStatus(player);
  const deviceData = BaseStore.device.getDeviceById(deviceInfo.id) || {};
  // 权限拦截，优先走系统配置
  const hasStorage = LMConfig.BSConfig.player?.patternAuth ? deviceData.hasStorage : true;
  const hasFrontEnd = LMConfig.BSConfig.player?.patternAuth ? deviceData.hasFrontEnd : true;
  const defaultLinks = [
    {
      icon: 'icon-S_View_FocalBig',
      title: '搜原始抓拍记录',
      type: 'summary',
      moduleName: 'videoSummary',
      actionName: "originalRecord",
    },
    {
      icon: 'icon-S_Bar_Face',
      title: '搜人脸',
      type: 'face',
      moduleName: '/faceLibrary/view',
      actionName: 'faceLook',
    },
    {
      icon: 'icon-L_AID_Body1',
      title: '搜人体',
      type: 'body',
      moduleName: '/bodyLibrary/bodyView',
      actionName: 'bodyLook',
    },
    {
      icon: 'icon-S_Bar_Motor',
      title: '搜机动车',
      type: 'vehicle',
      moduleName: 'vehicleLibrary',
      actionName: 'vehicleLook',
    },
    {
      icon: 'icon-S_Bar_NonMotor',
      title: '搜非机动车',
      type: 'nonVehicle',
      moduleName: 'nonVehicleLibrary',
      actionName: 'nonVehicleLook',
      placement: 'bottomRight',
    },
  ];
  const cloudDownLoad = function (e) {
    downloadAction('cloudDownload')
  }

  const frontDownLoad = function (e) {
    downloadAction('frontDownload')
  }
  const goPage = async (e, type, moduleName) => {
    if (e.stopPropagation) {
      e.stopPropagation();
    } else {
      e.cancelBubble = true;
    }
    fullScreenHelper.exitFullscreen();
    const cids = [cid];
    let shouldGo = true,
      dbData,
      paramName,
      state;
    switch (type) {

      case 'summary':
        dbData = { searchData: { cids } };
        break;
      case 'face':
        paramName = "faceLibs";
        dbData = { searchData: { cids } };
        break;
      case 'body':
        paramName = "bodyLibs";
        dbData = { searchData: { cids } };
        break;
      case 'vehicle':
        dbData = { searchData: { cids } };
        break;
      case 'nonVehicle':
        dbData = { searchData: { cids } };
        break;
      default:
        shouldGo = false;
        break;
    }
    if (shouldGo) {
      handleLink({ type, cids, state });
    }

  };

  const handleLink = ({ type, cids, state = {} }) => {
    let options = { history, cids }
    if (type === "summary") {
      microShared.jumpCameraSnapshot(options);
    }
    if (type === "face") {
      microShared.jumpFaceLibrary(options);
    }
    if (type === "body") {
      microShared.jumpBodyLibrary(options);
    }
    if (type === "vehicle") {
      microShared.jumpVehicleLibrary(options);
    }
    if (type === "nonVehicle") {
      microShared.jumpNonVehicleLibrary(options);
    }

  };
  //type测试
  return (
    <div
      className={`lm-c-video-title ${barStatus === 'hide' || !isFile ? 'hide-video-title' : ''}`}
      draggable={draggable}
      onDragOver={onDragOver}
    >
      <span>{title}</span>
      {type === qj.value && deviceSource === "cig" && menus.preset && (
        <>
          <AuthComponent actionName="ptzPrese">
            <span>
              <IconFont type="icon-M_AID_Addto" title="添加预置位" onClick={getImageUrl} style={{ marginRight: "10px" }} />
            </span>
          </AuthComponent>
          <AuthComponent actionName="ptzPrese">
            <span>
              <IconFont type="icon-S_AID_PTZ" title="预置位巡航" onClick={() => openPresetPanel(cid)} style={{ marginRight: "10px" }} />
            </span>
          </AuthComponent>
        </>
      )}
      {
        defaultLinks.map(v => {
          return <AuthComponent actionName={v.actionName} key={v.actionName}>
            <Bar onClick={(e) => { goPage(e, v.type, v.moduleName) }} className="controller-item">
              <IconFont className="lm-player-iconfont" type={v.icon} title={v.title} />
            </Bar>
          </AuthComponent>
        })
      }
      {menus.captrueSearch && (
        <Bar onClick={onRectClick} className="controller-item">
          <IconFont className="lm-player-iconfont" type={'icon-S_View_SearchBox'} title={'框选搜图'} />
        </Bar>
      )}
      {menus.download && hasStorage && (
        <Bar onClick={cloudDownLoad} className="controller-item">
          <IconFont type="icon-S_Please_yunluxiang" title="云录像下载" />
        </Bar>
      )}
      {menus.download && hasFrontEnd && (
        <Bar onClick={frontDownLoad} className="controller-item">
          <IconFont type="icon-S_Please_qianduanluxiang" title="前端录像下载" />
        </Bar>
      )}
      {onClose && (
        <span>
          <IconFont type="icon-S_Edit_LineClose" onClick={onClose} title="关闭" />
        </span>
      )}
    </div>
  );
}

export default React.memo(VideoTitle);
