"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = ImportModal;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const solid_1 = require("@heroicons/react/20/solid");
const Modal_1 = require("../Modal");
function ImportModal({ handleImport, show, onHide, onChangeCapture }) {
    const [fileName, setFileName] = (0, react_1.useState)('');
    const inputFileRef = react_1.default.useRef();
    const onFileChangeCapture = (e) => {
        const file = e.target.files ? e.target.files[0] : null;
        if (file) {
            const fileName = file.name;
            setFileName(fileName);
        }
        if (onChangeCapture) {
            onChangeCapture(file);
        }
    };
    const onFileChange = () => {
        // @ts-ignore
        inputFileRef.current.click();
    };
    return (react_1.default.createElement(Modal_1.PHXModal, { show: show, onHide: onHide, primaryActionText: 'X\u00E1c nh\u1EADn', onPrimaryClick: handleImport },
        react_1.default.createElement("div", null,
            react_1.default.createElement("div", { className: 'border-b border-gray-200 bg-white px-4 py-5 sm:px-6 -ml-6 -mt-6 -mr-6' },
                react_1.default.createElement("h3", { className: 'text-lg font-medium leading-6 text-gray-900' }, "T\u1EA3i l\u00EAn d\u1EEF li\u1EC7u")),
            react_1.default.createElement("div", { className: 'mt-2' },
                react_1.default.createElement("p", { className: 'text-sm text-gray-600' }, "H\u00E3y ki\u1EC3m tra d\u1EEF li\u1EC7u tr\u01B0\u1EDBc khi t\u1EA3i l\u00EAn")),
            react_1.default.createElement("div", { className: 'mt-5' },
                react_1.default.createElement("div", { className: 'hidden' },
                    react_1.default.createElement("input", { type: 'file', ref: inputFileRef, onChangeCapture: onFileChangeCapture })),
                fileName == '' ? (react_1.default.createElement("button", { type: 'button', onClick: onFileChange, className: 'relative block w-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2' },
                    react_1.default.createElement("svg", { className: 'mx-auto h-12 w-12 text-gray-400', xmlns: 'http://www.w3.org/2000/svg', stroke: 'currentColor', fill: 'none', viewBox: '0 0 48 48', "aria-hidden": 'true' },
                        react_1.default.createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M8 14v20c0 4.418 7.163 8 16 8 1.381 0 2.721-.087 4-.252M8 14c0 4.418 7.163 8 16 8s16-3.582 16-8M8 14c0-4.418 7.163-8 16-8s16 3.582 16 8m0 0v14m0-4c0 4.418-7.163 8-16 8S8 28.418 8 24m32 10v6m0 0v6m0-6h6m-6 0h-6' })),
                    react_1.default.createElement("span", { className: 'mt-2 block text-sm font-medium text-gray-900' }, "Ch\u1ECDn th\u01B0 m\u1EE5c"))) : (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement("div", { className: 'flex border text-gray-500 text-sm border-r-0 border-l-0 border-gray-300 pt-5 pb-5 pl-3 pr-3' },
                        react_1.default.createElement("div", { className: 'flex flex-1' },
                            react_1.default.createElement(solid_1.DocumentTextIcon, { className: 'mr-1 w-5 h-5 min-w-fit' }),
                            react_1.default.createElement("span", null, fileName)),
                        react_1.default.createElement("div", { className: 'text-right' },
                            react_1.default.createElement("button", { onClick: onFileChange, type: 'button', className: 'inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2' }, "Thay \u0111\u1ED5i")))))),
            react_1.default.createElement("div", { className: 'flex mt-5' },
                react_1.default.createElement(solid_1.InformationCircleIcon, { className: 'w-6 h-6 text-gray-400 mr-1' }),
                react_1.default.createElement("label", { htmlFor: 'comments', className: 'text-sm text-gray-500' }, "check")))));
}
//# sourceMappingURL=ModalImport.js.map