import React from 'react';
import p from 'prefix-classname';
import { Button, Input } from 'antd';
import { ArrowLeftOutlined, ArrowRightOutlined, ReloadOutlined } from '@ant-design/icons';
import { CLS_PREFIX, useLocationAction } from '../../../config/const';
import './style.scss';
const cn = p('');
const c = p(`${CLS_PREFIX}-location-widget`);
const useForceUpdate = () => {
    const [v, setV] = React.useState(0);
    const update = React.useCallback(() => {
        setV((x) => x + 1);
    }, [setV]);
    return [update, v];
};
const LocationWidget = React.memo(({ className, iframeRef }) => {
    const [action, setLocationAction] = useLocationAction();
    const [update] = useForceUpdate();
    const historyRef = React.useRef({ urls: [], index: -1 });
    React.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.useState(url());
    React.useLayoutEffect(() => {
        setInputValue(url());
    }, [url()]);
    return (React.createElement("div", { className: cn(c(), className) },
        React.createElement("div", { className: c('__btns') },
            React.createElement(Button, { title: '后退', type: 'text', shape: 'circle', disabled: !canBack(), onClick: back, icon: React.createElement(ArrowLeftOutlined, null) }),
            React.createElement(Button, { title: '前进', type: 'text', shape: 'circle', disabled: !canForward(), onClick: forward, icon: React.createElement(ArrowRightOutlined, null) }),
            React.createElement(Button, { title: '刷新', type: 'text', shape: 'circle', onClick: reloadAndReset, icon: React.createElement(ReloadOutlined, null) })),
        React.createElement("div", { className: c('__url') },
            React.createElement(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 = {};
export default LocationWidget;
//# sourceMappingURL=index.js.map