import * as tslib_1 from "tslib";
import * as React from 'react';
import { isNotEmptyArray } from 'exotic';
import { observer } from 'xmobx/mobx-react';
import { locationContainerLite } from '@skava/packages/core/location';
import { StyledRadioGroup } from './styled';
/**
 * @todo @@packages !!! INSTEAD OF THIS, USE PROPS TO PASS ITEM ID AND RENDER MULTIPLE SHIPPING METHOD VIEWS
 */
import { shippingMethodContainer } from './state';
/**
 * @todo @@packages
 * @description same as pdp, this is simpler when we are just using graphql data
 * @note we could also use RadioGroupPlugin
 */
class RadioGroupLite extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.handleChange = (event) => {
            const selectedValue = event.target.value;
            const foundOptionItem = this.props.list.find(item => item.label === selectedValue);
            this.props.onChange(foundOptionItem);
        };
    }
    render() {
        return (React.createElement("select", { onChange: this.handleChange, role: "listbox", "aria-label": "Select shipping method" }, this.props.list.map(item => {
            return (React.createElement("option", { key: item.identifier, selected: item.isSelected, value: item.label, role: "option" },
                item.label,
                " | ",
                item.priceValue,
                " | ",
                item.deliveryTimePretty));
        })));
    }
}
let ShippingMethodsRadioGroup = class ShippingMethodsRadioGroup extends React.Component {
    render() {
        return (isNotEmptyArray(this.props.list) && (React.createElement(StyledRadioGroup, null,
            React.createElement(RadioGroupLite, { list: this.props.list, onChange: this.props.onChange }))));
    }
};
ShippingMethodsRadioGroup = tslib_1.__decorate([
    observer
], ShippingMethodsRadioGroup);
/**
 * @todo @@packages
 *  - intersection observer
 *  - pass in prop for onChange?
 */
let ShippingMethodsView = class ShippingMethodsView extends React.Component {
    /**
     * @todo @@packages
     *  - intersection observer
     *  - pass in prop for onChange?
     */
    constructor() {
        super(...arguments);
        // @@packages removed this
        // stepperContainer.handleShippingMethodChange(selectedShippingMethodItem.name)
        this.onChange = (selectedShippingMethodItem) => {
            shippingMethodContainer.selectShippingMethod({
                shippingMethodItemId: selectedShippingMethodItem.identifier,
            });
        };
    }
    componentDidMount() {
        locationContainerLite.loadGoogleAndFetchZipCodeAndGeoCode();
        shippingMethodContainer.fetchShippingMethods();
    }
    render() {
        if (shippingMethodContainer.shippingMethodsList.length === 0) {
            //  Shipping Methods
            return 'Loading...';
        }
        else {
            return (React.createElement(ShippingMethodsRadioGroup, { key: "ShippingMethods", onChange: this.onChange, list: shippingMethodContainer.shippingMethodsList }));
        }
    }
};
ShippingMethodsView = tslib_1.__decorate([
    observer
], ShippingMethodsView);
export default ShippingMethodsView;
export { ShippingMethodsView };
//# sourceMappingURL=ShippingMethodsView.js.map