import { JSX, JSXElement } from 'solid-js';
import { COLORS } from 'src/colors';

type SSChipBaseProps = {
  children: JSXElement;
  color?: (typeof COLORS)[number];
  class?: string;
  style?: string;
};

type SSChipClickableProps = {
  onclick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
  ondismiss?: never;
};

type SSChipDismissableProps = {
  ondismiss: () => void;
  onclick?: never;
};

type SSChipDisplayProps = {
  onclick?: never;
  ondismiss?: never;
};

type SSChipProps = SSChipBaseProps &
  (SSChipClickableProps | SSChipDismissableProps | SSChipDisplayProps);

function SSChip(props: SSChipProps) {
  const commonClass = `ss_chip ss_chip--${props.color ?? 'blue'} ${props.class ?? ''}`;

  if ('onclick' in props && props.onclick) {
    return (
      <button
        type="button"
        class={`${commonClass} ss_chip--clickable`}
        style={props.style}
        onclick={props.onclick}
      >
        <span class="ss_chip__label">{props.children}</span>
      </button>
    );
  }

  return (
    <div class={commonClass} style={props.style}>
      <span class="ss_chip__label">{props.children}</span>
      {'ondismiss' in props && props.ondismiss && (
        <button
          type="button"
          class="ss_chip__dismiss"
          aria-label="Entfernen"
          onclick={props.ondismiss}
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
        </button>
      )}
    </div>
  );
}

export { SSChip };