import { useDevice } from '../DeviceToggle';

/**
 * How big each role is, at the width being edited.
 *
 * ── The same four roles as Fonts ──
 *
 * A template asks for a role and gets both the face and the size, so this section is the one above it
 * with numbers instead of names. What that costs is worth knowing: a role used at two sizes on purpose
 * collapses to one — `font-sub` was three sizes across the site and is now a single choice.
 *
 * ── One value per field ──
 *
 * The tabs at the top of the panel say which width. Unset inherits the smaller one, so "the same
 * everywhere" is one choice; the option names what it is inheriting rather than leaving it to be
 * worked out.
 */

export type FontSizes = Partial<Record<'title' | 'body' | 'sub' | 'display', Partial<Record<'base' | 'md' | 'lg', string>>>>;

const BREAKPOINT = { desktop: 'lg', tablet: 'md', mobile: 'base' } as const;

/** The order they are read in: biggest first, which is how a type scale is judged. */
const ROLES = [
  { key: 'display' as const, label: 'Display' },
  { key: 'title' as const, label: 'Headings' },
  { key: 'body' as const, label: 'Body' },
  { key: 'sub' as const, label: 'Menu' },
];

const inherited = (
  steps: Partial<Record<'base' | 'md' | 'lg', string>> | undefined,
  key: 'base' | 'md' | 'lg',
): string | null => {
  const below = { base: [], md: ['base'], lg: ['md', 'base'] } as const;
  for (const smaller of below[key]) {
    const step = steps?.[smaller];
    if (step) return step;
  }
  return null;
};

export const FontSizesTab = ({
  sizes,
  steps,
  onChange,
}: {
  sizes: FontSizes;
  /** The scale, sent by the API so this file holds no copy of it. */
  steps: string[];
  onChange: (sizes: FontSizes) => void;
}) => {
  const [device] = useDevice();
  const key = BREAKPOINT[device];

  const set = (role: string, value: string) => {
    const at = { ...((sizes as Record<string, Partial<Record<string, string>>>)[role] ?? {}) };
    // Removed rather than stored empty: an absence is what "inherit" means, all the way up.
    if (value === '') delete at[key];
    else at[key] = value;

    const next = { ...(sizes as Record<string, unknown>) };
    if (Object.keys(at).length) next[role] = at;
    else delete next[role];

    onChange(next as FontSizes);
  };

  return (
    <div className="grid grid-cols-2 gap-3">
      {ROLES.map((role) => {
        const current = sizes[role.key];
        const own = current?.[key];
        const from = inherited(current, key);

        return (
          <div key={role.key} className="flex flex-col gap-1">
            <label className="text-xs">{role.label}</label>
            <select
              value={own ?? ''}
              onChange={(event) => set(role.key, event.currentTarget.value)}
              className="h-8 rounded-md border border-input bg-transparent px-2 text-xs"
            >
              {/* Mobile is the smallest, so there is nothing below it to inherit from — and nothing
                  chosen there means the stylesheet's own size. */}
              <option value="">
                {key === 'base' ? 'Default' : from === null ? 'Inherit (default)' : `Inherit (${from})`}
              </option>
              {steps.map((step) => (
                <option key={step} value={step}>
                  {step}
                </option>
              ))}
            </select>
          </div>
        );
      })}
    </div>
  );
};