import React, { useMemo, useState } from 'react';
import { Row, Col, message } from 'antd';
import { DEFAULT_MILEAGE_STANDARD, DEFAULT_FEE_INFO } from '../contract-template-management/contract-template-vars.js';
import { createDefaultLeaseOrderState, createDefaultPowerOfAttorneyState } from './lease-order-vars.js';
import { buildLeaseContractPreviewHtml } from './lease-contract-preview-build.js';
import {
	isMainContractFormComplete,
	isLeaseOrderFormComplete,
	isPowerOfAttorneyFormComplete,
} from './lease-contract-form-validation.js';
import LeaseContractPreviewPanel from './LeaseContractPreviewPanel.jsx';
import LeaseContractEditorForm, {
	LeaseContractLeaseOrderSection,
	LeaseContractPowerOfAttorneySection,
} from './LeaseContractEditorForm.jsx';

export default function LeaseContractCreate({ onBack }) {
	var workspaceZoomState = useState(100);
	var workspaceZoom = workspaceZoomState[0];
	var setWorkspaceZoom = workspaceZoomState[1];
	var lessorIdState = useState('');
	var customerIdState = useState('');
	var mileageState = useState(Object.assign({}, DEFAULT_MILEAGE_STANDARD));
	var feeInfoState = useState(Object.assign({}, DEFAULT_FEE_INFO));
	var contractCodeState = useState('');
	var leaseOrderState = useState(function () {
		var initial = createDefaultLeaseOrderState();
		return {
			insuredVehicleCount: initial.insuredVehicleCount,
			thirdPartyLiabilityMillion: initial.thirdPartyLiabilityMillion,
			deliveryRegion: initial.deliveryRegion.slice(),
			deliveryDate: initial.deliveryDate,
			rows: initial.rows.map(function (row) {
				return Object.assign({}, row, { brandModel: row.brandModel ? row.brandModel.slice() : [] });
			}),
		};
	});
	var lessorId = lessorIdState[0];
	var setLessorId = lessorIdState[1];
	var customerId = customerIdState[0];
	var setCustomerId = customerIdState[1];
	var mileage = mileageState[0];
	var setMileage = mileageState[1];
	var feeInfo = feeInfoState[0];
	var setFeeInfo = feeInfoState[1];
	var contractCode = contractCodeState[0];
	var setContractCode = contractCodeState[1];
	var leaseOrder = leaseOrderState[0];
	var setLeaseOrder = leaseOrderState[1];
	var powerOfAttorneyState = useState(function () {
		var initial = createDefaultPowerOfAttorneyState();
		return {
			delegates: initial.delegates.map(function (row) {
				return Object.assign({}, row);
			}),
		};
	});
	var powerOfAttorney = powerOfAttorneyState[0];
	var setPowerOfAttorney = powerOfAttorneyState[1];

	var previewHtml = useMemo(function () {
		return buildLeaseContractPreviewHtml({
			lessorId: lessorId,
			customerId: customerId,
			mileage: mileage,
			feeInfo: feeInfo,
			contractCode: contractCode,
			leaseOrder: leaseOrder,
		});
	}, [lessorId, customerId, mileage, feeInfo, contractCode, leaseOrder]);

	var isMainContractComplete = useMemo(function () {
		return isMainContractFormComplete({
			lessorId: lessorId,
			customerId: customerId,
			contractCode: contractCode,
			mileage: mileage,
			feeInfo: feeInfo,
		});
	}, [lessorId, customerId, contractCode, mileage, feeInfo]);

	var isLeaseOrderComplete = useMemo(function () {
		return isLeaseOrderFormComplete({ leaseOrder: leaseOrder });
	}, [leaseOrder]);

	var isPowerOfAttorneyComplete = useMemo(function () {
		return isPowerOfAttorneyFormComplete({ powerOfAttorney: powerOfAttorney });
	}, [powerOfAttorney]);

	return React.createElement('div', { className: 'vm-page lc-page lc-create-page ct-page' },
		React.createElement('div', { className: 'lc-create-topbar' },
			React.createElement('button', {
				type: 'button',
				className: 'vm-btn vm-btn-back',
				onClick: onBack,
			}, '返回列表'),
		),
		React.createElement('div', { className: 'ct-editor-page lc-create-editor-page' },
			React.createElement('div', { className: 'ct-editor-workspace' },
				React.createElement(Row, { gutter: [16, 16] },
					React.createElement(Col, { xs: 24, lg: 12 },
						React.createElement('div', { className: 'lc-create-editor-column' },
							React.createElement('section', { className: 'ct-editor-column-card', 'aria-label': '主体合同信息' },
								React.createElement('div', { className: 'ct-panel-head' },
									React.createElement('div', { className: 'ct-panel-head__title' }, '主体合同信息'),
									React.createElement('span', {
										className: 'lc-form-completion-badge ' + (isMainContractComplete ? 'lc-form-completion-badge--done' : 'lc-form-completion-badge--pending'),
										role: 'status',
										'aria-live': 'polite',
									}, isMainContractComplete ? '已完成' : '未完成'),
								),
								React.createElement('div', { className: 'ct-editor-panel lc-create-editor-panel' },
									React.createElement(LeaseContractEditorForm, {
										lessorId: lessorId,
										customerId: customerId,
										contractCode: contractCode,
										mileage: mileage,
										feeInfo: feeInfo,
										onLessorChange: setLessorId,
										onCustomerChange: setCustomerId,
										onContractCodeChange: setContractCode,
										onMileageChange: setMileage,
										onFeeInfoChange: setFeeInfo,
									}),
								),
							),
							React.createElement('section', { className: 'ct-editor-column-card', 'aria-label': '附件1：租赁订单' },
								React.createElement('div', { className: 'ct-panel-head' },
									React.createElement('div', { className: 'ct-panel-head__title' }, '附件1：租赁订单'),
									React.createElement('span', {
										className: 'lc-form-completion-badge ' + (isLeaseOrderComplete ? 'lc-form-completion-badge--done' : 'lc-form-completion-badge--pending'),
										role: 'status',
										'aria-live': 'polite',
									}, isLeaseOrderComplete ? '已完成' : '未完成'),
								),
								React.createElement('div', { className: 'ct-editor-panel lc-create-editor-panel' },
									React.createElement(LeaseContractLeaseOrderSection, {
										leaseOrder: leaseOrder,
										onLeaseOrderChange: setLeaseOrder,
									}),
								),
							),
							React.createElement('section', { className: 'ct-editor-column-card', 'aria-label': '授权委托书' },
								React.createElement('div', { className: 'ct-panel-head' },
									React.createElement('div', { className: 'ct-panel-head__title' }, '授权委托书'),
									React.createElement('span', {
										className: 'lc-form-completion-badge ' + (isPowerOfAttorneyComplete ? 'lc-form-completion-badge--done' : 'lc-form-completion-badge--pending'),
										role: 'status',
										'aria-live': 'polite',
									}, isPowerOfAttorneyComplete ? '已完成' : '未完成'),
								),
								React.createElement('div', { className: 'ct-editor-panel lc-create-editor-panel' },
									React.createElement(LeaseContractPowerOfAttorneySection, {
										powerOfAttorney: powerOfAttorney,
										onPowerOfAttorneyChange: setPowerOfAttorney,
									}),
								),
							),
						),
					),
					React.createElement(Col, { xs: 24, lg: 12 },
						React.createElement('section', {
							className: 'ct-editor-column-card ct-editor-column-card--preview',
							'aria-label': '实时预览',
						},
							React.createElement('div', { className: 'ct-panel-head' },
								React.createElement('div', { className: 'ct-panel-head__title' }, '实时预览',
									React.createElement('span', { className: 'ct-panel-head__badge' }, 'V26.6 完整合同'),
								),
							),
							React.createElement('div', { className: 'ct-preview-panel ct-preview-panel--word' },
								React.createElement(LeaseContractPreviewPanel, {
									html: previewHtml,
									zoom: workspaceZoom,
									onZoomChange: setWorkspaceZoom,
								}),
							),
						),
					),
				),
			),
		),
		React.createElement('div', { className: 'lc-create-footer' },
			React.createElement('button', {
				type: 'button',
				className: 'vm-btn vm-btn-ghost',
				onClick: onBack,
			}, '取消'),
			React.createElement('button', {
				type: 'button',
				className: 'vm-btn vm-btn-secondary',
				onClick: function () { message.success('已保存草稿（原型）'); },
			}, '保存草稿'),
			React.createElement('button', {
				type: 'button',
				className: 'vm-btn vm-btn-primary',
				onClick: function () { message.info('提交审核（原型）'); },
			}, '提交审核'),
		),
	);
}
