var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
define(["require", "exports", 'react', '../../../../utilities/css', '../../../../index', './ContextualMenuExample.scss'], function (require, exports, React, css_1, index_1) {
    "use strict";
    var ContextualMenuCustomizationExample = (function (_super) {
        __extends(ContextualMenuCustomizationExample, _super);
        function ContextualMenuCustomizationExample() {
            _super.call(this);
            this._onClick = this._onClick.bind(this);
            this._onDismiss = this._onDismiss.bind(this);
            this.state = {
                selection: {},
                isContextMenuVisible: false
            };
        }
        ContextualMenuCustomizationExample.prototype.render = function () {
            return (React.createElement("div", null, React.createElement(index_1.Button, {onClick: this._onClick}, " Click for ContextualMenu "), this.state.isContextMenuVisible ? (React.createElement(index_1.ContextualMenu, {targetPoint: this.state.target, useTargetPoint: true, shouldFocusOnMount: false, onDismiss: this._onDismiss, directionalHint: index_1.DirectionalHint.bottomLeftEdge, items: [
                {
                    key: 'newItem',
                    icon: 'circlePlus',
                    items: [
                        {
                            key: 'emailMessage',
                            name: 'Email message',
                        },
                        {
                            key: 'calendarEvent',
                            name: 'Calendar event',
                        }
                    ],
                    name: 'New'
                },
                {
                    key: 'upload',
                    icon: 'upload',
                    name: 'Upload'
                },
                {
                    key: 'divider_1',
                    name: '-',
                },
                {
                    key: 'charm',
                    name: 'Charm',
                    className: 'Charm-List',
                    items: [
                        {
                            key: 'none',
                            name: 'None'
                        },
                        {
                            key: 'cat',
                            name: 'cat',
                            onRender: this._renderCharmMenuItem,
                            className: 'ms-ContextualMenu-customizationExample-item'
                        },
                        {
                            key: 'dog',
                            name: 'dog',
                            onRender: this._renderCharmMenuItem,
                            className: 'ms-ContextualMenu-customizationExample-item'
                        },
                        {
                            key: 'plane',
                            name: 'plane',
                            onRender: this._renderCharmMenuItem,
                            className: 'ms-ContextualMenu-customizationExample-item'
                        },
                        {
                            key: 'page',
                            name: 'page',
                            onRender: this._renderCharmMenuItem,
                            className: 'ms-ContextualMenu-customizationExample-item'
                        },
                        {
                            key: 'firstAid',
                            name: 'firstAid',
                            onRender: this._renderCharmMenuItem,
                            className: 'ms-ContextualMenu-customizationExample-item'
                        },
                        {
                            key: 'trophy',
                            name: 'trophy',
                            onRender: this._renderCharmMenuItem,
                            className: 'ms-ContextualMenu-customizationExample-item'
                        },
                        {
                            key: 'home',
                            name: 'home',
                            onRender: this._renderCharmMenuItem,
                            className: 'ms-ContextualMenu-customizationExample-item'
                        },
                        {
                            key: 'pill',
                            name: 'pill',
                            onRender: this._renderCharmMenuItem,
                            className: 'ms-ContextualMenu-customizationExample-item'
                        },
                        {
                            key: 'briefcase',
                            name: 'briefcase',
                            onRender: this._renderCharmMenuItem,
                            className: 'ms-ContextualMenu-customizationExample-item'
                        },
                        {
                            key: 'coffee',
                            name: 'coffee',
                            onRender: this._renderCharmMenuItem,
                            className: 'ms-ContextualMenu-customizationExample-item'
                        },
                        {
                            key: 'people',
                            name: 'people',
                            onRender: this._renderCharmMenuItem,
                            className: 'ms-ContextualMenu-customizationExample-item'
                        },
                        {
                            key: 'stopwatch',
                            name: 'stopwatch',
                            onRender: this._renderCharmMenuItem,
                            className: 'ms-ContextualMenu-customizationExample-item'
                        },
                        {
                            key: 'music',
                            name: 'music',
                            onRender: this._renderCharmMenuItem,
                            className: 'ms-ContextualMenu-customizationExample-item'
                        },
                        {
                            key: 'bag',
                            name: 'bag',
                            onRender: this._renderCharmMenuItem,
                            className: 'ms-ContextualMenu-customizationExample-item'
                        }
                    ]
                },
                {
                    key: 'categories',
                    name: 'Categorize',
                    items: [
                        {
                            key: 'categories',
                            name: 'categories',
                            categoryList: [
                                {
                                    name: 'Personal',
                                    color: 'yellow'
                                },
                                {
                                    name: 'Work',
                                    color: 'green'
                                },
                                {
                                    name: 'Birthday',
                                    color: 'blue'
                                },
                                {
                                    name: 'Spam',
                                    color: 'grey'
                                },
                                {
                                    name: 'Urgent',
                                    color: 'red'
                                },
                                {
                                    name: 'Hobbies',
                                    color: 'black'
                                },
                            ],
                            onRender: this._renderCategoriesList
                        },
                        {
                            key: 'divider_1',
                            name: '-',
                        },
                        {
                            key: 'clear',
                            name: 'Clear categories'
                        },
                        {
                            key: 'manage',
                            name: 'Manage categories'
                        }
                    ]
                }
            ]})) : null));
        };
        ContextualMenuCustomizationExample.prototype._renderCharmMenuItem = function (item) {
            return React.createElement("i", {className: css_1.css('ms-Icon', 'ms-ContextualMenu-customizationExample-icon', 'ms-Icon--' + item.name)});
        };
        ContextualMenuCustomizationExample.prototype._renderCategoriesList = function (item) {
            return (React.createElement("ul", {className: 'ms-ContextualMenu-customizationExample-categoriesList'}, React.createElement("li", {className: 'ms-ContextualMenu-item'}, item.categoryList.map(function (category) {
                return React.createElement("button", {className: 'ms-ContextualMenu-link', role: 'menuitem'}, React.createElement("div", null, React.createElement("span", {className: 'ms-ContextualMenu-icon ms-ContextualMenu-customizationExample-categorySwatch', style: { backgroundColor: category.color }}), React.createElement("span", {className: 'ms-ContextualMenu-itemText ms-font-m ms-font-weight-regular'}, category.name)));
            }))));
        };
        ContextualMenuCustomizationExample.prototype._onClick = function (event) {
            this.setState({ target: { x: event.clientX, y: event.clientY }, isContextMenuVisible: true });
        };
        ContextualMenuCustomizationExample.prototype._onDismiss = function (event) {
            this.setState({ isContextMenuVisible: false });
        };
        return ContextualMenuCustomizationExample;
    }(React.Component));
    exports.ContextualMenuCustomizationExample = ContextualMenuCustomizationExample;
});
