import * as React from 'react';

import { PROP_PREFIX, stripProps, useParamWriter, useRoute } from '~/router';
import type { Axes, AxisValue, Entry, PropBag } from '~/registry/types';

/**
 * The playground's props, in the URL.
 *
 * A component page used to hold its `PropBag` in `useState`, which made the one
 * thing people actually want to send each other — *this* Button, outline, green,
 * large, disabled — the one thing the site could not link to. The bag now lives
 * in the hash as `p.<axis>=<value>`, so `chrome/ui/share.tsx` has something to copy
 * and a reload keeps what you built.
 *
 * Three rules, each of them load-bearing:
 *
 *  - **A value equal to the entry's default is not written.** Same rule as
 *    `useParam`'s `fallback`, and for the same reason: an untouched playground
 *    should hand you a clean link, not a URL restating every default.
 *
 *  - **Decoding goes through `entry.axes`.** The URL only holds strings; the axis
 *    holds the real values, so `values.find(v => String(v) === raw)` gives back
 *    the number `3` rather than `"3"` — the same trick the `<select>` control in
 *    `playground.tsx` uses, and the reason a generated snippet says `size={3}`.
 *
 *  - **An unknown value is ignored, not rendered.** A link written against an
 *    older kit, or hand-edited, falls back to the default for that axis instead
 *    of pushing `variant="bogus"` into a component.
 */

/** `variant` → `p.variant`. */
export function paramKey(axis: string): string {
  return `${PROP_PREFIX}${axis}`;
}

/**
 * `true`/`false` are written as `1`/`0` — shorter, and unambiguous next to a
 * string axis that could itself contain the word "true".
 */
export function encodeValue(value: AxisValue): string {
  return typeof value === 'boolean' ? (value ? '1' : '0') : String(value);
}

function matchValue(values: readonly AxisValue[], raw: string): AxisValue | undefined {
  return values.find((v) => (typeof v === 'boolean' ? encodeValue(v) : String(v)) === raw);
}

/** The entry's defaults with whatever the URL overrides layered on top. */
export function decodeProps(
  axes: Axes | undefined,
  defaults: PropBag | undefined,
  params: URLSearchParams
): PropBag {
  const props: PropBag = { ...defaults };
  if (!axes) return props;

  for (const [name, values] of Object.entries(axes)) {
    const raw = params.get(paramKey(name));
    if (raw === null) continue;
    const value = matchValue(values, raw);
    if (value !== undefined) props[name] = value;
  }

  return props;
}

/**
 * Read-and-write access to the bag, replacing the `useState` the component page
 * used to own.
 *
 * Writes are *replacing*: dragging a select through five variants should leave
 * one history entry behind, not five, or Back stops meaning "the previous page".
 */
export function usePlaygroundProps(entry: Entry): [PropBag, (name: string, value: AxisValue) => void] {
  const { params } = useRoute();
  const writeParams = useParamWriter();

  /* Keyed on the query string rather than on `params`: `useRoute` builds a fresh
     `URLSearchParams` per hash change, so the object identity says nothing. */
  const query = params.toString();
  const props = React.useMemo(
    () => decodeProps(entry.axes, entry.defaults, new URLSearchParams(query)),
    [entry.axes, entry.defaults, query]
  );

  const setProp = React.useCallback(
    (name: string, value: AxisValue) => {
      writeParams(
        (next) => {
          const key = paramKey(name);
          const isDefault = entry.defaults ? entry.defaults[name] === value : false;
          if (isDefault) next.delete(key);
          else next.set(key, encodeValue(value));
        },
        { replace: true }
      );
    },
    [entry.defaults, writeParams]
  );

  return [props, setProp];
}

/**
 * Is anything in this URL a playground prop?
 *
 * Pure and exported for the test, but it is also what decides whether the reset
 * control is on screen at all: a playground sitting at its own defaults writes
 * no params (see the first rule above), so "there is a `p.*` key" and "the user
 * has changed something" are the same question — and a Reset button that is
 * always there, always enabled, and does nothing most of the time is furniture.
 */
export function hasProps(params: URLSearchParams): boolean {
  for (const key of params.keys()) {
    if (key.startsWith(PROP_PREFIX)) return true;
  }
  return false;
}

/**
 * The reset control's two halves: whether there is anything to reset, and the
 * function that does it.
 *
 * Clearing goes through `router.tsx`'s own `stripProps` rather than a second
 * implementation here — that function already defines what "a playground prop"
 * means for navigation, and two answers to that question would eventually
 * disagree. One replacing write, so undoing ten control changes costs one
 * history entry the same way making them did.
 */
export function useResetProps(): [boolean, () => void] {
  const { params } = useRoute();
  const writeParams = useParamWriter();

  const reset = React.useCallback(() => {
    writeParams(stripProps, { replace: true });
  }, [writeParams]);

  return [hasProps(params), reset];
}