import { type Component, createSignal, Switch, Match } from "solid-js";

import { autofocus, createAutofocus } from "../src/index.js";

autofocus;

const AutofocusDirective: Component = () => {

return (

<button autofocus use:autofocus>

directive

</button>

);

};

const AutofocusRef: Component = () => {

let ref!: HTMLButtonElement;

createAutofocus(() => ref);

return (

<button class="btn" ref={ref}>

ref

</button>

);

};

const AutofocusRefSignal: Component = () => {

const [ref, setRef] = createSignal<HTMLButtonElement>();

createAutofocus(ref);

return (

<button class="btn" ref={setRef}>

ref signal

</button>

);

};

const App: Component = () => {

const [toggle, setToggle] = createSignal(0);

return (

<div class="center-child h-screen w-screen">

<div class="m-4 flex gap-4">

<button class="btn" onClick={() => setToggle((toggle() + 1) % 6)}>

toggle

</button>

<Switch fallback={<button>no autofocus</button>}>

<Match when={toggle() === 0}>

<AutofocusDirective />

</Match>

<Match when={toggle() === 2}>

<AutofocusRef />

</Match>

<Match when={toggle() === 4}>

<AutofocusRefSignal />

</Match>

</Switch>

</div>

</div>

);

};

export default App;