import React, { FC } from 'react';
import { Tooltip } from 'antd';
import Icon from '@sensoro/library/lib/components/icon-font';
import classnames from '@pansy/classnames';
import SensorIcon from '@sensoro/library/lib/components/sensor-icon';
import { ORIENTATIONS } from '../../../common/constant/alarm-type';
import { getTextByList } from '../../../utils';
import AlarmMarker from './alarm-marker';
import styles from './index.less';

interface DeviceMarkerProps {
  icon?: string;
  sensorIcon?: string;
  orientations?: number; // 朝向
  offline?: boolean;
  noBorder?: boolean;

  // name
  name?: string;
  alarm?: boolean;
}

// 设备标记点
const DeviceMarker: FC<DeviceMarkerProps> = props => {
  const {
    icon,
    sensorIcon,
    orientations,
    noBorder,
    offline,
    name,
    alarm,
  } = props;

  // 摄像机朝向
  if (orientations) {
    return (
      <div className={styles.camera}>
        <div
          className={styles.orientations}
          style={{
            transform: `rotate(${getTextByList(ORIENTATIONS, orientations, {
              label: 'deg',
            })}deg)`,
          }}
        >
          <div
            className={classnames(styles.view, {
              [styles.offlineview]: offline,
            })}
          />
        </div>
        <div
          className={classnames(styles.marker, { [styles.offline]: offline })}
        >
          {name ? (
            <Tooltip title={name} overlayClassName={styles.tooltip}>
              <SensorIcon type={sensorIcon} />
            </Tooltip>
          ) : (
            <SensorIcon type={sensorIcon} />
          )}
        </div>
      </div>
    );
  }

  if (name) {
    return (
      <div className={styles.marker}>
        <Tooltip title={name} overlayClassName={styles.tooltip}>
          <Icon type={`icon-${icon || 'camera'}`} />
        </Tooltip>
      </div>
    );
  }

  if (sensorIcon) {
    if (alarm) {
      return <AlarmMarker category={sensorIcon} isActive={true} />;
    }
    return (
      <div
        className={classnames({
          [styles.single]: noBorder,
          [styles.marker]: !noBorder,
          [styles.offline]: offline,
        })}
      >
        <SensorIcon type={sensorIcon} />
      </div>
    );
  }
  return noBorder ? (
    <Icon className={styles.single} type={`icon-${icon || 'camera'}`} />
  ) : (
    <div className={styles.marker}>
      <Icon type={`icon-${icon || 'camera'}`} />
    </div>
  );
};

export default DeviceMarker;