import react from 'react';
import { useSelector } from 'react-redux';
import { MapState } from '../../store/map';

import '../../theme/layer.css';


const Layer: react.FC<{
  children?: JSX.Element;
}> = (props: { children?: JSX.Element }) => {
  const slippyState = useSelector(
    (state: { map: MapState }) => state.map.slippy
  );
  console.log(
    `--- Rendering layer, slippyState: ${JSON.stringify(slippyState)} ---`
  );

  return (
    <div
      className='background'
      style={{
        transform: `translate(${slippyState.translation.x}px, ${slippyState.translation.y}px) scale(${slippyState.scale})`,
      }}
    >
      {props.children}
    </div>
  );
};

export default Layer;