/* eslint-disable @typescript-eslint/restrict-template-expressions */
import { DomEvent } from 'leaflet'
import { createRef, useEffect } from 'react'

export const Control = ({
  position,
  children,
  zIndex,
  absolute,
}: {
  position: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'
  children: React.ReactNode
  zIndex: string
  absolute: boolean
}) => {
  const controlContainerRef = createRef<HTMLDivElement>()

  useEffect(() => {
    if (controlContainerRef.current !== null) {
      DomEvent.disableClickPropagation(controlContainerRef.current)
      DomEvent.disableScrollPropagation(controlContainerRef.current)
    }
  }, [controlContainerRef])

  return (
    <div
      ref={controlContainerRef}
      style={{ zIndex }}
      className={`${absolute && 'tw:absolute'} tw:z-999 tw:flex-col ${position === 'topLeft' && 'tw:top-4 tw:left-4'} ${position === 'bottomLeft' && 'tw:bottom-4 tw:left-4'} ${position === 'topRight' && 'tw:bottom-4 tw:right-4'} ${position === 'bottomRight' && 'tw:bottom-4 tw:right-4'}`}
    >
      {children}
    </div>
  )
}
