import React, { useEffect, useState } from 'react';
import { Select } from 'antd';
import { paginateWordHtml } from './contract-word-preview.js';

var PREVIEW_ZOOM_STEPS = [50, 75, 90, 100, 110, 125, 150, 175, 200];

function previewPagerIcon(name) {
	var common = {
		xmlns: 'http://www.w3.org/2000/svg',
		width: 16,
		height: 16,
		viewBox: '0 0 24 24',
		fill: 'none',
		stroke: 'currentColor',
		strokeWidth: 2,
		strokeLinecap: 'round',
		strokeLinejoin: 'round',
		'aria-hidden': true,
	};
	if (name === 'zoomOut') {
		return React.createElement('svg', common, React.createElement('path', { d: 'M5 12h14' }));
	}
	if (name === 'zoomIn') {
		return React.createElement('svg', common,
			React.createElement('path', { d: 'M5 12h14' }),
			React.createElement('path', { d: 'M12 5v14' }),
		);
	}
	return null;
}

export default function LeaseContractPreviewPanel({ html, zoom, onZoomChange }) {
	var pagesState = useState([]);
	var pageIdxState = useState(0);
	var viewModeState = useState('scroll');
	var internalZoomState = useState(100);
	var pages = pagesState[0];
	var pageIdx = pageIdxState[0];
	var setPageIdx = pageIdxState[1];
	var viewMode = viewModeState[0];
	var setViewMode = viewModeState[1];
	var previewZoom = zoom != null ? zoom : internalZoomState[0];
	var setPreviewZoom = onZoomChange || internalZoomState[1];

	useEffect(function () {
		if (!html) {
			pagesState[1]([]);
			return;
		}
		var timer = window.setTimeout(function () {
			pagesState[1](paginateWordHtml(html));
			pageIdxState[1](0);
		}, 0);
		return function () { window.clearTimeout(timer); };
	}, [html]);

	function stepPreviewZoom(direction) {
		setPreviewZoom(function (current) {
			var idx = PREVIEW_ZOOM_STEPS.indexOf(current);
			if (idx < 0) {
				if (direction > 0) {
					return PREVIEW_ZOOM_STEPS.find(function (value) { return value > current; })
						|| PREVIEW_ZOOM_STEPS[PREVIEW_ZOOM_STEPS.length - 1];
				}
				var reversed = PREVIEW_ZOOM_STEPS.slice().reverse();
				return reversed.find(function (value) { return value < current; }) || PREVIEW_ZOOM_STEPS[0];
			}
			var nextIdx = idx + direction;
			if (nextIdx < 0) return PREVIEW_ZOOM_STEPS[0];
			if (nextIdx >= PREVIEW_ZOOM_STEPS.length) return PREVIEW_ZOOM_STEPS[PREVIEW_ZOOM_STEPS.length - 1];
			return PREVIEW_ZOOM_STEPS[nextIdx];
		});
	}

	if (!html || !String(html).trim()) {
		return React.createElement('div', { className: 'ct-preview-empty', role: 'status' },
			React.createElement('p', { className: 'ct-preview-empty__text' }, '暂无合同内容可预览'),
		);
	}

	if (!pages.length) {
		return React.createElement('div', { className: 'ct-preview-doc ct-word-doc ct-word-paginated' },
			React.createElement('div', { className: 'ct-preview-body-shell' },
				React.createElement('div', { className: 'ct-preview-pages-wrap' },
					React.createElement('div', { className: 'ct-preview-pages' },
						React.createElement('div', { className: 'ct-preview-page is-loading' }, '合同分页排版计算中…'),
					),
				),
			),
		);
	}

	var previewToolbar = React.createElement('div', { className: 'ct-preview-toolbar' },
		React.createElement('div', { className: 'ct-preview-toolbar__row ct-preview-toolbar__row--primary', role: 'toolbar', 'aria-label': '预览缩放' },
			React.createElement('div', { className: 'ct-preview-pager__group', role: 'group', 'aria-label': '缩放' },
				React.createElement('div', { className: 'ct-preview-pager__group-body' },
					React.createElement('button', {
						type: 'button',
						className: 'ct-preview-pager__icon-btn',
						'aria-label': '缩小',
						disabled: previewZoom <= PREVIEW_ZOOM_STEPS[0],
						onClick: function () { stepPreviewZoom(-1); },
					}, previewPagerIcon('zoomOut')),
					React.createElement(Select, {
						className: 'ct-preview-zoom-select vm-focus-border',
						size: 'small',
						value: previewZoom,
						onChange: setPreviewZoom,
						'aria-label': '预览缩放比例',
						options: PREVIEW_ZOOM_STEPS.map(function (value) {
							return { value: value, label: value + '%' };
						}),
					}),
					React.createElement('button', {
						type: 'button',
						className: 'ct-preview-pager__icon-btn',
						'aria-label': '放大',
						disabled: previewZoom >= PREVIEW_ZOOM_STEPS[PREVIEW_ZOOM_STEPS.length - 1],
						onClick: function () { stepPreviewZoom(1); },
					}, previewPagerIcon('zoomIn')),
				),
			),
		),
		React.createElement('div', {
			className: 'ct-preview-toolbar__row ct-preview-toolbar__row--secondary ct-preview-pager',
			role: 'toolbar',
			'aria-label': '合同预览工具栏',
		},
			React.createElement('div', { className: 'ct-preview-pager__group', role: 'group', 'aria-label': '翻页' },
				React.createElement('span', { className: 'ct-preview-pager__group-label' }, '翻页'),
				React.createElement('div', { className: 'ct-preview-pager__group-body' },
					React.createElement('button', {
						type: 'button',
						className: 'vm-btn vm-btn-secondary ct-preview-pager__btn',
						disabled: pageIdx <= 0,
						onClick: function () { setPageIdx(Math.max(0, pageIdx - 1)); },
					}, '上一页'),
					React.createElement('span', { className: 'ct-preview-pager__page', 'aria-live': 'polite' },
						React.createElement('span', { className: 'ct-preview-pager__page-current' }, pageIdx + 1),
						' / ',
						React.createElement('span', { className: 'ct-preview-pager__page-total' }, pages.length),
					),
					React.createElement('button', {
						type: 'button',
						className: 'vm-btn vm-btn-secondary ct-preview-pager__btn',
						disabled: pageIdx >= pages.length - 1,
						onClick: function () { setPageIdx(Math.min(pages.length - 1, pageIdx + 1)); },
					}, '下一页'),
				),
			),
			React.createElement('div', { className: 'ct-preview-pager__group ct-preview-pager__group--view', role: 'group', 'aria-label': '视图' },
				React.createElement('span', { className: 'ct-preview-pager__group-label' }, '视图'),
				React.createElement('div', { className: 'ct-preview-pager__segmented', role: 'group', 'aria-label': '预览视图模式' },
					React.createElement('button', {
						type: 'button',
						className: 'ct-preview-pager__segment' + (viewMode === 'scroll' ? ' is-active' : ''),
						'aria-pressed': viewMode === 'scroll',
						onClick: function () { setViewMode('scroll'); },
					}, '连续预览'),
					React.createElement('button', {
						type: 'button',
						className: 'ct-preview-pager__segment' + (viewMode === 'single' ? ' is-active' : ''),
						'aria-pressed': viewMode === 'single',
						onClick: function () { setViewMode('single'); },
					}, '单页预览'),
				),
			),
		),
	);

	var pagesContent = viewMode === 'single'
		? React.createElement('div', { className: 'ct-preview-page', key: pageIdx },
			React.createElement('div', {
				className: 'ct-preview-page__body ct-word-doc',
				dangerouslySetInnerHTML: { __html: pages[pageIdx] },
			}),
			React.createElement('div', { className: 'ct-preview-page__footer' }, '— ', pageIdx + 1, ' —'),
		)
		: pages.map(function (pageHtml, i) {
			return React.createElement('div', { className: 'ct-preview-page', key: 'p-' + i },
				React.createElement('div', {
					className: 'ct-preview-page__body ct-word-doc',
					dangerouslySetInnerHTML: { __html: pageHtml },
				}),
				React.createElement('div', { className: 'ct-preview-page__footer' }, '— ', i + 1, ' —'),
			);
		});

	return React.createElement('div', { className: 'ct-preview-doc ct-word-doc ct-word-paginated' },
		previewToolbar,
		React.createElement('div', { className: 'ct-preview-body-shell' },
			React.createElement('div', { className: 'ct-preview-pages-wrap' },
				React.createElement('div', {
					className: 'ct-preview-pages',
					style: { zoom: previewZoom / 100 },
				}, pagesContent),
			),
		),
	);
}
