import { useState } from 'react';
import './styles.css';
export default function BaseMapButton({
  ...props
}: {
  onClick?: () => void;
  wrapperStyle?: React.CSSProperties;
  tooltipMessage?: string;
  children?: JSX.Element;
  isToggleMenu?: boolean;
  icon?: JSX.Element | (() => JSX.Element);
}) {
  const [showMenu, setShowMenu] = useState(false);
  return (
    <div
      style={{
        position: 'absolute',
        top: '40%',
        transform: 'translateY(-40%)',
        left: 20,
        zIndex: 99999,
        display: 'flex',
        flexDirection: 'column',
        ...props?.wrapperStyle,
      }}
    >
      <div
        className="button-base-map-wrapper"
        style={{
          display: 'flex',
          alignItems: 'center',
        }}
      >
        <div
          className="button-base-map"
          onClick={() => {
            if (props.isToggleMenu) {
              setShowMenu(!showMenu);
            }
            if (props.onClick) props.onClick();
          }}
          style={{
            height: 100,
            width: 100,
            borderRadius: '100%',
            backgroundColor: '#006867',
            boxShadow: '1px 1px 8px rgba(0,0,0,1)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'white',
            cursor: 'pointer',
          }}
        >
          {props.icon && typeof props.icon === 'function'
            ? props.icon()
            : props.icon}
        </div>

        {props.tooltipMessage && !showMenu && (
          <span
            className={'button-base-map-tooltip'}
            style={{
              color: 'white',
              maxHeight: 'content',
              textAlign: 'center',
              minWidth: '10rem',
              padding: '0.5rem 1rem 0.5rem 1rem',
              marginLeft: '1rem',
              height: 'fit-content',
              borderRadius: 10,
              zIndex: 999999999999,
              backgroundColor: 'rgba(0,0,0,0.9)',
            }}
          >
            {props?.tooltipMessage}
          </span>
        )}
      </div>

      <div
        className="button-base-map-wrapper"
        style={{
          display: 'flex',
        }}
      >
        {props.isToggleMenu && showMenu && props.children}
      </div>
    </div>
  );
}
