import { FlowComponent, JSX, mergeProps } from "solid-js";

const Collapsible: FlowComponent<
  {
    activeTitleColor?: string;
    onChange?: JSX.EventHandler<HTMLInputElement, Event>;
    value?: boolean;
    label: string | JSX.Element;
  } & JSX.HTMLAttributes<HTMLDivElement>
> = (p) => {
  const props = mergeProps({ activeTitleColor: "text-black" }, p);
  let inputRef: HTMLInputElement = undefined!;

  return (
    <div
      tabindex="0"
      class={
        "collapse collapse-plus border border-base-300 bg-base-100 " +
        props.class
      }
      onFocus={(evt) => {
        if (props.value) {
          return;
        }

        evt.currentTarget.blur();
        inputRef.checked = true;
        inputRef.dispatchEvent(new InputEvent("change", { bubbles: true }));
      }}
    >
      <input
        ref={inputRef}
        type="checkbox"
        aria-label="Open"
        checked={props.value}
        onChange={(evt) => {
          evt.currentTarget.blur();
          if (props.onChange) {
            props.onChange.call(this, evt);
          }
        }}
      />
      <div
        classList={{
          "collapse-title transition-colors duration-200 text-xl font-medium":
            true,
          [props.activeTitleColor]: props.value,
        }}
      >
        {props.label}
      </div>
      <div class="collapse-content">
        <div classList={{ "py-1": true, invisible: !props.value }}>
          {props.children}
        </div>
      </div>
    </div>
  );
};

export default Collapsible;