import { FileAddOutlined, UploadOutlined } from '@ant-design/icons';
import { Button, Input, Modal, Upload } from 'antd';
import { useEffect, useState } from 'react';

const { Dragger } = Upload;

type ReplaceDocModalProps = {
	open: boolean;
	docName: string;
	organizationName: string | null;
	submitting: boolean;
	onCancel: () => void;
	onSubmit: (file: File, reason: string) => void;
};

export default function ReplaceDocModal({ open, docName, organizationName, submitting, onCancel, onSubmit }: ReplaceDocModalProps) {
	const [reason, setReason] = useState('');
	const [file, setFile] = useState<File | null>(null);

	// при каждом открытии — пустая форма
	useEffect(() => {
		if (open) {
			setReason('');
			setFile(null);
		}
	}, [open]);

	return (
		<Modal
			title='Замена документа'
			open={open}
			onCancel={onCancel}
			onOk={() => file && onSubmit(file, reason.trim())}
			okText='Загрузить'
			okButtonProps={{
				icon: <UploadOutlined />,
				disabled: file === null || reason.trim().length === 0,
			}}
			confirmLoading={submitting}>
			<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
				{organizationName && <span>{organizationName}</span>}
				<div
					style={{
						backgroundColor: 'rgb(248, 250, 252)',
						borderRadius: 6,
						fontSize: 12,
						color: '#667085',
						padding: '8px 10px',
					}}>
					Заменяемый документ: {docName}
				</div>

				<Input placeholder='Укажите причину замены' value={reason} maxLength={4000} onChange={(e) => setReason(e.target.value)} />

				<Dragger
					multiple={false}
					style={{ borderStyle: 'dashed' }}
					fileList={file ? [{ uid: 'replace', name: file.name, status: 'done' }] : []}
					maxCount={1}
					accept='.xls,.xlsx,.xlsb,.pdf,.png,.jpg,.jpeg'
					beforeUpload={(f) => {
						setFile(f);
						return false;
					}}
					onRemove={() => setFile(null)}>
					<p className='ant-upload-drag-icon'>
						<FileAddOutlined />
					</p>
					<p className='ant-upload-text' style={{ color: '#667085' }}>
						Перетащите файл сюда
					</p>
					<Button>Выбрать документ</Button>
				</Dragger>
			</div>
		</Modal>
	);
}