import React from 'react';
import PropTypes from 'prop-types';
import { CircleMarker, Popup } from 'react-leaflet';
import theme from '../style/theme';
import { spacedataElementStruct } from '../redux/modules/spacedata';


const markerColor = (spacedata) => {
  switch (spacedata.state?.open) {
    case true:
      return theme.palette.secondary.light;
    case false:
      return theme.palette.error.light;
    default:
      return theme.palette.primary.main;
  }
};
const Marker = (props) => {
  // change color based on space status
  const color = markerColor(props.spacedata);
  // const color = props.highlight ? theme.palette.secondary.light :

  const style = {
    container: {
      display: 'flex',
    },
    logo: {
      width: '50px',
      marginRight: '5px',
    },
  };

  return (
    <CircleMarker
      fillColor={color}
      color={color}
      radius={5}
      center={[props.spacedata.location.lat, props.spacedata.location.lon]}
    >
      <Popup
        onOpen={() => props.toggleFilterSpacedata(props.spacedata.space)}
        onClose={() => props.toggleFilterSpacedata(props.spacedata.space)}
      >
        <div style={style.container}>
          <div>
            {props.spacedata.space}
            <br />
            <a href={props.spacedata.url}>
              {props.spacedata.url}
            </a>
          </div>
        </div>
      </Popup>
    </CircleMarker>
  );
};

Marker.propTypes = {
  spacedata: spacedataElementStruct.isRequired,
  highlight: PropTypes.bool.isRequired,
  toggleFilterSpacedata: PropTypes.func.isRequired,
};

export default Marker;