import { useHost } from "atomico";
import { useRefIntersectionObserver } from "@atomico/hooks/use-intersection-observer";

function component(){
    const host = useHost();
    useRefIntersectionObserver(
        ref,
        ([entry])=>{
            console.log("",{isIntersecting })
        },{
          threshold: 0.1,
        }
    );
    return <host shadowDom/>
}

component.styles = css`
    :host{
        display: block;
        width: 100%;
        min-height: 1px;
    }
`

import { useRef } from "atomico";
import { useRefValues } from "@atomico/hooks/use-ref-values";

function component(){
    const ref = useRef();
    
    useRefValues(
        // 👇 current will be the value assigned to ref.current
        ([current])=>{
            // 1️⃣ here the effect dependent on the reference
            // 🔴 The following line is optional
            return ()=>{
            // (Optional) here the cleanup of the reference dependent effect
            }
        },
        [ref]
    );
    
    return <host>
        <input ref={ref}/>
    </host>
}

import { 
    useReflectEvent, 
    reflectEvent  
} from "@atomico/hooks/use-reflect-event";

useReflectEvent(
    refFrom: Ref<Element>,
    refTo: Ref<Element>,
    eventType: string
);

reflectEvent( target: Element, event: Event );

import { Props, useRef } from "atomico";
import { useRender } from "@atomico/hooks/use-render";
import { usePropProxy } from "@atomico/hooks/use-prop-proxy";

function component(props: Props<typeof component>) {
  const refInput = useRef();

  useRender(() => (
    <input
      slot="input"
      class="reset"
      ref={refInput}
      type={props.type}
      value={props.value}
    />
  ));

  usePropProxy("value", {
    get() {
      return refInput.current?.value;
    },
  });

  return (
    <host shadowDom>
      <slot name="input"></slot>
    </host>
  );
}

component.props = {
  type: String,
  value: String,
};

import { useDollars } from "@atomico/hooks/use-dollars";

useDollars(ref: Ref<HTMLSlotElement>);

import { useClickPress } from "@atomico/hooks/use-click-press";

function counter() {
  const refButton = useRef();

  const [value, setValue] = useProp("value");

  const increment = () => setValue((value) => value + 1);

  useClickPress(refButton, increment);

  return (
    <host>
      <h1>value: {value}</h1>
      <button ref={refButton}>Increment</button>
    </host>
  );
}

counter.props = { value: { type: Number, value: 0 } };j

useKeyboard(
    ref: Ref<Element>,
    keysCode: string[],
    callback: (event: KeyboardEvent)=>void
);

import { useClickCoordinates } from "@atomico/hooks/use-click-coordinates";

useClickCoordinates(ref, handlerClick);

import { useCss } from "@atomico/hooks/use-css";

useCss(cssText: string);

import { useDisabled } from "@atomico/hooks/use-disabled";

import { useListener } from "@atomico/hooks/use-listener";

useListener(
    ref: Ref<Element>, 
    name: string, 
    handler: (event)=>void, 
    option?: boolean | AddEventListenerOptions 
);

interface Coordinates {
  x: number;
  y: number;
  offset: {
    x: number;
    y: number;
  };
}

import { usePromise } from "@atomico/hooks/use-promise";

const [result, status] = usePromise(
  asyncFunction,
  runFunction,
  optionalArguments
);

import { useChannel } from "@atomico/hooks/use-channel";

const channel = "MyChannel";
const [parentValue, setChildValue] = useChannel(channel);

const disabled:boolean = useDisabled(matches?: string = "fieldset");

import { 
    useForm, 
    useFormListener, 
    useFormInputHidden, 
    useFormInputRadio 
} from "@atomico/hooks/use-form";

const ref = useForm()

useFormListener("reset",handler);

useFormInputHidden("my-field","my-value");

myComponent.props = { name: String, checked: Boolean }

const refInput = useFormInputRadio(<input slot="input" value="my-value"/>);

return <host>
    <slot name="input"/>
</host>;

import { useResponsiveState } from "@atomico/hooks/use-responsive-state";

import {
  useResizeObserver,
  useResizeObserverState,
} from "@atomico/hooks/use-resize-observer";

import { useParent, useParentPath } from "@atomico/hooks/use-parent";

const selector = "form";
const parent = useParent(selector);

<my-component>
    <img slot="slide" src="slide-1"/>
    <img slot="slide" src="slide-1"/>
    <img slot="slide" src="slide-1"/>
</my-component>

<my-component>
    <img slot="slide-1" src="slide-1"/>
    <img slot="slide-2" src="slide-1"/>
    <img slot="slide-3" src="slide-1"/>
</my-component>

import { useRender } from "@atomico/hooks/use-render";

useRender(() => <input type="text" />, optionalArguments);

import { useSlot } from "@atomico/hooks/use-slot";

import { useDebounceState } from "@atomico/hooks/use-debounce-state";

import { useCssLightDom } from "@atomico/hooks/use-css-light-dom";

useCssLightDom(sheets: import("atomico").Sheets);

useMutationObserver(    
    ref: Ref<Element>,    
    observe: MutationCallback,    
    config?: MutationObserverInit
);

"<defaultState>, <caseState> <size>"

useResizeObserver(
  ref,
  (rect) => void
);

const rect = useResizeObserverState(ref);

import { useRef } from "atomico";
import { useProxySlot } from "@atomico/hooks/use-slot";

function component() {
  const ref = useRef();
  const children = useProxySlot(ref);

  return (
    <host shadowDom>
      <slot name="slide" ref={ref} />
      {children.map((child, index) => (
        <slot name={(child.slot = "slide-" + index)} />
      ))}
    </host>
  );
}

const optionalFilter = (element)=> element instanceof MyCustomElement;
const childNodes = useSlot(ref, optionalFilter);

const [state, setState] = useDebounceState(
    delay:number, 
    initialState: any,
    mode?: "fps" | "timeout" | "idle"
);

import { css } from "atomico";
import { useCssLightDom } from "@atomico/hooks/use-css-light-dom";

const sheet = css`
  :host {
    display: block;
    background: black;
    color: white;
    padding: 100px;
    border-radius: 1rem;
  }
  :host(:hover) {
    background: crimson;
  }
`;

function myExample() {
  useCssLightDom(sheet);
  return (
    <host>
      <h1>Hello</h1>
    </host>
  );
}

const parents = useParentPath(composed?: boolean);

const mutations:MutationRecord[] = useMutationObserverState(    
    ref: Ref<Element>,    
    config?: MutationObserverInit
);

const [childNodes, update] = useChildNodes();

import { 
    useRouter, 
    useRoute, 
    useRouteMatch, 
    useRedirect, 
    redirect, 
    getPath 
} from "@atomico/hooks/use-router";

function component() {
  const [childNodes] = useChildNodes();
  return (
    <host>
      {childNodes
        .filter((node) => node.localName == "h1")
        .map((Title) => (
          <Title onclick={() => console.log("click h1!")} />
        ))}
    </host>
  );
}

import { useAsyncEffect } from "@atomico/hooks/use-async-effect";

useAsyncEffect(async () => {
  await fetch("...");
});

import { useForceRender } from "@atomico/hooks/use-force-render";

const [ view, path, params, search ] = useRouter({
    "/":()=><h1>home</h1>,
    "user/{id}":({ id })=><my-user id={id}/>,
})

const [ view, path, params, search ] = useRoute("/",()=><h1>home</h1>);

const match = useRouteMatch();

const isHome = match("/home");

const forceRender = useForceRender();

function component() {
  const ref = useRef();
  const forceRender = useForceRender();

  return (
    <host>
      {ref.current.anyProp}
      <my-component ref={ref} onclick={forceRender}></my-component>
    </host>
  );
}