define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/DocumentCard", "office-ui-fabric-react/lib/Image", "office-ui-fabric-react/lib/Persona", "office-ui-fabric-react/lib/Checkbox", "office-ui-fabric-react/lib/Pickers", "office-ui-fabric-react/lib/Styling"], function (require, exports, tslib_1, React, DocumentCard_1, Image_1, Persona_1, Checkbox_1, Pickers_1, Styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var rootClass = Styling_1.mergeStyles({
        maxWidth: 500
    });
    var baseProductionCdnUrl = 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/';
    var TestImages = {
        documentPreview: baseProductionCdnUrl + 'document-preview.png',
        documentPreviewTwo: baseProductionCdnUrl + 'document-preview2.png',
        documentPreviewThree: baseProductionCdnUrl + 'document-preview3.png',
        iconPpt: baseProductionCdnUrl + 'icon-ppt.png',
        personaFemale: baseProductionCdnUrl + 'persona-female.png'
    };
    var data = [
        {
            documentPreviewProps: {
                previewImages: [
                    {
                        previewImageSrc: TestImages.documentPreview,
                        iconSrc: TestImages.iconPpt,
                        imageFit: Image_1.ImageFit.cover,
                        width: 318,
                        height: 196,
                        accentColor: '#ce4b1f'
                    }
                ]
            },
            documentCardProps: {},
            documentActionsProps: {
                actions: [
                    {
                        iconProps: { iconName: 'Share' },
                        onClick: function (ev) {
                            console.log('You clicked the share action.');
                            ev.preventDefault();
                            ev.stopPropagation();
                        }
                    },
                    {
                        iconProps: { iconName: 'Pin' },
                        onClick: function (ev) {
                            console.log('You clicked the pin action.');
                            ev.preventDefault();
                            ev.stopPropagation();
                        }
                    },
                    {
                        iconProps: { iconName: 'Ringer' },
                        onClick: function (ev) {
                            console.log('You clicked the Ringer action.');
                            ev.preventDefault();
                            ev.stopPropagation();
                        }
                    }
                ]
            },
            documentActivityProps: {
                activity: 'Created Feb 23, 2016',
                people: [
                    { name: 'Kat Larrson', profileImageSrc: TestImages.personaFemale },
                    { name: 'Josh Hancock', profileImageSrc: '', initials: 'JH' },
                    { name: 'Tina Dasani', profileImageSrc: TestImages.personaFemale }
                ]
            },
            documentTitleProps: {
                title: 'Document1',
                shouldTruncate: true
            }
        },
        {
            documentPreviewProps: {
                previewImages: [
                    {
                        previewImageSrc: TestImages.documentPreview,
                        iconSrc: TestImages.iconPpt,
                        imageFit: Image_1.ImageFit.cover,
                        width: 318,
                        height: 196,
                        accentColor: '#ce4b1f'
                    }
                ]
            },
            documentCardProps: {},
            documentActionsProps: {
                actions: [
                    {
                        iconProps: { iconName: 'Share' },
                        onClick: function (ev) {
                            console.log('You clicked the share action.');
                            ev.preventDefault();
                            ev.stopPropagation();
                        }
                    },
                    {
                        iconProps: { iconName: 'Pin' },
                        onClick: function (ev) {
                            console.log('You clicked the pin action.');
                            ev.preventDefault();
                            ev.stopPropagation();
                        }
                    },
                    {
                        iconProps: { iconName: 'Ringer' },
                        onClick: function (ev) {
                            console.log('You clicked the Ringer action.');
                            ev.preventDefault();
                            ev.stopPropagation();
                        }
                    }
                ]
            },
            documentActivityProps: {
                activity: 'Created Feb 23, 2016',
                people: [
                    { name: 'Kat Larrson', profileImageSrc: TestImages.personaFemale },
                    { name: 'Josh Hancock', profileImageSrc: '', initials: 'JH' },
                    { name: 'Tina Dasani', profileImageSrc: TestImages.personaFemale }
                ]
            },
            documentTitleProps: {
                title: 'Document2',
                shouldTruncate: true
            }
        },
        {
            documentPreviewProps: {
                previewImages: [
                    {
                        previewImageSrc: TestImages.documentPreviewTwo,
                        iconSrc: TestImages.iconPpt,
                        imageFit: Image_1.ImageFit.cover,
                        width: 318,
                        height: 196,
                        accentColor: '#ce4b1f'
                    }
                ]
            },
            documentCardProps: {},
            documentActionsProps: {
                actions: [
                    {
                        iconProps: { iconName: 'Share' },
                        onClick: function (ev) {
                            console.log('You clicked the share action.');
                            ev.preventDefault();
                            ev.stopPropagation();
                        }
                    },
                    {
                        iconProps: { iconName: 'Pin' },
                        onClick: function (ev) {
                            console.log('You clicked the pin action.');
                            ev.preventDefault();
                            ev.stopPropagation();
                        }
                    },
                    {
                        iconProps: { iconName: 'Ringer' },
                        onClick: function (ev) {
                            console.log('You clicked the Ringer action.');
                            ev.preventDefault();
                            ev.stopPropagation();
                        }
                    }
                ]
            },
            documentActivityProps: {
                activity: 'Created Feb 23, 2016',
                people: [
                    { name: 'Kat Larrson', profileImageSrc: TestImages.personaFemale },
                    { name: 'Josh Hancock', profileImageSrc: '', initials: 'JH' },
                    { name: 'Tina Dasani', profileImageSrc: TestImages.personaFemale }
                ]
            },
            documentTitleProps: {
                title: 'Document3',
                shouldTruncate: true
            }
        },
        {
            documentPreviewProps: {
                previewImages: [
                    {
                        previewImageSrc: TestImages.documentPreviewThree,
                        iconSrc: TestImages.iconPpt,
                        imageFit: Image_1.ImageFit.cover,
                        width: 318,
                        height: 196,
                        accentColor: '#ce4b1f'
                    }
                ]
            },
            documentCardProps: {},
            documentActionsProps: {
                actions: [
                    {
                        iconProps: { iconName: 'Share' },
                        onClick: function (ev) {
                            console.log('You clicked the share action.');
                            ev.preventDefault();
                            ev.stopPropagation();
                        }
                    },
                    {
                        iconProps: { iconName: 'Pin' },
                        onClick: function (ev) {
                            console.log('You clicked the pin action.');
                            ev.preventDefault();
                            ev.stopPropagation();
                        }
                    },
                    {
                        iconProps: { iconName: 'Ringer' },
                        onClick: function (ev) {
                            console.log('You clicked the Ringer action.');
                            ev.preventDefault();
                            ev.stopPropagation();
                        }
                    }
                ]
            },
            documentActivityProps: {
                activity: 'Created Feb 23, 2016',
                people: [
                    { name: 'Kat Larrson', profileImageSrc: TestImages.personaFemale },
                    { name: 'Josh Hancock', profileImageSrc: '', initials: 'JH' },
                    { name: 'Tina Dasani', profileImageSrc: TestImages.personaFemale }
                ]
            },
            documentTitleProps: {
                title: 'Document4',
                shouldTruncate: true
            }
        }
    ];
    var SuggestedBigItem = function (documentProps, itemProps) {
        var documentPreviewProps = documentProps.documentPreviewProps, documentTitleProps = documentProps.documentTitleProps;
        return (React.createElement(Persona_1.Persona, { imageUrl: documentPreviewProps && documentPreviewProps.previewImages[0].previewImageSrc, text: documentTitleProps && documentTitleProps.title, size: Persona_1.PersonaSize.size40 }));
    };
    var SelectedDocumentItem = function (documentProps) {
        var _a = documentProps.item, documentActionsProps = _a.documentActionsProps, documentPreviewProps = _a.documentPreviewProps, documentActivityProps = _a.documentActivityProps, documentTitleProps = _a.documentTitleProps;
        var actions = [];
        if (documentActionsProps) {
            documentActionsProps.actions.forEach(function (action) { return actions.push(action); });
            actions.push({
                iconProps: { iconName: 'Cancel' },
                onClick: function (ev) {
                    if (documentProps.onRemoveItem) {
                        documentProps.onRemoveItem();
                    }
                }
            });
        }
        var log = function (text) { return function () { return console.log(text); }; };
        return (React.createElement(DocumentCard_1.DocumentCard, { onClick: log('You clicked the card.') },
            React.createElement(DocumentCard_1.DocumentCardPreview, tslib_1.__assign({}, documentPreviewProps)),
            React.createElement(DocumentCard_1.DocumentCardLocation, { location: "Marketing Documents", locationHref: "http://microsoft.com", ariaLabel: "Location, Marketing Documents" }),
            React.createElement(DocumentCard_1.DocumentCardTitle, tslib_1.__assign({}, documentTitleProps)),
            React.createElement(DocumentCard_1.DocumentCardActivity, tslib_1.__assign({}, documentActivityProps)),
            React.createElement(DocumentCard_1.DocumentCardActions, { actions: actions })));
    };
    var DocumentPicker = /** @class */ (function (_super) {
        tslib_1.__extends(DocumentPicker, _super);
        function DocumentPicker() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        return DocumentPicker;
    }(Pickers_1.BasePickerListBelow));
    var PickerCustomResultExample = /** @class */ (function (_super) {
        tslib_1.__extends(PickerCustomResultExample, _super);
        function PickerCustomResultExample(props) {
            var _this = _super.call(this, props) || this;
            _this._onDisabledButtonClick = function () {
                _this.setState({
                    isPickerDisabled: !_this.state.isPickerDisabled
                });
            };
            _this._onFilterChanged = _this._onFilterChanged.bind(_this);
            _this.state = {
                isPickerDisabled: false
            };
            return _this;
        }
        PickerCustomResultExample.prototype.render = function () {
            return (React.createElement("div", { className: rootClass },
                React.createElement(Checkbox_1.Checkbox, { styles: { root: { margin: '10px 0' } }, label: "Disable Document Picker", checked: this.state.isPickerDisabled, onChange: this._onDisabledButtonClick }),
                React.createElement(DocumentPicker, { onRenderSuggestionsItem: SuggestedBigItem, onResolveSuggestions: this._onFilterChanged, onRenderItem: SelectedDocumentItem, getTextFromItem: this._getTextFromItem, pickerSuggestionsProps: {
                        suggestionsHeaderText: 'Suggested Documents',
                        noResultsFoundText: 'No Documents Found'
                    }, disabled: this.state.isPickerDisabled, inputProps: {
                        onFocus: function () { return console.log('onFocus called'); },
                        onBlur: function () { return console.log('onBlur called'); },
                        'aria-label': 'Document Picker'
                    } })));
        };
        PickerCustomResultExample.prototype._getTextFromItem = function (props) {
            return props.documentTitleProps.title;
        };
        PickerCustomResultExample.prototype._onFilterChanged = function (filterText, items) {
            var _this = this;
            return filterText
                ? data
                    .filter(function (item) { return item.documentTitleProps && item.documentTitleProps.title.toLowerCase().indexOf(filterText.toLowerCase()) === 0; })
                    .filter(function (item) { return !_this._listContainsDocument(item, items); })
                : [];
        };
        PickerCustomResultExample.prototype._listContainsDocument = function (document, items) {
            if (!items || !items.length || items.length === 0) {
                return false;
            }
            var documentTitle = document.documentTitleProps && document.documentTitleProps.title;
            return items.filter(function (item) { return (item.documentTitleProps && item.documentTitleProps.title) === documentTitle; }).length > 0;
        };
        return PickerCustomResultExample;
    }(React.Component));
    exports.PickerCustomResultExample = PickerCustomResultExample;
});
//# sourceMappingURL=Picker.CustomResult.Example.js.map