import { useBind, useCb } from 'hook-service';

function useSome(name: string, password: string) {
  const bindRef = useBind(() => ({ name, password }));
  const test = useCallback(() => {
    // bindRef will take no changes in useCallback or useEffect
    console.log(bindRef.current.name, bindRef.current.password);
  }, [bindRef]);

  const immutableTest = useCb(() => {
    // callback never change
    console.log(name, password);
  });
}

import React, { useState } from 'react';
import { createService } from 'hook-service';

function useSome(name: string) {
  const [state, setState] = useState(name);
  return {
    state,
    setState,
  };
}

// transform hook to service
const SomeService = createService(useSome);

function SomeComponent() {
  // service injected
  const { state, setState } = SomeService.useInject();

  return <div>name from service: {state}</div>;
}

// service provided
<SomeService.Provider deps={['new name']}>
  <SomeComponent />
</SomeService.Provider>;

import { useAsync } from 'hook-service';

function useTest() {
  // loading will set after all content fulfilled or caught
  const { trigger, result, loading } = useAsync(
    () => fetch('http://some.com'),
    (res) => {
      // on fulfilled
    },
    (err) => {
      // on error caught
    },
  );
}

import { next, useListen } from 'hook-service';

interface CustomEvent {
  changeName: string;
  changePassword: string;
  setDisabled: boolean;
}

function useSome() {
  const [name, setName] = useState('');
  const [disabled, setDisabled] = useState(false);
  useListen(
    'someEventKey',
    {
      changeName(res) {
        setName(res);
      },
      setDisabled(res) {
        setDisabled(res);
      },
    },
    // parent.window  // also listen custom event from iframe layers above
  );
  return (
    <input
      value={name}
      onChange={(e) => {
        setName(e.target.value);
        next<CustomEvent, 'changeName'>(
          'someEventKey',
          'changeName',
          e.target.value,
        );
        // this will dispatch event across iframe layers
        next<CustomEvent, 'changeName'>(
          'someEventKey',
          'changeName',
          e.target.value,
          parent.window,
        );
      }}
    />
  );
}

// support string / number(int or float) / array / object
import { getStorage, setStorage, useStorage } from 'hook-service';

const name = getStorage('name', '');
// third param identified which storage in use
// can be used in getStorage/setStorage/useStorage
// localStorage by default
setStorage('name', 'new name', sessionStorage);

function useSome() {
  const [name, setName] = useStorage('name', '');
  const [config, setConfig] = useStorage('config', () => ({
    name: '',
    password: '',
  }));
}

import { useDeferValue } from 'hook-service';

function useSome() {
  const [state, setState] = useState('');
  // new state change after state after certain time
  const deferState = useDeferValue(state, 100);
}