"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
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 mobx_1 = require("xmobx/mobx");
const mobx_react_1 = require("xmobx/mobx-react");
const ColorSwatchList_1 = require("presets/ColorSwatchList");
const deps_1 = require("../deps");
/**
 * @todo ui goes here
 */
let RadioOption = class RadioOption extends react_1.default.Component {
    /**
     * @todo ui goes here
     */
    constructor() {
        super(...arguments);
        this.renderItem = (item, index, ...remain) => {
            const { image, value } = item, props = __rest(item, ["image", "value"]);
            return react_1.default.createElement(ColorSwatchList_1.ColorSwatchItem, Object.assign({ key: item.label, value: image }, props));
        };
        this.handleOnChange = (event, item, state) => {
            deps_1.reusableOnChange({ event, item, state, props: this.props });
            // @todo isn't updating enough...
            this.forceUpdate();
        };
    }
    // @todo - didMount
    // @todo no need to do state here with new ColorSwatchlist from ui-component-library
    // state = new RadioGroupState()
    componentWillMount() {
        // console.event('props receive', this.props.list)
        // const removeDisabled = option => !option.isDisabled
        // const list = this.props.list.filter(removeDisabled).map(convertToOption)
        // this.state.updateFrom(list)
        // !!! TODO !!! THIS SHOULD BE OBSERVABLE FROM 1PRODUCT, OTHERWISE WE LOSE REFERENCE
        // we can observe(this.props.list) though
        const list = this.props.list.map(deps_1.convertToOption);
        this.list = mobx_1.observable(list);
    }
    get attributes() {
        // @note onClick isn't used
        return {
            list: this.list,
            renderItem: this.renderItem,
            // state: this.state,
            onChange: this.handleOnChange,
        };
    }
    render() {
        const { attributes } = this;
        return react_1.default.createElement(ColorSwatchList_1.ColorSwatchList, Object.assign({}, attributes));
    }
};
RadioOption.defaultProps = {
    onClick: deps_1.defaultOnClickAndOnChangeRadioOption,
    onChange: deps_1.defaultOnClickAndOnChangeRadioOption,
    // @todo EMPTY_LIST as long as we don't mutate
    list: [],
    type: '',
};
RadioOption = __decorate([
    mobx_react_1.observer
], RadioOption);
exports.default = RadioOption;
//# sourceMappingURL=RadioOption.js.map