"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 __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
require("../stylesheets/stories.scss");
require("../stylesheets/bbb/botbuilder.scss");
const React = __importStar(require("react"));
const classnames_1 = __importDefault(require("classnames"));
const botcard_1 = __importStar(require("../components/botcard"));
const header_1 = __importDefault(require("../components/header"));
const react_apollo_1 = require("react-apollo");
const graphql_tag_1 = __importDefault(require("graphql-tag"));
class BotBuilderClass extends React.Component {
    componentWillReceiveProps(nextProps) {
        if (this.props.location.key !== nextProps.location.key) {
            this.props.botsQuery.refetch();
        }
    }
    deleteBot(emoji_id) {
        return __awaiter(this, void 0, void 0, function* () {
            console.log('Deleting bot with emoji', emoji_id);
            yield this.props.deleteBot({ emoji_id });
            yield this.props.botsQuery.refetch();
        });
    }
    renderBot(bot, index) {
        return React.createElement(botcard_1.default, { bot: bot, key: index, deleteBot: () => this.deleteBot(bot.emoji_id) });
    }
    myBots() {
        const { botsQuery } = this.props;
        if (botsQuery.isLoading) {
            return null;
        }
        if (botsQuery.viewer && botsQuery.viewer.bots_created) {
            return this.props.botsQuery.viewer.bots_created;
        }
        else {
            return [];
        }
    }
    newBot(name) {
        return __awaiter(this, void 0, void 0, function* () {
            yield this.props.createBot({
                variables: { name }
            });
            yield this.props.botsQuery.refetch();
        });
    }
    render() {
        const { match } = this.props;
        const isLoading = !!this.props.botsQuery.loading;
        const myBots = this.myBots();
        const description = isLoading || !myBots ? 'Loading your bots' : `You have ${myBots.length} bots to play with.`;
        return (React.createElement("section", null,
            React.createElement(header_1.default, { name: "Your Bots", description: description }),
            React.createElement("div", { className: classnames_1.default('stories__list', {
                    'stories__list--cards': true
                }) },
                React.createElement(botcard_1.AddBot, { addBot: (name) => this.newBot(name), isCard: true, autoFocus: true }),
                myBots && myBots.map((bot, idx) => this.renderBot(bot, idx)))));
    }
}
exports.BotBuilderClass = BotBuilderClass;
const BotsQuery = graphql_tag_1.default `
	query BotsQuery {
		viewer {
			bots_created {
				emoji_id
				name
			}
		}
	}
`;
const NewBotMutation = graphql_tag_1.default `
	mutation createBot($name: String!) {
		createBot(name: $name) {
			emoji_id
			name
		}
	}
`;
const DeleteBotMutation = graphql_tag_1.default `
	mutation DeleteBot($emoji_id: String!) {
		deleteBot(emoji_id: $emoji_id) {
			name
		}
	}
`;
const wrapped = react_apollo_1.compose(react_apollo_1.graphql(BotsQuery, {
    name: 'botsQuery',
    options: {
        fetchPolicy: 'network-only'
    }
}), react_apollo_1.graphql(NewBotMutation, {
    name: 'createBot' // name of the injected prop: this.props.feedQuery...
}), react_apollo_1.graphql(DeleteBotMutation, {
    name: 'deleteBot'
}))(BotBuilderClass);
exports.default = wrapped;
//# sourceMappingURL=botbuilder.js.map