import React, { useMemo, useState } from 'react';
import { formatTimeStamp } from '@zenview/micro-utils';
import IconFont from '../../themeComponents/IconFont';
import RowImageTextCard from '../../themeComponents/CardBox/RowImageTextCard';
import ToolsBar from '../../businessComponents/ToolsBar';
import { Checkbox } from 'antd';
import './index.less';

/**
 *
 * 套一层盒子的原因是由于LinkTools存在计算，渲染性能有影响
 *
 */

function CaptureCard({ className = '', width, height, isFocus,checked, onChecked,imgExt, children, ...data }) {
  const { imgUrl, deviceName, captureTime, hasLinkTools, onClick } = useMemo(() => data, [data]);
  const checkable = (checked === true || checked === false) ? true : false;
  return (
    <RowImageTextCard className={`capture-card-item-box ${className}`} width={width} height={height} isFocus={isFocus} src={imgUrl} onClick={onClick}
      outChildren={
        checkable && (
          <Checkbox
            className="item-check"
            checked={checked}
            value={data.id}
            // disabled={data.latitude && data.longitude ? false : true}
            onClick={onChecked}
          />
        )
      }
      imgExt={imgExt}
    >
       {children ? children :
        <>
          <div className="card-info-item">
            <IconFont type="icon-S_Bar_Add" />
            <span>{deviceName}</span>
          </div>
          <div className="card-info-item">
            <IconFont type="icon-S_Edit_ClockStart" />
            <span>{formatTimeStamp(captureTime)}</span>
          </div>
        </>
       }
      {hasLinkTools && <ToolsBar.LinkTools {...data} />}
    </RowImageTextCard>
  );
}

/**
 * linkTools直接渲染会造成虚拟列卡顿，所以做一层代理处理
 * @param
 */
function CaptureBox({ hasLinkTools, ...data }) {
  const [mouseover, setMouseover] = useState(false);
  return hasLinkTools ? (
    <div style={{ width: '100%', height: '100%' }} onMouseMove={() => setMouseover(true)}>
      <CaptureCard {...data} hasLinkTools={mouseover} />
    </div>
  ) : (
    <CaptureCard {...data} />
  );
}

export default CaptureBox;
