import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
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 images_close from "../../images/close.js";
import "./atomic-icon/atomic-icon.js";
const renderTriStateCheckbox = ({ props })=>{
    const isSelected = 'selected' === props.state;
    const isExcluded = 'excluded' === props.state;
    const partName = props.part ?? 'checkbox';
    const classNames = tw({
        'hover:border-primary-light focus-visible:border-primary-light grid h-4 w-4 place-items-center rounded focus-visible:outline-none': true,
        'selected bg-primary hover:bg-primary-light focus-visible:bg-primary-light': isSelected,
        'border-neutral-dark border': !isSelected,
        'excluded bg-error hover:bg-error focus-visible:bg-error hover:border-error focus-visible:border-error': isExcluded,
        [props.class ?? '']: Boolean(props.class)
    });
    const parts = [
        partName
    ];
    if (isExcluded) parts.push(`${partName}-checked`);
    const iconClassNames = {
        'w-3/5': true,
        block: isSelected || isExcluded,
        hidden: !isSelected && !isExcluded
    };
    return html`<button
    ${ref(props.ref)}
    .key=${props.key}
    id=${ifDefined(props.id)}
    class=${multiClassMap(classNames)}
    part=${parts.join(' ')}
    aria-pressed=${isSelected ? 'true' : isExcluded ? 'mixed' : 'false'}
    aria-label=${ifDefined(props.ariaLabel ?? props.text)}
    value=${ifDefined(props.text)}
    role="button"
    @click=${()=>props.onToggle?.(!isSelected)}
    @mousedown=${(e)=>props.onMouseDown?.(e)}
  >
    <atomic-icon
      style="stroke: 'white', fill: 'white'"
      class=${classMap(iconClassNames)}
      icon=${isSelected ? images_checkbox : images_close}
      part=${ifDefined(props.iconPart)}
    ></atomic-icon>
  </button>`;
};
export { renderTriStateCheckbox };
