define(["require", "exports", "tslib", "react", "@fluentui/react/lib/DocumentCard", "@fluentui/react/lib/Image", "@fluentui/react/lib/Persona", "@fluentui/react/lib/Toggle", "@fluentui/react/lib/Pickers", "@fluentui/react/lib/Styling", "@fluentui/react-hooks"], function (require, exports, tslib_1, React, DocumentCard_1, Image_1, Persona_1, Toggle_1, Pickers_1, Styling_1, react_hooks_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.PickerCustomResultExample = void 0;
    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 toggleStyles = { root: { margin: '10px 0' } };
    var inputProps = {
        onFocus: function () { return console.log('onFocus called'); },
        onBlur: function () { return console.log('onBlur called'); },
        'aria-label': 'Document picker',
    };
    var pickerSuggestionsProps = {
        suggestionsHeaderText: 'Suggested documents',
        noResultsFoundText: 'No documents found',
    };
    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: 'https://static2.sharepointonline.com/files/fabric/assets/item-types/32/pptx.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 === null || documentPreviewProps === void 0 ? void 0 : documentPreviewProps.previewImages[0].previewImageSrc, text: documentTitleProps && documentTitleProps.title, size: Persona_1.PersonaSize.size40 }));
    };
    var log = function (text) { return function () { return console.log(text); }; };
    var SelectedDocumentItem = function (documentProps) {
        var _a = documentProps.item, documentActionsProps = _a.documentActionsProps, documentPreviewProps = _a.documentPreviewProps, documentActivityProps = _a.documentActivityProps, documentTitleProps = _a.documentTitleProps;
        var actions = documentActionsProps
            ? tslib_1.__spreadArrays(documentActionsProps.actions, [
                {
                    iconProps: { iconName: 'Cancel' },
                    onClick: function (ev) {
                        if (documentProps.onRemoveItem) {
                            documentProps.onRemoveItem();
                        }
                    },
                },
            ]) : [];
        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 getTextFromItem = function (props) {
        return props.documentTitleProps.title;
    };
    var listContainsDocument = function (document, items) {
        if (!items || !items.length || items.length === 0) {
            return false;
        }
        var documentTitle = document.documentTitleProps && document.documentTitleProps.title;
        return items.some(function (item) { return (item.documentTitleProps && item.documentTitleProps.title) === documentTitle; });
    };
    var onFilterChanged = function (filterText, items) {
        if (!items) {
            return [];
        }
        return filterText
            ? data
                .filter(function (item) {
                return item.documentTitleProps &&
                    item.documentTitleProps.title.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
            })
                .filter(function (item) { return !listContainsDocument(item, items); })
            : [];
    };
    var PickerCustomResultExample = function () {
        var _a = react_hooks_1.useBoolean(false), isPickerDisabled = _a[0], toggleIsPickerDisabled = _a[1].toggle;
        return (React.createElement("div", { className: rootClass },
            React.createElement(Toggle_1.Toggle, { styles: toggleStyles, label: "Disable document picker", checked: isPickerDisabled, onChange: toggleIsPickerDisabled }),
            React.createElement(DocumentPicker, { removeButtonAriaLabel: "Remove", onRenderSuggestionsItem: SuggestedBigItem, onResolveSuggestions: onFilterChanged, onRenderItem: SelectedDocumentItem, getTextFromItem: getTextFromItem, pickerSuggestionsProps: pickerSuggestionsProps, selectionAriaLabel: "Selected documents", selectionRole: "group", disabled: isPickerDisabled, inputProps: inputProps })));
    };
    exports.PickerCustomResultExample = PickerCustomResultExample;
});
//# sourceMappingURL=Picker.CustomResult.Example.js.map