import { __assign, __extends, __spreadArrays } from "tslib";
import * as React from 'react';
import { DocumentCard, DocumentCardActions, DocumentCardActivity, DocumentCardLocation, DocumentCardPreview, DocumentCardTitle, } from '@fluentui/react/lib/DocumentCard';
import { ImageFit } from '@fluentui/react/lib/Image';
import { Persona, PersonaSize } from '@fluentui/react/lib/Persona';
import { Toggle } from '@fluentui/react/lib/Toggle';
import { BasePickerListBelow, } from '@fluentui/react/lib/Pickers';
import { mergeStyles } from '@fluentui/react/lib/Styling';
import { useBoolean } from '@fluentui/react-hooks';
var DocumentPicker = /** @class */ (function (_super) {
    __extends(DocumentPicker, _super);
    function DocumentPicker() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return DocumentPicker;
}(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 = 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: 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: 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: 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: 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, { imageUrl: documentPreviewProps === null || documentPreviewProps === void 0 ? void 0 : documentPreviewProps.previewImages[0].previewImageSrc, text: documentTitleProps && documentTitleProps.title, size: 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
        ? __spreadArrays(documentActionsProps.actions, [
            {
                iconProps: { iconName: 'Cancel' },
                onClick: function (ev) {
                    if (documentProps.onRemoveItem) {
                        documentProps.onRemoveItem();
                    }
                },
            },
        ]) : [];
    return (React.createElement(DocumentCard, { onClick: log('You clicked the card.') },
        React.createElement(DocumentCardPreview, __assign({}, documentPreviewProps)),
        React.createElement(DocumentCardLocation, { location: "Marketing Documents", locationHref: "http://microsoft.com", ariaLabel: "Location, Marketing Documents" }),
        React.createElement(DocumentCardTitle, __assign({}, documentTitleProps)),
        React.createElement(DocumentCardActivity, __assign({}, documentActivityProps)),
        React.createElement(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); })
        : [];
};
export var PickerCustomResultExample = function () {
    var _a = useBoolean(false), isPickerDisabled = _a[0], toggleIsPickerDisabled = _a[1].toggle;
    return (React.createElement("div", { className: rootClass },
        React.createElement(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 })));
};
//# sourceMappingURL=Picker.CustomResult.Example.js.map