import React, { FC, CSSProperties, useState, useEffect } from 'react';
import classNames from '@pansy/classnames';
import { Marker } from '@sensoro/react-amap';
import { isString } from 'lodash';
import { Map, SearchAddress, BrowserLocation } from '@/components/map';
import { Position } from '@/components/map/types';
import { formatArrayToLnglat } from '../../utils';
import DeviceMarker from './device-marker';
import Controls from './controls';
import SelectPosition from './select-position';
import MapTheme from '@/components/map/map-theme';
import styles from './index.less';

interface DevicePositionProps {
  value?: Position;
  position?: Position;
  zoom?: number;
  icon?: string;
  sensorIcon?: string;
  orientations?: number; // 摄像机朝向
  offline?: boolean;
  noBorder?: boolean;
  edit?: boolean;
  style?: CSSProperties;
  onClick?: (position?: Position) => void;
  onChange?: (position?: Position, address?: string) => void;
  onBrowerLocation?: (
    position: string | boolean,
    site?: string,
    addressDefault?: string,
  ) => void;
  alarm?: boolean;
  //
  name?: string;
  viewOnly?: boolean;
  hideTheme?: boolean; // 是否隐藏实景模式
  small?: boolean;
  merchantLnglat?: any;
}

const DevicePosition: FC<DevicePositionProps> = props => {
  const {
    position: positions,
    value,
    icon,
    sensorIcon,
    orientations,
    offline,
    edit,
    style,
    onClick,
    onChange,
    onBrowerLocation,
    noBorder,
    zoom = 17,
    name,
    viewOnly,
    alarm,
    hideTheme,
    small,
    merchantLnglat,
  } = props;
  const lnglat: Array<number> = merchantLnglat;

  const position: Position = positions ||
    value || { longitude: lnglat?.[0], latitude: lnglat?.[1] };
  const [copyPosition, setCopyPosition] = useState<Position>();
  const [markerPosition, setMarkerPosition] = useState<Position>();

  const [grid, setGrid] = useState<boolean>(false);

  useEffect(() => {
    if (position && position.latitude && position.longitude) {
      setMarkerPosition(position);
      setCopyPosition(position);
    }
  }, [position]);

  const handleClick = () => {
    if (edit) return;
    onClick?.();
  };

  const handleSelectPositionChange = (position: Position, address: string) => {
    setMarkerPosition(position);
    onChange?.(position, address);
  };

  const searchLngLat = (position: Position) => {
    setCopyPosition(position);
    setMarkerPosition(position);
  };

  // 定位当前并打点
  const handleBrowerLocation = (
    position: string | boolean,
    site?: string,
    addressDefault?: string,
  ) => {
    if (!position) return;
    if (
      isString(position) &&
      !props.position?.latitude &&
      props.position?.longitude
    ) {
      const browerPosition = formatArrayToLnglat(position.split(','));
      setCopyPosition(browerPosition);
      setMarkerPosition(browerPosition);
      onBrowerLocation && onBrowerLocation(position, site, addressDefault);
    }
  };

  return (
    <div
      className={classNames(styles.main, {
        [styles.lock]: !edit,
      })}
      onClick={handleClick}
      style={style}
    >
      {!name && !edit && <div className={styles.mask} />}
      <Map
        zoomEnable={edit}
        zoom={zoom}
        center={copyPosition ?? [116.397798, 39.900297]}
        // features={grid ? [] : ['bg', 'point', 'road']}
      >
        {!viewOnly && edit && <SearchAddress setPosition={searchLngLat} />}
        {!hideTheme && (
          <MapTheme
            small={small}
            defaultStatus={grid}
            onStatusChange={setGrid}
          />
        )}

        {!viewOnly && edit && (
          <SelectPosition onChange={handleSelectPositionChange} />
        )}
        {onBrowerLocation && (
          <BrowserLocation onChange={handleBrowerLocation} />
        )}
        {edit && (
          <Controls
            position={copyPosition}
            onGeoClick={position => {
              setMarkerPosition(position);
              onChange?.(position);
            }}
          />
        )}

        {(markerPosition?.latitude || Array.isArray(markerPosition)) && (
          <Marker
            position={markerPosition}
            offset={[-16, -16]}
            render={() => (
              <DeviceMarker
                name={name}
                icon={icon}
                sensorIcon={sensorIcon}
                orientations={orientations}
                offline={offline}
                noBorder={!!noBorder}
                alarm={alarm}
              />
            )}
          />
        )}
      </Map>
    </div>
  );
};

DevicePosition.defaultProps = {
  edit: false,
};

export default DevicePosition;