// 在租车辆概览 — 按品牌型号统计
import { buildOnLeaseFleetByBrandModel } from './lease-contract-list-data.js';

function FleetDetailModal(props) {
	var Modal = props.Modal;
	var item = props.item;
	var open = props.open;
	var onClose = props.onClose;
	var renderVehicleNativeTableHeader = props.renderVehicleNativeTableHeader;
	var renderVehicleNativeTableRow = props.renderVehicleNativeTableRow;
	if (!Modal) return null;

	var titleNode = item
		? React.createElement('div', { className: 'lc-fleet-detail-modal__title' },
			React.createElement('span', { className: 'lc-fleet-detail-modal__title-main' }, item.brand + ' · ' + item.model),
			React.createElement('span', { className: 'lc-fleet-detail-modal__title-badge tabular-nums' }, item.count + ' 辆在租'),
			React.createElement('span', { className: 'lc-fleet-detail-modal__title-type' }, item.vehicleType || '-'),
		)
		: null;

	var canRenderTable = Boolean(
		item
		&& item.entries
		&& item.entries.length
		&& renderVehicleNativeTableHeader
		&& renderVehicleNativeTableRow,
	);

	return React.createElement(Modal, {
		className: 'lc-fleet-detail-modal',
		rootClassName: 'lc-fleet-detail-modal-root',
		title: titleNode,
		open: open,
		onCancel: onClose,
		footer: React.createElement('button', {
			type: 'button',
			className: 'vm-btn vm-btn-ghost lc-fleet-detail-modal__close',
			onClick: onClose,
		}, '关闭'),
		width: 960,
		centered: true,
		destroyOnClose: true,
	},
		canRenderTable
			? React.createElement('div', { className: 'lc-fleet-detail-modal__body' },
				React.createElement('div', { className: 'lc-fleet-detail-modal__table-host vm-page lc-page' },
					React.createElement('div', { className: 'lc-contract-vehicle-table-wrap' },
						React.createElement('table', { className: 'lc-contract-vehicle-native-table lc-fleet-detail-modal__vehicle-table' },
							renderVehicleNativeTableHeader(),
							React.createElement('tbody', null,
								item.entries.map(function (entry, index) {
									var record = entry.record;
									var vehicle = entry.vehicle;
									var vehicleIndex = (record && record.vehicles)
										? record.vehicles.indexOf(vehicle)
										: -1;
									if (vehicleIndex < 0) vehicleIndex = index;
									return renderVehicleNativeTableRow(
										record,
										vehicle,
										vehicleIndex,
										(record && record.id ? record.id : 'rec') + '-fleet-' + index,
									);
								}),
							),
						),
					),
				),
			)
			: React.createElement('div', { className: 'lc-fleet-detail-modal__empty' }, '暂无车辆明细'),
	);
}

export default function LeaseContractFleetSummary(props) {
	var records = props.records || [];
	var Modal = props.Modal;
	var renderVehicleNativeTableHeader = props.renderVehicleNativeTableHeader;
	var renderVehicleNativeTableRow = props.renderVehicleNativeTableRow;

	var useState = React.useState;
	var useMemo = React.useMemo;

	var _expanded = useState(false);
	var expanded = _expanded[0];
	var setExpanded = _expanded[1];
	var _brand = useState('全部');
	var brandFilter = _brand[0];
	var setBrandFilter = _brand[1];
	var _detailItem = useState(null);
	var detailItem = _detailItem[0];
	var setDetailItem = _detailItem[1];
	var _detailOpen = useState(false);
	var detailOpen = _detailOpen[0];
	var setDetailOpen = _detailOpen[1];

	function openDetail(item) {
		setDetailItem(item);
		setDetailOpen(true);
	}

	function closeDetail() {
		setDetailOpen(false);
		setDetailItem(null);
	}

	var summary = useMemo(function () {
		return buildOnLeaseFleetByBrandModel(records);
	}, [records]);

	var brandOptions = useMemo(function () {
		var set = {};
		summary.forEach(function (item) { set[item.brand] = true; });
		return Object.keys(set).sort(function (a, b) { return a.localeCompare(b, 'zh-CN'); });
	}, [summary]);

	var filtered = useMemo(function () {
		return summary.filter(function (item) {
			return brandFilter === '全部' || item.brand === brandFilter;
		});
	}, [summary, brandFilter]);

	var totalOnLease = useMemo(function () {
		return summary.reduce(function (sum, item) { return sum + item.count; }, 0);
	}, [summary]);

	var maxCount = filtered.length ? Math.max.apply(null, filtered.map(function (item) { return item.count; })) : 1;

	if (!totalOnLease) return null;

	return React.createElement('section', {
		className: 'lc-fleet-summary' + (expanded ? ' is-expanded' : ' is-collapsed'),
		'data-annotation-id': 'lc-fleet-summary',
		'aria-label': '在租车辆概览',
	},
		React.createElement('header', { className: 'lc-fleet-summary__header' },
			React.createElement('div', { className: 'lc-fleet-summary__title-block' },
				React.createElement('div', { className: 'lc-fleet-summary__title-row' },
					React.createElement('span', { className: 'lc-fleet-summary__icon', 'aria-hidden': true },
						React.createElement('svg', {
							xmlns: 'http://www.w3.org/2000/svg', width: 20, height: 20, viewBox: '0 0 24 24',
							fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round',
						},
							React.createElement('path', { d: 'M14 16H9m10 0h3v-3.5a1.5 1.5 0 0 0-1.5-1.5h-15A1.5 1.5 0 0 0 3 16.5V20h3' }),
							React.createElement('circle', { cx: 7.5, cy: 17.5, r: 2.5 }),
							React.createElement('circle', { cx: 17.5, cy: 17.5, r: 2.5 }),
						),
					),
					React.createElement('h2', { className: 'lc-fleet-summary__title' }, '在租车辆'),
					React.createElement('span', { className: 'lc-fleet-summary__badge tabular-nums' }, totalOnLease + ' 辆'),
				),
			),
			React.createElement('div', { className: 'lc-fleet-summary__toolbar' },
				React.createElement('button', {
					type: 'button',
					className: 'lc-fleet-summary__toggle',
					onClick: function () { setExpanded(!expanded); },
					'aria-expanded': expanded,
					'aria-label': expanded ? '收起在租车辆概览' : '查看在租车辆详情',
				},
					React.createElement('svg', {
						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,
						className: 'lc-fleet-summary__toggle-icon',
					},
						React.createElement('path', { d: expanded ? 'm18 15-6-6-6 6' : 'm6 9 6 6 6-6' }),
					),
					expanded ? '收起' : '查看在租车辆详情',
				),
			),
		),
		expanded ? React.createElement('div', { className: 'lc-fleet-summary__body' },
			React.createElement('div', { className: 'lc-fleet-summary__brands', role: 'group', 'aria-label': '按品牌筛选' },
				React.createElement('button', {
					type: 'button',
					className: 'lc-fleet-summary__brand-chip' + (brandFilter === '全部' ? ' is-active' : ''),
					onClick: function () { setBrandFilter('全部'); },
					'aria-pressed': brandFilter === '全部',
				}, '全部'),
				brandOptions.map(function (brand) {
					return React.createElement('button', {
						key: brand,
						type: 'button',
						className: 'lc-fleet-summary__brand-chip' + (brandFilter === brand ? ' is-active' : ''),
						onClick: function () { setBrandFilter(brandFilter === brand ? '全部' : brand); },
						'aria-pressed': brandFilter === brand,
					}, brand);
				}),
			),
			filtered.length ? React.createElement('div', { className: 'lc-fleet-summary__grid', role: 'list' },
				filtered.map(function (item) {
					var share = Math.round((item.count / totalOnLease) * 100);
					var barWidth = Math.max(8, Math.round((item.count / maxCount) * 100));
					return React.createElement('article', {
						key: item.key,
						className: 'lc-fleet-summary__card',
						role: 'listitem',
						tabIndex: 0,
						onClick: function () { openDetail(item); },
						onKeyDown: function (e) {
							if (e.key === 'Enter' || e.key === ' ') {
								e.preventDefault();
								openDetail(item);
							}
						},
						'aria-label': item.brand + ' ' + item.model + '，' + item.count + ' 辆在租，点击查看明细',
					},
						React.createElement('div', { className: 'lc-fleet-summary__card-top' },
							React.createElement('span', { className: 'lc-fleet-summary__card-brand' }, item.brand),
							React.createElement('span', { className: 'lc-fleet-summary__card-type' }, item.vehicleType),
						),
						React.createElement('h3', { className: 'lc-fleet-summary__card-model', title: item.model }, item.model),
						React.createElement('div', { className: 'lc-fleet-summary__card-metrics' },
							React.createElement('span', { className: 'lc-fleet-summary__card-count tabular-nums' }, item.count),
							React.createElement('span', { className: 'lc-fleet-summary__card-unit' }, '辆'),
							React.createElement('span', { className: 'lc-fleet-summary__card-share tabular-nums' }, '占 ' + share + '%'),
						),
						React.createElement('div', { className: 'lc-fleet-summary__card-bar', 'aria-hidden': true },
							React.createElement('span', {
								className: 'lc-fleet-summary__card-bar-fill',
								style: { width: barWidth + '%' },
							}),
						),
						React.createElement('span', { className: 'lc-fleet-summary__card-hint' }, '点击查看车辆明细'),
					);
				}),
			) : React.createElement('div', { className: 'lc-fleet-summary__empty' },
				React.createElement('p', null, '该品牌暂无在租车型'),
				React.createElement('button', {
					type: 'button',
					className: 'lc-fleet-summary__empty-reset',
					onClick: function () { setBrandFilter('全部'); },
				}, '查看全部'),
			),
		) : null,
		React.createElement(FleetDetailModal, {
			Modal: Modal,
			item: detailItem,
			open: detailOpen,
			onClose: closeDetail,
			renderVehicleNativeTableHeader: renderVehicleNativeTableHeader,
			renderVehicleNativeTableRow: renderVehicleNativeTableRow,
		}),
	);
}
