import React from 'react';
import styled, { css } from 'styled-components';
import { Marker, OverlayView } from 'react-google-maps';
import { InfoBox } from 'react-google-maps/lib/components/addons/InfoBox';
import { AiFillHome } from 'react-icons/ai';
import Button from '../Global/Button';
import { Heart } from '../Global/Heart';
import HomePopupContainer from '../../Containers/Search/HomePopupContainer';

const getPixelPositionOffset = (width, height) => ({
  x: -(width / 2),
  y: -(height / 2),
});

const MapMarker = ({
  theme,
  store,
  isOpen,
  isHovered,
  marker,
  dateDiff,
  clickMarker,
}) => {
  const { location, price, isBookmarked } = marker;
  return (
    <Marker
      position={{ lat: +location.lat, lng: +location.lng }}
      icon={{
        scale: 0,
        path: '',
      }}
    >
      <OverlayView
        key={Math.random()}
        position={{ lat: +location.lat, lng: +location.lng }}
        mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
        getPixelPositionOffset={getPixelPositionOffset}
      >
        {dateDiff ? (
          <PriceMarker
            btnType="oval"
            isOpen={isOpen}
            isHovered={isHovered}
            theme={theme}
            onClick={clickMarker}
          >
            <span>
              ₩<Strong> {price.toLocaleString()} </Strong>
            </span>
            {isBookmarked && (
              <Heart
                size="smaller"
                bgColor={isOpen || isHovered ? 'white' : 'main'}
                stroke={isOpen || isHovered ? 'black' : 'white'}
                theme={theme}
              />
            )}
          </PriceMarker>
        ) : (
          <HomeMarker
            btnType="circle"
            isOpen={isOpen}
            isHovered={isHovered}
            theme={theme}
            onClick={clickMarker}
          >
            <AiFillHome />
            {isBookmarked && (
              <MiniHeart
                size="smaller"
                bgColor={isOpen || isHovered ? 'white' : 'main'}
                stroke={isOpen || isHovered ? 'black' : 'white'}
                theme={theme}
              />
            )}
          </HomeMarker>
        )}
      </OverlayView>
      {isOpen && (
        <InfoBox
          className="InfoBox"
          options={{ closeBoxURL: '', enableEventPropagation: true }}
        >
          <HomePopupContainer
            home={marker}
            store={store}
            dateDiff={dateDiff}
            theme={theme}
          />
        </InfoBox>
      )}
    </Marker>
  );
};

const buttonStyle = css`
  box-shadow: 0 0 2px ${({ theme }) => theme.color.gray};
  border: none;
  transform: scale(1);
  transition: 0.3s;
  &:hover {
    border: none;
    transition: 0.3s;
    transform: scale(1.1);
    z-index: 20;
  }
`;

const focusStyle = css`
  ${({ isOpen, isHovered, theme }) =>
    isOpen || isHovered
      ? css`
          background: ${theme.color.black};
          color: ${theme.color.white};
          transition: 0.3s;
          transform: scale(1.1);
          z-index: 20;
        `
      : css`
          background: ${theme.color.white};
          color: ${theme.color.black};
        `}
`;

const HomeMarker = styled(Button)`
  ${buttonStyle};
  ${focusStyle};
  overflow: visible;
  position: relative;
`;

const PriceMarker = styled(Button)`
  ${buttonStyle};
  ${focusStyle};
  font-size: 1.4rem;
  padding: 0.6rem 0.8rem;
`;

const Strong = styled.strong`
  padding: 0 3px;
`;

const MiniHeart = styled(Heart)`
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
`;

export default React.memo(MapMarker);