import { __extends } from "tslib";
import * as React from 'react';
import { FocusZone, Text } from 'office-ui-fabric-react';
import { CollapsibleSection } from '@uifabric/experiments/lib/CollapsibleSection';
import { lorem } from '@uifabric/example-data';
var _folderItems = [];
var _fileItems = [];
var fileIcons = [
    { name: 'accdb' },
    { name: 'audio' },
    { name: 'code' },
    { name: 'csv' },
    { name: 'docx' },
    { name: 'dotx' },
    { name: 'mpt' },
    { name: 'model' },
    { name: 'one' },
    { name: 'onetoc' },
    { name: 'pdf' },
    { name: 'photo' },
    { name: 'pptx' },
    { name: 'presentation' },
    { name: 'potx' },
    { name: 'pub' },
    { name: 'rtf' },
    { name: 'spreadsheet' },
    { name: 'txt' },
    { name: 'vector' },
    { name: 'vsdx' },
    { name: 'xlsx' },
    { name: 'xltx' },
    { name: 'xsn' },
];
var ExampleFile = function (props) {
    return (React.createElement("div", { "data-is-focusable": "true", style: { display: 'flex', alignItems: 'center', height: 24, paddingLeft: 4 + props.indent * 18 } },
        React.createElement("img", { src: props.iconSource, style: { maxWidth: 16, padding: 6 } }),
        React.createElement(Text, { variant: "small" }, props.filename)));
};
/**
 * Example recursive folder structure with a random number of subfolders and items.
 */
var CollapsibleSectionFolder = /** @class */ (function (_super) {
    __extends(CollapsibleSectionFolder, _super);
    function CollapsibleSectionFolder(props) {
        var _this = _super.call(this, props) || this;
        _this._folders = [];
        _this._files = [];
        // Generate random folders
        // Generate random files
        var randomFileCount = Math.floor(Math.random() * 10) + 1;
        for (var i = 0; i < randomFileCount; i++) {
            var randomFile = Math.floor(Math.random() * _fileItems.length);
            _this._files.push(React.createElement(ExampleFile, { indent: (props.indent || 0) + 1, key: i, iconSource: _fileItems[randomFile].iconName, filename: _fileItems[randomFile].name }));
        }
        var randomFolderCount = Math.floor(Math.random() * 10) + 5;
        for (var i = 0; i < randomFolderCount; i++) {
            var randomFolder = Math.floor(Math.random() * _folderItems.length);
            _this._folders.push(React.createElement(CollapsibleSection, { key: i, defaultCollapsed: true, title: _folderItems[randomFolder], indent: _this.props.indent },
                React.createElement(CollapsibleSectionFolder, { indent: (_this.props.indent || 0) + 1 }),
                _this._files));
        }
        return _this;
    }
    CollapsibleSectionFolder.prototype.render = function () {
        return React.createElement("div", null, this._folders);
    };
    return CollapsibleSectionFolder;
}(React.Component));
var CollapsibleSectionRecursiveExample = /** @class */ (function (_super) {
    __extends(CollapsibleSectionRecursiveExample, _super);
    function CollapsibleSectionRecursiveExample(props) {
        var _this = _super.call(this, props) || this;
        //  Populate with items for demo.
        if (_fileItems.length === 0) {
            for (var i = 0; i < 500; i++) {
                var randomFolderName = lorem(2).replace(/\W/g, '');
                randomFolderName = randomFolderName.charAt(0).toUpperCase() + randomFolderName.slice(1);
                _folderItems.push(randomFolderName);
                var randomFileType = _this._randomFileIcon();
                var randomFileName = lorem(2).replace(/\W/g, '');
                randomFileName =
                    randomFileName.charAt(0).toUpperCase() + randomFileName.slice(1).concat("." + randomFileType.docType);
                _fileItems.push({ name: randomFileName, iconName: randomFileType.url });
            }
        }
        return _this;
    }
    CollapsibleSectionRecursiveExample.prototype.render = function () {
        return (React.createElement("div", null,
            React.createElement(FocusZone, null,
                React.createElement(CollapsibleSectionFolder, { indent: 0 }))));
    };
    CollapsibleSectionRecursiveExample.prototype._randomFileIcon = function () {
        var docType = fileIcons[Math.floor(Math.random() * fileIcons.length) + 0].name;
        return {
            docType: docType,
            url: "https://static2.sharepointonline.com/files/fabric/assets/item-types/16/" + docType + ".svg",
        };
    };
    return CollapsibleSectionRecursiveExample;
}(React.Component));
export { CollapsibleSectionRecursiveExample };
//# sourceMappingURL=CollapsibleSection.Recursive.Example.js.map