"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const prefix_classname_1 = __importDefault(require("prefix-classname"));
const antd_1 = require("antd");
const icons_1 = require("@ant-design/icons");
const const_1 = require("../../../config/const");
require("./style.scss");
const cn = (0, prefix_classname_1.default)('');
const c = (0, prefix_classname_1.default)(`${const_1.CLS_PREFIX}-location-widget`);
const useForceUpdate = () => {
    const [v, setV] = react_1.default.useState(0);
    const update = react_1.default.useCallback(() => {
        setV((x) => x + 1);
    }, [setV]);
    return [update, v];
};
const LocationWidget = react_1.default.memo(({ className, iframeRef }) => {
    const [action, setLocationAction] = (0, const_1.useLocationAction)();
    const [update] = useForceUpdate();
    const historyRef = react_1.default.useRef({ urls: [], index: -1 });
    react_1.default.useMemo(() => {
        if (action) {
            if (action.action === 'PUSH' || historyRef.current.index < 0) {
                const i = historyRef.current.urls.indexOf(action.url);
                if (i >= 0) {
                    historyRef.current.urls.splice(i, 1);
                }
                historyRef.current.urls.push(action.url);
                historyRef.current.index = historyRef.current.urls.length - 1;
            }
            else {
                const i = historyRef.current.urls.indexOf(action.url);
                historyRef.current.urls[historyRef.current.index] = action.url;
                if (i > historyRef.current.index) {
                    historyRef.current.urls.splice(i, 1);
                }
                else if (i >= 0 && i < historyRef.current.index) {
                    historyRef.current.urls.splice(i, 1);
                    historyRef.current.index--;
                }
            }
        }
    }, [action]);
    const reload = () => {
        if (iframeRef.current.getAttribute('src') === url()) {
            iframeRef.current.contentWindow.location.reload();
        }
        else {
            setLocationAction({ action: 'REPLACE', url: url(), outer: true });
        }
    };
    const reloadAndReset = () => {
        historyRef.current = {
            urls: [url()],
            index: 0
        };
        reload();
        update();
    };
    const url = () => {
        return historyRef.current.urls[historyRef.current.index];
    };
    const canBack = () => {
        if (historyRef.current.index <= 0) {
            return false;
        }
        return !!historyRef.current.urls.slice(0, historyRef.current.index).length;
    };
    const canForward = () => {
        if (historyRef.current.index < 0) {
            return false;
        }
        return historyRef.current.index < historyRef.current.urls.length - 1;
    };
    const back = () => {
        if (canBack()) {
            historyRef.current.index = historyRef.current.index - 1;
            setLocationAction({ action: 'REPLACE', url: historyRef.current.urls[historyRef.current.index], outer: true });
        }
    };
    const forward = () => {
        if (canForward()) {
            historyRef.current.index = historyRef.current.index + 1;
            setLocationAction({ action: 'REPLACE', url: historyRef.current.urls[historyRef.current.index], outer: true });
        }
    };
    const [inputValue, setInputValue] = react_1.default.useState(url());
    react_1.default.useLayoutEffect(() => {
        setInputValue(url());
    }, [url()]);
    return (react_1.default.createElement("div", { className: cn(c(), className) },
        react_1.default.createElement("div", { className: c('__btns') },
            react_1.default.createElement(antd_1.Button, { title: '后退', type: 'text', shape: 'circle', disabled: !canBack(), onClick: back, icon: react_1.default.createElement(icons_1.ArrowLeftOutlined, null) }),
            react_1.default.createElement(antd_1.Button, { title: '前进', type: 'text', shape: 'circle', disabled: !canForward(), onClick: forward, icon: react_1.default.createElement(icons_1.ArrowRightOutlined, null) }),
            react_1.default.createElement(antd_1.Button, { title: '刷新', type: 'text', shape: 'circle', onClick: reloadAndReset, icon: react_1.default.createElement(icons_1.ReloadOutlined, null) })),
        react_1.default.createElement("div", { className: c('__url') },
            react_1.default.createElement(antd_1.Input, { bordered: false, className: c('__input'), value: inputValue, onChange: (e) => setInputValue(e.target.value), onPressEnter: (evt) => {
                    const newUrl = evt.target.value.trim();
                    if (url() === newUrl) {
                        reload();
                    }
                    else {
                        setLocationAction({ action: 'PUSH', url: newUrl, outer: true });
                    }
                } }))));
});
LocationWidget.defaultProps = {};
exports.default = LocationWidget;
//# sourceMappingURL=index.js.map