import { Map, Placemark, YMaps } from '@pbe/react-yandex-maps';
import { isEmpty } from 'lodash';
import { Dispatch, SetStateAction } from 'react';

import { Point } from '../model';

type YandexMapProps = {
  points: Point[];
  selectedStation: number | null;
  handleMapStationClick: (id: number) => void;
};

const mapCenter = [38.53575, 68.77905];

export const YandexMap = ({
  points,
  selectedStation,
  handleMapStationClick,
}: YandexMapProps) => {
  return (
    <YMaps
      query={{
        apikey: process.env.NEXT_PUBLIC_YANDEX_MAP_API_KEY,
        lang: 'ru_RU',
      }}
    >
      <Map
        defaultState={{
          center: !isEmpty(points) ? points[0].coordinates : mapCenter,
          zoom: 11,
          behaviors: ['drag', 'multiTouch', 'dblClickZoom', 'scrollZoom'],
        }}
        options={{
          copyrightUaVisible: false,
          copyrightProvidersVisible: false,
          copyrightLogoVisible: false,
          suppressMapOpenBlock: true,
          suppressObsoleteBrowserNotifier: true,
        }}
        className='h-full max-h-[500px] w-full overflow-hidden rounded-md shadow-lg'
      >
        {points.map((point) => {
          const isSelectedStation = selectedStation === point.id;
          return (
            <Placemark
              key={point.id}
              geometry={point.coordinates}
              options={{
                iconLayout: 'default#image',
                iconImageHref:
                  !selectedStation || isSelectedStation
                    ? '/map/oriyo-marker.png'
                    : '/map/oriyo-inactive-marker.png',
                iconImageSize: isSelectedStation ? [70, 70] : [64, 64],
                iconImageOffset: isSelectedStation ? [-28, -40] : [-24, -36],
              }}
              onClick={() => handleMapStationClick(point.id)}
            />
          );
        })}
      </Map>
    </YMaps>
  );
};
