import type { CanvasLayer } from '@genarrative/image-canvas-core';
import type { HTMLAttributes, KeyboardEventHandler, ReactNode } from 'react';

export function LayerRenderer({
  as = 'button',
  children,
  className = '',
  generating = false,
  hovered = false,
  layer,
  selected = false,
  style,
  ...props
}: Omit<HTMLAttributes<HTMLElement>, 'style'> & {
  as?: 'button' | 'div';
  children: ReactNode;
  generating?: boolean;
  hovered?: boolean;
  layer: CanvasLayer;
  selected?: boolean;
  style?: HTMLAttributes<HTMLElement>['style'];
  onKeyDown?: KeyboardEventHandler<HTMLElement>;
}) {
  const sharedProps = {
    ...props,
    className: [
      'genarrative-image-canvas__layer',
      selected ? 'genarrative-image-canvas__layer--selected' : '',
      hovered ? 'genarrative-image-canvas__layer--hovered' : '',
      generating ? 'genarrative-image-canvas__layer--generating' : '',
      layer.locked ? 'genarrative-image-canvas__layer--locked' : '',
      className,
    ]
      .filter(Boolean)
      .join(' '),
    style: {
      ...style,
      left: layer.x,
      top: layer.y,
      width: layer.width,
      height: layer.height,
      zIndex: layer.zIndex,
      display: layer.hidden ? 'none' : style?.display,
    },
    children,
  };
  return as === 'div' ? (
    <div {...sharedProps} role={props.role ?? 'button'} />
  ) : (
    <button {...sharedProps} type="button" />
  );
}