import React, { useCallback, useEffect, useMemo, useState } from 'react';
import Picture from '../../components/Picture';
import CaptureBar from './CaptureBar';
import Box from '../../themeComponents/ContentBox/InfoBox';
import { uuid, LM_DB } from '@zenview/micro-utils';
import { fullScreenHelper } from '@zenview/micro-utils';
import { useHistory } from 'react-router-dom';
import './index.less';

const defaultmenus = [
  { pathname: '/faceLibrary/search', dbName: 'faceLibs', title: '搜人脸', icon: 'icon-S_Bar_Face' },
  { pathname: '/bodyLibrary/search', dbName: 'bodyLibs', title: '搜人体', icon: 'icon-S_Bar_Body' },
  { pathname: '/vehicleLibrary/search', dbName: 'vehicleLibs', title: '搜机动车', icon: 'icon-S_Bar_Motor' },
  { pathname: '/nonVehicleLibrary/search', dbName: 'nonVehicleLibs', title: '搜非机动车', icon: 'icon-S_Bar_NonMotor' },
];

const Rect_Type = {
  face: 'faceSearch',
  body: 'bodySearch',
  vehicle: 'vehicleSearch',
  nonVehicle: 'nonVehicleSearch',
};

function CaptureImgView({ drawArea, imagePath, type = 'face', menus = defaultmenus, rects = [], frameSelectJumpPage, data, showIntelligent = true, isShowDefaultRect = true, isShowDefaultRoi = true, imgDownload, minHeight = 600, width, height, onPageChange, extContent, ...res }) {
  const [selectStatus, setSelectStatus] = useState(false);
  const [isDefaultRect, setIsDefaultRect] = useState(isShowDefaultRect);
  const [roiShow, setRoiShow] = useState(isShowDefaultRoi);

  const structuredRects = useMemo(v => rects.filter(v => v.type !== 'roi'), [rects])
  const roiRects = useMemo(v => roiShow ? rects.filter(v => v.type === 'roi') : [], [rects, roiShow])
  const memoRect = useMemo(() => (isDefaultRect ? structuredRects.filter((v) => v.isDefault) : structuredRects), [structuredRects, isDefaultRect]);
  const history = useHistory();

  useEffect(() => {
    setRoiShow(isShowDefaultRoi)
  }, [isShowDefaultRoi])
  
  const onMenuClick = useCallback(
    (item) => {
      const dbId = uuid();
      const db = new LM_DB(item.dbName);
      onPageChange && onPageChange(item);
      db.put({ id: dbId, defaultUrl: item.base64, frameUrl: item.base64 }).then(() => {
        history.push(`${item.pathname}?dbId=${dbId}`);
      });
      setSelectStatus(false);
      // eslint-disable-next-line react-hooks/exhaustive-deps
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [onPageChange]
  );
  // 默认结构化框点击事件
  const onClickRect = (item) => {
    if (item.feature) {
      // bug[8503], " || rectUrl", modify by zhangyu, 2020.4.15
      goPage({
        name: Rect_Type[item.type],
        imageUrl: item.url || item.base64,
        searchType: '2',
        feature: item.feature,
        defaultItem: item,
      });
    } else {
      goPage({
        name: Rect_Type[item.type],
        imageUrl: item.base64,
        searchType: '1',
        defaultItem: item,
      });
      // message.info('没有提取到结构化特征')
    }
  };

  // 框选搜图事件
  const goPage = ({ name, imageUrl, searchType = '1', feature = '', defaultItem = {}, isSelect = false }) => {
    fullScreenHelper.exitFullscreen();
    // debugger
    let param = {
      moduleName: name,
      rects: !isSelect ? rects : undefined,
      defaultUrl: imageUrl,
      frameUrl: !isSelect ? imagePath : imageUrl,
      defaultRect: defaultItem,
      searchType,
      searchData: {
        feature,
        imgId: !isSelect ? data.imgId : undefined,
        id: defaultItem.smId,
        startTime: data.alarmTime * 1 - 3 * 24 * 60 * 60 * 1000,
        endTime: data.alarmTime * 1 + 3 * 24 * 60 * 60 * 1000,
      },
    };
    if (!frameSelectJumpPage || !name) {
      return;
    }
    frameSelectJumpPage(param);
    // defaultItem.smId && frameSelectJumpPage(param);
  };
  return (
    <Box className="capture-img-view-layout">
      <Picture className="capture-picture-view-wrapper" drawArea={drawArea} roiRects={roiRects} imagePath={imagePath} menus={menus} isOpenSelect={selectStatus} rects={memoRect} onMenuClick={onMenuClick} onClickRect={onClickRect} imgDownload={imgDownload} minHeight={minHeight} width={width} height={height} {...res} />
      <CaptureBar data={data} showIntelligent={showIntelligent} setSelectStatus={setSelectStatus} roiShow={roiShow} setRoiShow={setRoiShow} isOpenSelect={selectStatus} type={type} isDefaultRect={isDefaultRect} setIsDefaultRect={setIsDefaultRect} {...res} />
      {extContent}
    </Box>
  );
}

export default CaptureImgView;
