'use strict';

function MySelect(props) {
    const [selectValue, setSelectValue] = React.useState(props.initialValue);

    // push browser history
    React.useEffect(() => {
        console.log("pushState: "+selectValue);
        history.pushState({"a":selectValue, "b": 2}, "", "?a="+selectValue+"&b=2");
    }, [selectValue]);


    // subscribe to popstate
    React.useEffect(() => {
        const handlePopState = () => {
            console.log("handlePopState, history.state.a: "+history.state.a);
            setSelectValue(history.state.a);
        }
        window.addEventListener("popstate", handlePopState);
        return () => {
            window.removeEventListener("popstate", handlePopState);
        }

    });

    function handleSelectChange(event) {
        setSelectValue(event.target.value);
    }

    return (
        <React.Fragment>
      <select value={selectValue} onChange={handleSelectChange}>
        {
            props.options.map((option) => (
            <option key={option.value} value={option.value}>{option.display}</option>
         ))
        }
      </select>
      <br/>
      select value is: {selectValue}
        </React.Fragment>
    );
}


const domContainer = document.querySelector('#MySelect');
const options = window._selectOptions;
const initialValue = window._selectInitialValue;
ReactDOM.render(<MySelect options={options} initialValue={initialValue}/>, domContainer);