/**
 * *.tokens.js 属性面板 — 动效 token 文档行（与组件 className / theme 一致）
 */

const MOTION_EASING_VALUE = 'cubic-bezier(0.4, 0, 0.2, 1)';

function buildMotionUiPanelDocs(id, duration) {
  return [
    {
      label: '交互过渡',
      cssProp: 'transition',
      token: `--motion-ui-${id}`,
      value: `${duration} · ${MOTION_EASING_VALUE}`,
      semanticRef: `tfds-motion-ui-${id}`,
    },
    {
      label: 'Tailwind 类',
      cssProp: 'class',
      value: `tfds-motion-ui-${id}`,
      readOnly: true,
    },
  ];
}

export const MOTION_TRANSITION_UI_INSTANT = buildMotionUiPanelDocs('instant', '100ms');
export const MOTION_TRANSITION_UI_FAST = buildMotionUiPanelDocs('fast', '150ms');
export const MOTION_TRANSITION_UI_NORMAL = buildMotionUiPanelDocs('normal', '200ms');
export const MOTION_TRANSITION_UI_SLOW = buildMotionUiPanelDocs('slow', '300ms');

/** Tailwind：预设工具类（默认用法） */
export const MOTION_UI_TW = {
  instant: 'tfds-motion-ui-instant',
  fast: 'tfds-motion-ui-fast',
  normal: 'tfds-motion-ui-normal',
  slow: 'tfds-motion-ui-slow',
};

/** @deprecated 用 MOTION_UI_TW */
export const MOTION_EASING_TW = '[transition-timing-function:var(--motion-transition-easing)]';

/** inline style.transition 简写 */
export const MOTION_TRANSITION_CSS = {
  instant: 'var(--motion-ui-instant)',
  fast: 'var(--motion-ui-fast)',
  normal: 'var(--motion-ui-normal)',
  slow: 'var(--motion-ui-slow)',
};

export const MOTION_INLINE_SPIN_DOCS = [
  { label: 'Button loading 旋转', cssProp: 'animation', token: '--motion-inline-spin-loop', value: '1s · tfds-inline-spin' },
];

export const MOTION_ICON_SPIN_DOCS = [
  { label: '旋转周期', cssProp: 'animation-duration', token: '--motion-icon-spin-loop', value: 'theme 基线 var(--motion-speed-1200)' },
  { label: '实现', cssProp: 'animation', value: 'tfds-icon-rotate · .tfds-icon-spin（组件无 speed prop）' },
];

export const MOTION_CAT_BLINK_DOCS = [
  { label: '眨眼周期', cssProp: 'animation-duration', token: '--motion-decor-cat-blink', value: '3.6s' },
  { label: '实现', cssProp: 'animation', value: 'tfds-cat-blink · .tfds-cat-eyelid' },
  { label: '缓动', cssProp: 'animation-timing-function', token: '--motion-loop-easing', value: 'ease-in-out' },
];

export const MOTION_BUBBLE_ENTER_DOCS = [
  { label: '入场时长', cssProp: 'animation-duration', token: '--motion-enter-bubble', value: '240ms' },
  { label: '实现', cssProp: 'animation', value: 'tfds-message-bubble-pop' },
  { label: '缓动', cssProp: 'animation-timing-function', value: MOTION_EASING_VALUE, readOnly: true },
  { label: '发出方向', cssProp: 'class', value: 'tfds-message-bubble-pop--outgoing（自右飞入）', readOnly: true },
  { label: '收到方向', cssProp: 'class', value: 'tfds-message-bubble-pop--incoming（自左飞入）', readOnly: true },
];
