import { pm, factoryParameters, serializers } from 'geschichte'
import { GeschichteWithHistory } from 'geschichte/historyjs'
import { createBrowserHistory } from 'history'

const parameterConfig = {
  item: pm(
    'queryParameter',
    serializers.string /** a basic collection of serializers is availble, like date, int, float, arrays */,
    (value?: V, initialValue?: V) =>
      boolean /** define an optional skip function which will determine if the parameter will be included in the url or not */
  ),
  /* ... more keys, any depth. */
}

// default value is either an object or a factory () => defaultValue
const defaultValue = {
  item: 'defaultValue' /** it automatically skips null or default values*/,
}

// exports a hook (`useQuery`), and
// utility methods `createQueryString` that let's you create a query string based on the described object anywhere outside of components etc.
// `parseQueryString` let's you parse a query string into an object as defined in the `parameterConfig`.
const { useQuery, createQueryString, parseQueryString } = factoryParameters(
  parameterConfig,
  defaultValue /** optional namespace, (creates a prefix separated by a dot)*/
)

const Component = () => {
  const {
    values,
    pushState,
    replaceState,
    resetPush,
    resetReplace,
    createQueryString,
    batchReplaceState,
    batchPushState,
  } = useQuery()
  return (
    <>
      <button
        onClick={() => pushState((values) => void (values.item = 'newValue'))}
      >
        push new state
      </button>
      <button
        onClick={() =>
          replaceState((values) => void (values.item = 'anotherOne'))
        }
      >
        replace state
      </button>
      <button onClick={resetPush}>reset (push) to defaults</button>
      <button onClick={resetReplace}>reset (replace) to defaults</button>
      <div>{JSON.stringify(values)}</div>
      <div>The current queryString: {createQueryString()}</div>
    </>
  )
}

const App = () => (
  <GeschichteWithHistory history={createBrowserHistory()}>
    <Component />
  </GeschichteWithHistory>
)