import React from "react";
import Drawer from '../../themeComponents/Drawer';
import LMap from '../LMap'
import { isEqual } from '@zenview/micro-utils';

class MapSeelct extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.defaultValue || props.value
    };
  }

  UNSAFE_componentWillReceiveProps(props) {
    if (isEqual(props.value, this.props.value)) {
      this.setState({
        value: props.value || []
      });
    }
  }

  onChange = ids => {
    this.setState({ value: ids });
  };
  onSunChange = () => {
    this.props.onChange && this.props.onChange(this.state.value);
    this.props.onClose && this.props.onClose();
  };
  render() {
    const {
      points,
      value,
      onChange,
      onClose,
      ...props
    } = this.props;
    return (

        <Drawer className="lm-c-map-select-drawer-content" disabled={
          !Array.isArray(this.state.value) || this.state.value.length === 0
        }
        onOk={this.onSunChange}
        onClose={onClose}
        {...props}
      >
        <LMap.SelectPointsMap
          points={points}
          selectKeys={this.state.value}
          onChange={this.onChange}
        />
      </Drawer>
    );
  }
}

export default MapSeelct;
