import { Icon, type IconOptions, type PointExpression } from 'leaflet';
import { json, str, type PropDef } from '../core/props.ts';
import { emitIconChanged } from '../core/register.ts';
import { WithProps, type LeafletElementConstructor } from '../core/with-props.ts';

const PROPS: {
  iconUrl: PropDef<string>;
  iconRetinaUrl: PropDef<string>;
  iconSize: PropDef<PointExpression>;
  iconAnchor: PropDef<PointExpression>;
  popupAnchor: PropDef<PointExpression>;
  tooltipAnchor: PropDef<PointExpression>;
  shadowUrl: PropDef<string>;
  shadowRetinaUrl: PropDef<string>;
  shadowSize: PropDef<PointExpression>;
  shadowAnchor: PropDef<PointExpression>;
  className: PropDef<string>;
} = {
  iconUrl: str(),
  iconRetinaUrl: str(),
  iconSize: json<PointExpression>([0, 0]),
  iconAnchor: json<PointExpression>([0, 0]),
  popupAnchor: json<PointExpression>([0, 0]),
  tooltipAnchor: json<PointExpression>([0, 0]),
  shadowUrl: str(),
  shadowRetinaUrl: str(),
  shadowSize: json<PointExpression>([0, 0]),
  shadowAnchor: json<PointExpression>([0, 0]),
  className: str(),
};

// An Icon has no setters, so every attribute change builds a new one and the
// parent marker is told to swap it in.
const Base: LeafletElementConstructor<Icon, typeof PROPS> = WithProps(PROPS, {
  attach: 'none',
  recreate: true,
});

/** `<leaflet-icon>` — a Leaflet `Icon` (an image marker icon). Child of `<leaflet-marker>`; rebuilt on every attribute change and swapped in via `setIcon()`. */
export default class LeafletIconElement extends Base {
  declare readonly leafletObject?: Icon;

  createLeafletObject(options: Partial<IconOptions>): Icon | undefined {
    return options.iconUrl ? new Icon(options as IconOptions) : undefined;
  }

  leafletObjectCreated(): void {
    emitIconChanged(this, this.leafletObject);
  }

  disconnectedCallback(): void {
    super.disconnectedCallback();
    emitIconChanged(this, null);
  }
}