import { html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
import { ref } from "lit/directives/ref.js";
import { multiClassMap, tw } from "../../directives/multi-class-map.js";
import images_checkbox from "../../images/checkbox.js";
import "./atomic-icon/atomic-icon.js";
const renderCheckbox = ({ props })=>{
    const partName = props.part ?? 'checkbox';
    const classNames = tw({
        'no-outline hover:border-primary-light focus-visible:border-primary-light grid h-4 w-4 place-items-center rounded': true,
        'selected bg-primary hover:bg-primary-light focus-visible:bg-primary-light': Boolean(props.checked),
        'border-neutral-dark border': !props.checked,
        [props.class ?? '']: Boolean(props.class)
    });
    const parts = [
        partName
    ];
    if (props.checked) parts.push(`${partName}-checked`);
    return html`
    <button
      .key=${props.key}
      id=${ifDefined(props.id)}
      class=${multiClassMap(classNames)}
      part=${parts.join(' ')}
      aria-checked=${ifDefined(props.checked)}
      aria-current=${ifDefined(props.ariaCurrent)}
      aria-label=${ifDefined(props.ariaLabel ?? props.text)}
      value=${ifDefined(props.text)}
      role="checkbox"
      @click=${()=>props.onToggle?.(!props.checked)}
      @mousedown=${(e)=>props.onMouseDown?.(e)}
      ${props.ref ? ref(props.ref) : ''}
    >
      <atomic-icon
        style="stroke: white"
        class="${props.checked ? 'block' : 'hidden'} w-3/5"
        .icon=${images_checkbox}
        part=${ifDefined(props.iconPart)}
      ></atomic-icon>
    </button>
  `;
};
export { renderCheckbox };
