Học từ Telegram #13: --vh, bàn phím ảo, nhấn giữ và số điện thoại

/**
 * Chiều cao viewport trên mobile và phát hiện bàn phím ảo
 * (ý tưởng từ util/windowSize.ts của Telegram Web A).
 *
 * - `100vh` trên mobile là chiều cao khi thanh địa chỉ ĐÃ thu gọn, nên phần đáy trang
 *   (ô nhập tin nhắn) bị che. Telegram ghi `--vh = innerHeight / 100` vào :root mỗi lần
 *   resize, CSS dùng `calc(var(--vh, 1vh) * 100)`.
 * - Bàn phím ảo: Telegram coi "chiều cao hiện tại < chiều cao lúc tải" là bàn phím đang mở.
 *   Bản này so với chiều cao lớn nhất đã thấy THEO TỪNG HƯỚNG màn hình, và dùng
 *   visualViewport nếu có (iOS không co innerHeight khi bàn phím mở).
 */

export type Layout = 'single-column' | 'two-columns';

/** Ngưỡng của Telegram: ≤ 600px rộng, hoặc nằm ngang thấp (≤ 950 × 450) là 1 cột. */
export const MOBILE_MAX_WIDTH = 600;
export const MOBILE_LANDSCAPE_MAX_WIDTH = 950;
export const MOBILE_LANDSCAPE_MAX_HEIGHT = 450;

export function getLayout(width: number, height: number): Layout {
  const isMobile =
    width <= MOBILE_MAX_WIDTH ||
    (width <= MOBILE_LANDSCAPE_MAX_WIDTH && height <= MOBILE_LANDSCAPE_MAX_HEIGHT);
  return isMobile ? 'single-column' : 'two-columns';
}

/** Bàn phím ảo hiếm khi thấp hơn ngần này; chênh ít hơn thì là thanh địa chỉ co giãn. */
export const KEYBOARD_MIN_HEIGHT = 150;

export interface ViewportState {
  /** chiều cao layout viewport (window.innerHeight) */
  innerHeight: number;
  /** chiều cao vùng thực sự nhìn thấy (visualViewport.height), iOS co lại khi bàn phím mở */
  visibleHeight: number;
  width: number;
  orientation: 'portrait' | 'landscape';
  layout: Layout;
  /** ước lượng chiều cao bàn phím ảo, 0 nếu đang đóng */
  keyboardHeight: number;
}

export interface KeyboardDetector {
  /** đưa vào số đo hiện tại, trả về chiều cao bàn phím ước lượng */
  measure(width: number, height: number): number;
}

/**
 * Nhớ chiều cao lớn nhất đã thấy cho từng hướng màn hình.
 * Bản gốc chỉ nhớ `initialHeight` lúc tải: xoay ngang rồi xoay dọc lại vẫn đúng,
 * nhưng tải trang lúc ĐANG nằm ngang rồi xoay dọc thì mọi chiều cao dọc đều lớn hơn
 * initialHeight, nên không bao giờ thấy bàn phím.
 */
export function createKeyboardDetector(minHeight = KEYBOARD_MIN_HEIGHT): KeyboardDetector {
  const maxByOrientation = { portrait: 0, landscape: 0 };
  return {
    measure(width, height) {
      const orientation = width > height ? 'landscape' : 'portrait';
      if (height > maxByOrientation[orientation]) maxByOrientation[orientation] = height;
      const diff = maxByOrientation[orientation] - height;
      return diff >= minHeight ? diff : 0;
    },
  };
}

export interface ViewportWatcherOptions {
  /** phần tử nhận biến CSS, mặc định <html> */
  target?: HTMLElement;
  /** gọi khi layout 1 cột ⇄ 2 cột đổi (Telegram thì reload cả trang) */
  onLayoutChange?: (layout: Layout, previous: Layout) => void;
  onChange?: (state: ViewportState) => void;
  throttleMs?: number;
}

/**
 * Ghi `--vh` (theo innerHeight, giống Telegram) và `--visible-vh`, `--keyboard-height`
 * (theo visualViewport) lên :root. Trả về hàm huỷ.
 */
export function watchViewport({
  target = document.documentElement,
  onLayoutChange,
  onChange,
  throttleMs = 100,
}: ViewportWatcherOptions = {}) {
  const detector = createKeyboardDetector();
  let layout = getLayout(window.innerWidth, window.innerHeight);
  let timer: ReturnType<typeof setTimeout> | undefined;

  const update = () => {
    timer = undefined;
    const vv = window.visualViewport;
    const innerHeight = window.innerHeight;
    const width = window.innerWidth;
    // phóng to bằng hai ngón cũng làm visualViewport.height nhỏ lại: khi đó bỏ qua nó
    const isZoomed = vv !== null && vv !== undefined && vv.scale > 1.01;
    const visibleHeight = vv && !isZoomed ? vv.height : innerHeight;
    // Android co innerHeight khi bàn phím mở, iOS chỉ co visualViewport: lấy số nhỏ hơn
    const keyboardHeight = detector.measure(width, Math.min(innerHeight, visibleHeight));

    target.style.setProperty('--vh', `${innerHeight * 0.01}px`);
    target.style.setProperty('--visible-vh', `${visibleHeight * 0.01}px`);
    target.style.setProperty('--keyboard-height', `${keyboardHeight}px`);

    const nextLayout = getLayout(width, innerHeight);
    if (nextLayout !== layout) {
      const previous = layout;
      layout = nextLayout;
      onLayoutChange?.(nextLayout, previous);
    }

    onChange?.({
      innerHeight,
      visibleHeight,
      width,
      orientation: width > innerHeight ? 'landscape' : 'portrait',
      layout,
      keyboardHeight,
    });
  };

  // throttle kiểu "chạy cuối": resize bắn hàng chục lần khi xoay máy
  const schedule = () => {
    if (timer === undefined) timer = setTimeout(update, throttleMs);
  };

  update();
  window.addEventListener('resize', schedule);
  window.visualViewport?.addEventListener('resize', schedule);

  return () => {
    clearTimeout(timer);
    window.removeEventListener('resize', schedule);
    window.visualViewport?.removeEventListener('resize', schedule);
  };
}

/**
 * Nhấn giữ để mở context menu trên màn hình cảm ứng
 * (ý tưởng từ hooks/useContextMenuHandlers.ts của Telegram Web A).
 *
 * - Chạm xuống thì hẹn giờ 250ms; nhấc tay, huỷ chạm hoặc kéo đi thì huỷ hẹn.
 * - Đủ 250ms thì mở menu tại điểm chạm, rồi NUỐT cú "click" sinh ra khi nhấc tay
 *   (nếu không, nhấc tay xong lại mở luôn tin nhắn/chat bên dưới menu).
 *
 * Khác bản gốc: dùng Pointer Events (một đường cho cả chạm lẫn bút), cho phép rung tay
 * trong `moveTolerance` px thay vì huỷ ngay ở `touchmove` đầu tiên, và chặn `contextmenu`
 * gốc của trình duyệt để menu không mở hai lần.
 */

export interface LongPressOptions {
  /** thời gian giữ, Telegram dùng 250ms */
  delay?: number;
  /** rung tay trong phạm vi này (px) vẫn tính là đang giữ; bản gốc là 0 */
  moveTolerance?: number;
  /** chỉ áp dụng cho các loại con trỏ này, mặc định chạm và bút */
  pointerTypes?: string[];
  onLongPress: (point: { x: number; y: number; target: EventTarget | null }) => void;
  /** gọi khi một lần giữ bị huỷ, kèm lý do (để demo/log) */
  onCancel?: (reason: 'move' | 'up' | 'cancel') => void;
}

export function attachLongPress(element: HTMLElement, options: LongPressOptions) {
  const { delay = 250, moveTolerance = 10, pointerTypes = ['touch', 'pen'], onLongPress, onCancel } = options;
  let timer: ReturnType<typeof setTimeout> | undefined;
  let start: { x: number; y: number; id: number } | undefined;
  let fired = false;

  const clear = (reason?: 'move' | 'up' | 'cancel') => {
    if (timer !== undefined) {
      clearTimeout(timer);
      timer = undefined;
      if (reason) onCancel?.(reason);
    }
    start = undefined;
  };

  const onPointerDown = (event: PointerEvent) => {
    // lần giữ trước mở menu nhưng không sinh click (vd. kéo tay ra ngoài rồi mới nhấc):
    // cờ cũ không được nuốt nhầm cú click mới
    fired = false;
    if (!pointerTypes.includes(event.pointerType) || !event.isPrimary) return;
    clear();
    start = { x: event.clientX, y: event.clientY, id: event.pointerId };
    const target = event.target;
    timer = setTimeout(() => {
      timer = undefined;
      fired = true;
      onLongPress({ x: start!.x, y: start!.y, target });
    }, delay);
  };

  const onPointerMove = (event: PointerEvent) => {
    if (!start || event.pointerId !== start.id) return;
    if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > moveTolerance) clear('move');
  };

  const onPointerUp = (event: PointerEvent) => {
    if (start && event.pointerId === start.id) clear('up');
  };
  const onPointerCancel = (event: PointerEvent) => {
    // trình duyệt bắt đầu cuộn trang: không còn là nhấn giữ nữa
    if (start && event.pointerId === start.id) clear('cancel');
  };

  // Nuốt click ngay sau một lần nhấn giữ đã mở menu (pha capture: chặn trước mọi handler con)
  const onClickCapture = (event: MouseEvent) => {
    if (!fired) return;
    fired = false;
    event.preventDefault();
    event.stopPropagation();
  };

  // Android/Chrome tự bắn `contextmenu` khi giữ lâu (~500ms+): menu của mình đã mở rồi thì chặn
  const onContextMenu = (event: MouseEvent) => {
    if (fired || timer !== undefined) event.preventDefault();
  };

  element.addEventListener('pointerdown', onPointerDown);
  element.addEventListener('pointermove', onPointerMove);
  element.addEventListener('pointerup', onPointerUp);
  element.addEventListener('pointercancel', onPointerCancel);
  element.addEventListener('click', onClickCapture, true);
  element.addEventListener('contextmenu', onContextMenu);

  return () => {
    clear();
    element.removeEventListener('pointerdown', onPointerDown);
    element.removeEventListener('pointermove', onPointerMove);
    element.removeEventListener('pointerup', onPointerUp);
    element.removeEventListener('pointercancel', onPointerCancel);
    element.removeEventListener('click', onClickCapture, true);
    element.removeEventListener('contextmenu', onContextMenu);
  };
}

/**
 * Định dạng số điện thoại theo quốc gia khi người dùng đang gõ
 * (ý tưởng từ util/countries.ts + util/phoneNumber.ts của Telegram Web A).
 *
 * Dữ liệu là một chuỗi nén, mỗi dòng một nước, lấy từ Telegram Desktop (numbers.txt):
 *   `US🇺🇸1United States334`  =  mã ISO + cờ + mã vùng + tên + độ dài các nhóm số
 * "334" nghĩa là: 3 số, cách, 3 số, gạch, 4 số  →  `202 555-0123`.
 * Nước không có đuôi số thì dùng mặc định 3-3-3-3-3.
 */

// Một phần nhỏ của bảng (31/~240 nước) để demo; bảng đầy đủ nằm trong mã nguồn Telegram.
export const PHONE_DATA = `AE🇦🇪971United Arab Emirates234
AI🇦🇮1264Anguilla34
AG🇦🇬1268Antigua and Barbuda34
AU🇦🇺61Australia333
BR🇧🇷55Brazil254
CA🇨🇦1Canada334
CN🇨🇳86China344
DE🇩🇪49Germany38
ES🇪🇸34Spain333
FR🇫🇷33France12222
GB🇬🇧44United Kingdom46
HK🇭🇰852Hong Kong
ID🇮🇩62Indonesia
IN🇮🇳91India55
IT🇮🇹39Italy334
JP🇯🇵81Japan244
KZ🇰🇿7Kazakhstan3322
KR🇰🇷82South Korea
MX🇲🇽52Mexico
MY🇲🇾60Malaysia
NL🇳🇱31Netherlands12222
PH🇵🇭63Philippines334
PL🇵🇱48Poland333
RU🇷🇺7Russia3322
SG🇸🇬65Singapore44
TH🇹🇭66Thailand144
TR🇹🇷90Turkey334
TW🇹🇼886Taiwan
UA🇺🇦380Ukraine2322
US🇺🇸1United States334
VN🇻🇳84Vietnam`;

export interface Country {
  id: string;
  flag: string;
  /** chỉ chữ số, không có dấu + */
  code: string;
  name: string;
  /** độ dài từng nhóm, undefined = dùng mặc định */
  groups?: number[];
}

const DEFAULT_GROUPS = [3, 3, 3, 3, 3];

// mã ISO, hai ký tự "regional indicator" ghép thành cờ, mã vùng, tên, độ dài nhóm (có thể rỗng)
const LINE_RE = /^([A-Z]{2})(\p{Regional_Indicator}{2})(\d+)(.*?)(\d*)$/u;

export function parsePhoneData(data: string): Country[] {
  return data.split('\n').flatMap((line) => {
    const match = LINE_RE.exec(line.trim());
    if (!match) return [];
    const [, id, flag, code, name, groups] = match;
    return [{ id, flag, code, name, groups: groups ? groups.split('').map(Number) : undefined }];
  });
}

export const COUNTRIES = parsePhoneData(PHONE_DATA);

export const onlyDigits = (input: string) => input.replace(/\D+/g, '');

/**
 * Tìm nước theo mã vùng ở đầu số: lấy mã DÀI nhất khớp (+1264 Anguilla thắng +1 Mỹ).
 * Nhiều nước chung mã (+1 Mỹ/Canada, +7 Nga/Kazakhstan): giữ nước người dùng đang chọn
 * nếu vẫn khớp, thay vì nhảy sang nước đứng sau trong danh sách như bản gốc.
 */
export function detectCountry(input: string, current?: Country, countries = COUNTRIES) {
  const digits = onlyDigits(input);
  const candidates = countries.filter((c) => digits.startsWith(c.code));
  if (candidates.length === 0) return undefined;
  const longest = Math.max(...candidates.map((c) => c.code.length));
  const best = candidates.filter((c) => c.code.length === longest);
  return (
    best.find((c) => c.id === current?.id) ??
    best.find((c) => c.id === PRIMARY_FOR_CODE[c.code]) ??
    best[0]
  );
}

/** Mã dùng chung nhiều nước: chưa chọn nước nào thì đoán nước đông dân nhất. */
const PRIMARY_FOR_CODE: Record<string, string> = { '1': 'US', '7': 'RU' };

export interface FormatResult {
  text: string;
  /** đã đủ số theo mẫu của nước (mẫu mặc định thì luôn false) */
  isComplete: boolean;
  /** số chữ số gõ thừa so với mẫu */
  overflow: number;
}

/**
 * Định dạng PHẦN SAU mã vùng. Nhóm 1 và 2 cách nhau dấu cách, các nhóm sau nối bằng `-`
 * (riêng Anh dùng dấu cách), giống Telegram.
 *
 * Khác bản gốc: bản gốc dùng regex không neo nên chữ số thừa bị dính liền vào nhóm cuối
 * (`202 555-01234`); ở đây số thừa được tách riêng và báo về qua `overflow`.
 */
export function formatNational(nationalDigits: string, country?: Country): FormatResult {
  const digits = onlyDigits(nationalDigits);
  const groups = country?.groups ?? DEFAULT_GROUPS;
  const separator = country?.id === 'GB' ? ' ' : '-';
  const parts: string[] = [];
  let index = 0;
  for (const size of groups) {
    if (index >= digits.length) break;
    parts.push(digits.slice(index, index + size));
    index += size;
  }
  const capacity = groups.reduce((sum, size) => sum + size, 0);
  const overflow = Math.max(0, digits.length - capacity);

  let text = parts[0] ?? '';
  if (parts[1]) text += ` ${parts[1]}`;
  for (const part of parts.slice(2)) text += `${separator}${part}`;
  if (overflow) text += ` ${digits.slice(capacity)}`;

  return { text, isComplete: Boolean(country?.groups) && digits.length === capacity, overflow };
}

/** Định dạng cả số có mã vùng: `+84912345678` → `+84 912 345-678`. */
export function formatInternational(input: string, current?: Country) {
  const digits = onlyDigits(input);
  const country = detectCountry(digits, current);
  if (!country) return { country, text: digits ? `+${digits}` : '', isComplete: false, overflow: 0 };
  const national = formatNational(digits.slice(country.code.length), country);
  return {
    country,
    ...national,
    text: national.text ? `+${country.code} ${national.text}` : `+${country.code}`,
  };
}

/**
 * Bản sao cách làm của Telegram, để demo so sánh: dựng regex từ mẫu
 * (`334` → `(\d{1,3})(\d{1,3})?(\d{1,4})?()?()?`), thêm `()?` cho đủ 5 nhóm vì
 * callback của `String.replace` được viết cố định 5 tham số.
 */
export function formatNationalLikeOriginal(nationalDigits: string, country?: Country) {
  const groups = country?.groups ?? DEFAULT_GROUPS;
  const pattern = groups.map((size, i) => `(\\d{1,${size}})${i > 0 ? '?' : ''}`).join('');
  const re = new RegExp(`${pattern}${'()?'.repeat(5 - groups.length)}`);
  const separator = country?.id === 'GB' ? ' ' : '-';
  return onlyDigits(nationalDigits).replace(re, (_m, p1, p2, p3, p4, p5) => {
    let out = p1 ?? '';
    if (p2) out += ` ${p2}`;
    if (p3) out += `${separator}${p3}`;
    if (p4) out += `${separator}${p4}`;
    if (p5) out += `${separator}${p5}`;
    return out;
  });
}