import { Control, type ControlPosition } from 'leaflet';
import { choice, str, type PropDef } from '../core/props.ts';
import { WithProps, type LeafletElementConstructor } from '../core/with-props.ts';

// The button labels default to Leaflet's own markup, which hides the glyph
// from screen readers in favour of the title.
const PROPS: {
  position: PropDef<ControlPosition>;
  zoomInText: PropDef<string>;
  zoomInTitle: PropDef<string>;
  zoomOutText: PropDef<string>;
  zoomOutTitle: PropDef<string>;
} = {
  position: choice<ControlPosition>('topleft'),
  zoomInText: str('<span aria-hidden="true">+</span>'),
  zoomInTitle: str('Zoom in'),
  zoomOutText: str('<span aria-hidden="true">−</span>'),
  zoomOutTitle: str('Zoom out'),
};
const Base: LeafletElementConstructor<Control.Zoom, typeof PROPS> = WithProps(PROPS, {
  attach: 'self',
});

export default class LeafletControlZoomElement extends Base {
  declare readonly leafletObject?: Control.Zoom;

  createLeafletObject(options: Control.ZoomOptions): Control.Zoom {
    return new Control.Zoom(options);
  }
}