import React from 'react';
import { getDeviceIcon, getDeviceIconColor } from './config';
import * as L from 'leaflet';
import '../style/over-lay.less';
import DeviceIcon from '../../DeviceIcon';
import IconFont from '../../../themeComponents/IconFont';
import SearchInput from '../../../components/SearchInput';
import LabelValue from '../../../components/LabelValue';
import base64 from '../base64';
const { ALARM_IMG, POLICEMANNEW_IMG, GPS_POLICEMAN_IMG, POLICECARNEW_IMG, S_Control_AbnormalGroup_IMG, BEGIN_IMG, END_IMG, CAR_IMG, MapCenter_IMG, 
  DELETE_IMG, GPSCAR_IMG, Place_Avatar_Normal } = base64;

export function createDeviceIcon(point) {
  const options = getDeviceIcon(point.deviceType, point.deviceStatus);
  return L.divIcon({
    iconSize: [30, 30],
    iconAnchor: [15, 30],
    html: `<div class="marker-layout"><div class="marker-cricle-layout" style="background:${options.bgColor}"><img src="${options.url}"/></div></div>`,
  });
}

export function createIconByDirection(point, zoom) {
  const options = getDeviceIconColor(point.deviceType, point.deviceStatus);
  return L.divIcon({
    iconSize: [30, 30],
    iconAnchor: [15, 30],
    html: `<div class="marker-layout-direction">
     <div class="marker-direction ${point.cameraOrientationCode && point.cameraOrientationCode !== '' ? 'marker-direction-' + point.cameraOrientationCode * 1 : ''}"  style="${
      point.cameraOrientationCode && point.cameraOrientationCode !== ''
        ? `background-image: linear-gradient(to top right,${options.bgColor}, rgba(222, 217, 223, 0) 70%,rgba(222, 217, 223, 1) 30%)`
        : `display:none`
    }"></div>
        <div class="marker-cricle-layout" style="background:${options.bgColor}">
          <img src="${options.url}"/>
        </div>
    </div>`,
  });
}

export function createDeviceIconFinal(point) {
  const options = getDeviceIcon(point.deviceType, point.deviceStatus);
  return L.divIcon({
    iconSize: [30, 30],
    iconAnchor: [15, 30],
    html: `<div class="marker-layout"><div class="marker-cricle-layout marker-cricle-layout-final" style="background:${options.bgColor}"><img src="${options.url}"/></div></div>`,
  });
}

export function creatAlarm() {
  return L.divIcon({
    iconSize: [70, 70],
    iconAnchor: [30, 30],
    html: `${`<div class="marker-layout-alarm marker-layout-high" style="backgroundColor:"transparent"><img src="${ALARM_IMG}"/></div>`}`,
  });
}

export function createPoliceManIcon(point, name) {
  //const options = getDeviceIcon(point.deviceType, point.deviceStatus);
  let content = '';
  if (name === '警员') {
    //gps推送
    content = `<img src="${GPS_POLICEMAN_IMG}"/>`;
  } else {
    content = '<span class="device-point">' + name + `</span><img src="${POLICEMANNEW_IMG}"/>`;
  }
  return L.divIcon({
    iconSize: [30, 30],
    iconAnchor: [15, 30], // style="background:${options.bgColor}"
    html: `<div class="marker-layout"><div class="marker-cricle-layout-policeman">${content}</div></div>`,
  });
}
export function createPoliceCarIcon(point, name) {
  //const options = getDeviceIcon(point.deviceType, point.deviceStatus);
  let content = '';
  if (name === '警车') {
    //gps推送图片
    content = `<img src="${GPSCAR_IMG}"/>`;
  } else {
    content = '<span class="device-point">' + name + `</span><img src="${POLICECARNEW_IMG}"/>`;
  }
  return L.divIcon({
    iconSize: [30, 30],
    iconAnchor: [15, 30], // style="background:${options.bgColor}"
    html: `<div class="marker-layout"><div class="marker-cricle-layout-car">${content}</div></div>`,
  });
}

export function createStartEnd(point, index) {
  return L.divIcon({
    iconSize: [30, 30],
    iconAnchor: [16, 34],
    html: `${
      index === 0
        ? `<div class="marker-layout"><div class="mark-begin-or-end" style=""><img src="${BEGIN_IMG}"/></div>`
        : `<div class="marker-layout"><div class="mark-begin-or-end" style=""><img src="${END_IMG}"/></div>`
    }`,
  });
}

export function createCarTragey(point, index) {
  return L.divIcon({
    iconSize: [50, 50],
    iconAnchor: [15, 50],
    html: `${`<div class="marker-layout"><div class="mark-begin-or-end-car"><img src="${CAR_IMG}"/></div>`}`,
  });
}

export function createDeviceIconHigh(point) {
  const options = getDeviceIcon(point.deviceType, point.deviceStatus);
  return L.divIcon({
    iconSize: [30, 30],
    iconAnchor: [15, 30],
    html: `<div class="marker-layout marker-layout-high"><div class="marker-cricle-layout" style="background:${options.bgColor} "><img src="${options.url}"/></div></div>`,
  });
}

export function createDeviceShowMovingPosition(point) {
  const options = getDeviceIcon(point.deviceType, point.deviceStatus);
  return L.divIcon({
    iconSize: [50, 50],
    iconAnchor: [30, 60],
    html: `<div class="marker-layout marker-layout-high-move"><div class="marker-cricle-layout" style="background:${options.bgColor} "><img src="${CAR_IMG}"/></div>`,
  });
}

export function createPlaceSetDeviceIcon(point, fixColor) {
  const options = getDeviceIcon(point.deviceType, point.deviceStatus);
  let color = getPlaceAssignTypeColor(point);
  return L.divIcon({
    iconSize: [30, 30],
    iconAnchor: [15, 30],
    html: `<div class="marker-layout"><div class="marker-cricle-layout" style="background-color:${color};border:1px solid ${fixColor ? fixColor : color}"><img src="${options.url}"/></div></div>`,
  });
}

export function getPlaceAssignTypeColor(point) {
  let color = 'var(--danger)';
  if (point.isCurrent) {
    color = 'var(--primary)';
  }
  if (point.isChild) {
    color = 'var(--info)';
  }
  return color;
}

export function createMapCenterIcon() {
  return L.divIcon({
    iconSize: [28, 40],
    iconAnchor: [14, 40],
    html: `<img src="${MapCenter_IMG}" />`,
  });
}

export function createCenterDeviceIcon(point) {
  const options = getDeviceIcon(point.deviceType, point.deviceStatus);
  const status = options.isOnline ? 'onLine' : 'outLine';
  return L.divIcon({
    iconSize: [30, 30],
    iconAnchor: [15, 30],
    html: `<div class="marker-center-layout"><div class=${status} ><img style="width:16px" src="${options.url}"/></div></div>`,
  });
}

export function createAbnormalGroupIcon({ isCenter, item }) {
  return L.divIcon({
    iconSize: isCenter ? [24, 32] : [70, 70],
    iconAnchor: isCenter ? [12, 32] : [35, 70],
    html: !isCenter
      ? `
    <div class="map-avatar-content" style="border-color:${item.direction === 'in' ? '#ff8800' : '#2299ff'}">
      <div class="bd"><img src="${item.faceUrl}" /></div>
    </div>`
      : `<div class="marker-layout-index"><img style="width:16px" src="${S_Control_AbnormalGroup_IMG}"/></div>`,
  });
}

export function createAbnormalPersonTrajectoryIcon(item) {
  return L.divIcon({
    iconSize: [70, 70],
    iconAnchor: [35, 70],
    html: `
    <div class="map-avatar-content" style="border-color:#ff8800">
      <div class="bd"><img src="${item.faceUrl}" /></div>
    </div>`,
  });
}

export function createIndexIcon(index) {
  return L.divIcon({
    iconSize: [24, 32],
    iconAnchor: [12, 32],
    html: `<div class="marker-layout-index">${index}</div>`,
  });
}

export function createPlaceCenterIcon() {
  return L.divIcon({
    iconSize: [24, 32],
    iconAnchor: [12, 32],
    html: `<div class="marker-layout-index marker-layout-place-center"></div>`,
  });
}

export function createIndexIconYellow(index) {
  return L.divIcon({
    iconSize: [24, 32],
    iconAnchor: [12, 32],
    html: `<div class="marker-layout-index marker-layout-point-yellow">${index}</div>`,
  });
}

export function createPlaceIcon(type) {
  const { Dict } = window;
  // const item = Dict.map.placeType.find(v => v.value === type);
  const item = Dict.map.placeTypeImg.find((v) => v.value === type);
  return L.divIcon({
    iconSize: [28, 40],
    iconAnchor: [14, 40],
    html: `<div class="marker-layout place-marker-layer"><div class="marker-cricle-layout" style='background:#f80'><img style='width:34px !important;height:34px !important' src="${item.img}" /></div></div>`,
  });
}

export function createHighFeqPlaceIcon() {
  return L.divIcon({
    iconSize: [28, 40],
    iconAnchor: [14, 40],
    html: `<div class="place-feq-marker-layer"><div class="feq-place-icon"></div></div>`,
  });
}

export function createDistanceIcon(centerRadius) {
  return L.divIcon({
    iconSize: [68, 18],
    iconAnchor: [34, 9],
    html: `<div class="distance-layout-index">半径${centerRadius}m</div>`,
  });
}
export class MutipleDevice extends React.Component {
  state = {
    keyword: '',
  };
  onChange = (keyword) => {
    this.setState({ keyword });
  };
  render() {
    const { keyword } = this.state;
    let { points = [], renderIconGroup, itemClick, isPlaceAssign } = this.props;
    if (keyword) {
      points = points.filter((v) => v.deviceName.indexOf(keyword) > -1);
    }
    return (
      <>
        <div className="mutiple-search-input">
          <SearchInput onChange={this.onChange} placeholder="请输入设备名称搜索" />
        </div>
        <div className="mutiple-device-layout">
          {points.map((v) => (
            <div key={v.id} className="mutiple-device-item">
              <span className="mutiple-item-title" onClick={() => itemClick && itemClick(v)}>
                <DeviceIcon type={v.deviceType} status={v.deviceStatus} style={isPlaceAssign ? { color: getPlaceAssignTypeColor(v) } : undefined} />
                {v.deviceName}
              </span>
              {renderIconGroup && <span className="mutiple-jump-item">{renderIconGroup(v)}</span>}
            </div>
          ))}
        </div>
      </>
    );
  }
}

export const SingleDevice = function ({ point, renderIconGroup, itemClick }) {
  const options = getDeviceIcon(point.deviceType, point.deviceStatus);

  return (
    <>
      <div className={`marker-title arrow-map-layout`}>{point.deviceName}</div>
      <div onClick={() => itemClick && itemClick(point)} className="marker-layout marker-icon">
        <div className="marker-cricle-layout" style={{ background: options.bgColor }}>
          <img src={options.url} alt="" />
        </div>
      </div>
      {renderIconGroup && <div className="jump-group">{renderIconGroup(point)}</div>}
    </>
  );
};

export const TaskDevice = function ({ point, renderIconGroup, img }) {
  return (
    <>
      <div className="task-img">
        <img src={img} alt="" />
      </div>
      {renderIconGroup && <div className="jump-group">{renderIconGroup && renderIconGroup(point)}</div>}
    </>
  );
};

export const PlacePointLabel = ({ point, placeInfo, cancelGeo, resetGeo, isChangeGeo, hasGeo }) => {
  return (
    <div className="map-select-place-popup">
      <div className="map-select-device-lable">
        <LabelValue label="设备名称" value={point?.deviceName} />
        <LabelValue label="所属场所" value={placeInfo?.areaName} />
      </div>
      {(isChangeGeo || hasGeo) && (
        <div className="map-geo-toopls">
          {isChangeGeo && (
            <span className="reset-geo" onClick={resetGeo}>
              重置经纬度
            </span>
          )}
          {hasGeo && (
            <span className="cancel-geo" onClick={cancelGeo}>
              取消经纬度
            </span>
          )}
        </div>
      )}
    </div>
  );
};

// 吸毒人员专题图标
export function addictPlaceIcon(point, imgSrc) {
  return L.divIcon({
    iconSize: [30, 30],
    iconAnchor: [15, 30],
    html: `<div class="addict-place-marker-layout"><img src="${imgSrc}"/></div>`,
  });
}

// 场所点位标注
export function setPlaceIcon(imgSrc) {
  return L.divIcon({
    iconSize: [20, 20],
    iconAnchor: [10, 20],
    html: `<div class="addict-place-marker-layout" ><img src="${imgSrc}"/></div>`,
  });
}

export class MutipleDeviceAndPlace extends React.Component {
  state = {
    keyword: '',
  };
  onChange = (keyword) => {
    this.setState({ keyword });
  };
  getItem = (v) => {
    let { itemClick, isPlaceAssign } = this.props;
    if (v.areaCode) {
      return (
        <span className="mutiple-item-title" onClick={() => itemClick && itemClick(v)}>
          <IconFont type="icon-S_Place_Place" style={{ fontSize: '16px', color: 'var(--icon)', marginRight: '4px' }} />
          {v.areaName}
        </span>
      );
    } else {
      return (
        <span className="mutiple-item-title" onClick={() => itemClick && itemClick(v)}>
          <DeviceIcon type={v.deviceType} status={v.deviceStatus} style={isPlaceAssign ? { color: getPlaceAssignTypeColor(v) } : undefined} />
          {v.deviceName || v.areaName}
        </span>
      );
    }
  };

  render() {
    const { keyword } = this.state;
    let { points = [], renderIconGroup } = this.props;
    if (keyword) {
      points = points.filter((v) => {
        let nameValue = v.deviceName || v.areaName;
        return nameValue.indexOf(keyword) > -1;
      });
    }
    return (
      <>
        <div className="mutiple-search-input">
          <SearchInput onChange={this.onChange} placeholder="请输入名称搜索" />
        </div>
        <div className="mutiple-device-layout">
          {points.map((v) => (
            <div key={v.id} className="mutiple-device-item">
              {this.getItem(v)}
              {renderIconGroup && <span className="mutiple-jump-item">{renderIconGroup(v)}</span>}
            </div>
          ))}
        </div>
      </>
    );
  }
}

export const CreatePoliceManIcon = function (point, name, showEdit, id) {
  const content = name === '警员' ? `<img src="${GPS_POLICEMAN_IMG}" />` : '<span class="device-point">' + name + `</span><img src="${POLICEMANNEW_IMG}" />`;
  return L.divIcon({
    iconSize: [30, 30],
    draggable: showEdit,
    iconAnchor: [15, 30], // style="background:${options.bgColor}"
    html: `<div class="marker-layout ${showEdit ? 'edit' : ''}"><div class="marker-cricle-layout-common marker-cricle-layout-policeman ${showEdit ? 'edit' : ''}">${content}
      <div class="operate-delete" name="${id}"><img src="${DELETE_IMG}"/></div>
      </div>
    </div>`,
  });
};

export const CreatePoliceCarIcon = function (point, name, showEdit, id) {
  const content = name === '警员' ? `<img src="${GPSCAR_IMG}"/>` : '<span class="device-point">' + name + `</span><img src="${POLICECARNEW_IMG}"/>`;
  return L.divIcon({
    iconSize: [30, 30],
    draggable: showEdit,
    iconAnchor: [15, 30], // style="background:${options.bgColor}"
    html: `<div class="marker-layout ${showEdit ? 'edit' : ''}"><div class="marker-cricle-layout-common marker-cricle-layout-car ${showEdit ? 'edit' : ''}">${content}
      <div class="operate-delete" name="${id}"><img  src="${DELETE_IMG}"/></div>
      </div>
    </div>`,
  });
};

export function createJudgementPlaceIcon(url) {
  return L.divIcon({
    iconSize: [30, 30],
    iconAnchor: [15, 30],
    html: `<div class="marker-layout"><div class="marker-cricle-layout" style="background: #ccc"><img src="${url}"/></div></div>`,
  });
}

// 研判分析明细地图轨迹点位
export function createJudgementGroupIcon({ isCenter, item }) {
  return L.divIcon({
    iconSize: isCenter ? [24, 32] : [28, 40],
    iconAnchor: isCenter ? [12, 32] : [14, 40],
    html: isCenter ? `<div class="marker-layout-index"><img style="width:16px" src="${S_Control_AbnormalGroup_IMG}" /></div>` :
    `<div class="lm-tl-judgement-marker-layout-index"><img src='${Place_Avatar_Normal}'></div>`,
  });
}
