/**
 * 保存状态。状态文案即用户对「内容有没有保存」的唯一反馈。
 *
 * 自动保存与手动保存共用同一套取值，但 `autosave` 标记让界面能区别对待：
 * 自动保存不该抢走提交按钮的可用性，也不该把「保存中」渲染成用户主动操作。
 *
 * @package Jio
 */

import { __ } from '@wordpress/i18n';

export type SaveStatus = 'ready' | 'saving' | 'saved' | 'error' | 'conflict' | 'submitting' | 'submitted';

export type SaveStateValue = {
	state: SaveStatus;
	at: string;
	/** 当前状态是否来自后台自动保存（不阻塞提交按钮）。 */
	autosave?: boolean;
};

const LABELS: Record<SaveStatus, string> = {
	ready: __('尚未保存', 'jio'),
	saving: __('保存中…', 'jio'),
	saved: __('已保存', 'jio'),
	error: __('保存失败', 'jio'),
	conflict: __('内容已在别处更新', 'jio'),
	submitting: __('提交中…', 'jio'),
	submitted: __('已提交', 'jio'),
};

/** 自动保存专用的说法：避免让作者以为是自己点了保存。 */
const AUTOSAVE_LABELS: Partial<Record<SaveStatus, string>> = {
	saving: __('自动保存中…', 'jio'),
	saved: __('已自动保存', 'jio'),
	error: __('自动保存失败，将重试', 'jio'),
};

export function saveStateLabel(value: SaveStateValue): string {
	const autosave = value.autosave ? AUTOSAVE_LABELS[value.state] : '';
	return autosave || LABELS[value.state] || LABELS.ready;
}

export function SaveState({ value }: { value: SaveStateValue }) {
	return (
		<span className={`jio-creator__save is-${value.state}`} role="status" aria-live="polite">
			<i className="fa fas fa-circle" aria-hidden="true" />
			<span>{saveStateLabel(value)}</span>
			{value.state === 'saved' && value.at ? <time>{value.at}</time> : null}
		</span>
	);
}