"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
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"));
require("whatwg-fetch");
const lodash_1 = __importDefault(require("lodash"));
const react_2 = require("@storybook/react");
const addon_info_1 = require("@storybook/addon-info");
const index_1 = __importDefault(require("./index"));
class Search extends react_1.default.Component {
    constructor() {
        super(...arguments);
        this.state = {
            loading: false,
            items: [],
            selectedItem: null,
            data: [],
        };
        this._fetchRepo = lodash_1.default.debounce((val) => __awaiter(this, void 0, void 0, function* () {
            this.setState({ loading: true });
            try {
                let res = yield fetch(`https://api.github.com/search/repositories?q=${val}`);
                let json = yield res.json();
                this.setState({
                    items: json.items.map(item => (Object.assign({ label: item.html_url }, item))),
                });
                this.setState({ data: json.items });
            }
            catch (e) {
                console.error(e);
            }
            finally {
                this.setState({ loading: false });
            }
        }), 300);
        this._handleItemClick = (item) => __awaiter(this, void 0, void 0, function* () {
            const selectedItem = lodash_1.default.find(this.state.data, { html_url: item.label });
            this.setState({ selectedItem });
        });
    }
    render() {
        return (react_1.default.createElement("div", null,
            react_1.default.createElement(index_1.default, { placeholder: 'Search github repositories', showClearIcon: false, onSearch: this._fetchRepo, onInputChange: this._fetchRepo, onItemClick: this._handleItemClick, searchLoading: this.state.loading, items: this.state.items, labelKey: this.props.labelKey, renderItem: this.props.renderItem }),
            this.state.selectedItem && (react_1.default.createElement("pre", { id: "content" }, JSON.stringify(this.state.selectedItem, null, 2)))));
    }
}
react_2.storiesOf('SearchInput', module).add('Default', addon_info_1.withInfo('Default')(() => (react_1.default.createElement("div", { style: { margin: 10 } },
    react_1.default.createElement("h4", null, "Default"),
    react_1.default.createElement(Search, null),
    react_1.default.createElement("h4", null, "Custom Label key"),
    react_1.default.createElement(Search, { labelKey: "full_name" }),
    react_1.default.createElement("h4", null, "Custom Render Item"),
    react_1.default.createElement(Search, { labelKey: "full_name", renderItem: item => (react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
            react_1.default.createElement("img", { style: {
                    width: 30,
                    height: 30,
                    borderRadius: '50%',
                    marginRight: 10,
                }, src: item.owner.avatar_url }),
            react_1.default.createElement("div", null, item.full_name))) })))));
//# sourceMappingURL=index.story.js.map