/*
url : https://promosis.github.io/file-upload-with-preview/
git : https://github.com/promosis/file-upload-with-preview/

how to use

1. insert
	<script src="<?=$this->request->systemUrl?>/modules/ptycommon/resources/file-upload-with-preview.js"></script>
	<link rel="stylesheet" type="text/css" href="/pc/resource/css/file-upload-with-preview.css?<?= time(); ?>">

2. insert
<div class="custom-file-container" data-upload-id="myUniqueUploadId">
    <div class="labelcopy3">
        * 최대 5개까지 등록이 가능합니다.
    </div>
    <label style="display: none;"><a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image">&times;</a></label>

    <label class="custom-file-container__custom-file">
        <input type="file" class="custom-file-container__custom-file__custom-file-input" accept="*" multiple>
        <input type="hidden" name="MAX_FILE_SIZE" value="104857600"/>
        <span class="custom-file-container__custom-file__custom-file-control"></span>
    </label>
    <div class="custom-file-container__image-preview"></div>
</div>
<script>
    var upload = new FileUploadWithPreview('myUniqueUploadId');
    window.addEventListener('fileUploadWithPreview:imageSelected', function (e) {
        if (e.detail.uploadId === 'myUniqueUploadId') {
            if (e.detail.selectedFilesCount > 5) {
                alert("5개까지만 등록이 가능합니다");
            }
            console.log(e.detail.cachedFileArray)
            console.log(e.detail.selectedFilesCount)
        }
    })
</script>

*/

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
        typeof define === 'function' && define.amd ? define(factory) :
            (global.FileUploadWithPreview = factory());
}(this, (function () { 'use strict';

    var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

    function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

    var FileUploadWithPreview = function () {
        function FileUploadWithPreview(uploadId, options) {
            _classCallCheck(this, FileUploadWithPreview);

            // Make sure uploadId was specified
            if (!uploadId) {
                throw new Error('No uploadId found. You must initialize file-upload-with-preview with a unique uploadId.');
            }

            // Set initial variables
            this.uploadId = uploadId;
            this.options = options || {};
            this.options.showDeleteButtonOnImages = this.options.hasOwnProperty('showDeleteButtonOnImages') ? this.options.showDeleteButtonOnImages : true;
            this.cachedFileArray = [];
            this.selectedFilesCount = 0;

            // Grab the custom file container elements
            this.el = document.querySelector('.custom-file-container[data-upload-id="' + this.uploadId + '"]');
            if (!this.el) {
                throw new Error('Could not find a \'custom-file-container\' with the id of: ' + this.uploadId);
            }
            this.input = this.el.querySelector('input[type="file"]');
            this.inputLabel = this.el.querySelector('.custom-file-container__custom-file__custom-file-control');
            this.imagePreview = this.el.querySelector('.custom-file-container__image-preview');
            this.clearButton = this.el.querySelector('.custom-file-container__image-clear');

            // Make sure all elements have been attached
            if (!this.el || !this.input || !this.inputLabel || !this.imagePreview || !this.clearButton) {
                throw new Error('Cannot find all necessary elements. Please make sure you have all the necessary elements in your html for the id: ' + this.uploadId);
            }

            // Set the base64 background images
            this.baseImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiQAAAD6CAMAAACmhqw0AAAA+VBMVEUAAAD29u3u7unt7ent7enu7uju7uihoqCio6Gio6KjpKOkpaSmpqSmp6WoqKaqq6mqq6qrq6qsrautrauur62wsa6xsa+xsrCys7GztLK0tbK1trS2t7S3t7W4uba5ure6u7e7vLm8vbu9vrvAwL3Awb3DxMHFxcPGxsPHx8TIycXLzMjLzMnMzMnNzsrPz8vP0MzQ0M3S0s/U1NDV1dLX19TY2NTY2NXZ2dba2tXb29bc3Nfc3Njc3dnd3dre3tre39vg4Nvh4dzi4t3i4t7j497k5N/k5ODl5eDl5eHl5uLm5uHn5+Lo6OPp6eTq6uXr6+bs7Oft7eh54KxIAAAAB3RSTlMAHKbl5uztvql9swAABA1JREFUeNrt3VlT01AYgOG0oEEE910URNzFBVFcqCgKirLU/P8fI3QYbEOSdtrMyJzzvHfMlFx833NBQuY0SRrN8UwqabzZSJLGaYNQVacaSdMUVF0zGTMEVTeWmIH6BYkgESSCRJAIEkEiSCRIBIkgESSCRJAIEkEiQSJIBIkgESSCRJAIEgkSQSJIBIkgESSCRJBIkAgSQSJIBIkgESSCRIJEkAgSQSJIBIkgkSARJIJEkAgSQSJIBIkEiSARJIJEkAgSQSJIJEgEiSARJIJEkAgSQSJBIkgEiSARJIJEkAgSCRJBIkgEiSARJIJEgkSQ5PvxbdS+tyEJuZVb0+noTV579geSQGs/SOvqxiYkYfYwra+rbUhC7NNEjUjSJ5CE2P06jaTnIAmxKwe7vb468t3N14WOki1IAuzMwWrf1HCh3Q6S95AEWGe1b0/WlSCBBBJIIAkdSXvt1aNXa21IICld7dJU5+epJUggKV7tzuzRA4/ZHUggKVrtfNdjsXlIIClY7XLPw9NlSCA5vtqLPUguQgLJsdX+zv0fZhsSSPKrXckhWSn5jV8zG5DEiuR1DsnrEiOX0vMbkESKZDWHZLXMSFqsBJIIkOz1vn40sVdqpFgJJDHc3dzsQXKzwkihEkhiQLI+2f3y+3qVkSIlkMSAJFvsQrJYbaRACSRRIMlenj0UcPZlPyPHlUASB5Jsc+7cwevMc5v9jRxTAkkkSPbb+riVZYMYySuBJB4kJRUYySmBJHYkhUZ6lUASOZISIz1KIIkbSamRbiWQxIZkvT2YkS4lkESGpDV9tz2YkX9KIIkLSWs6TY+U9DFypASSqJC0OicfHSrpa2T/k5BEh6R1eDpWR8kARtIZSGJD0jo6QW1fySBGIIkOSavrlL27PwcxAklsSFo9JzFOppBAkl9ta5jTOiGJCslQRiCJCslwRiCJCcmQRiCJCMmwRiCJB8mXoU+YhyQaJM9TSCCBBBJIIIEEEkgggQQSSCCJAsnyzLA9hiQWJCfnSpBAAgkkkATXxFCnPxfU7iB5B0mAXT5Y7Z3t0Y087SDZgCTA7tX6bZ5TGSQBtlwrkgVIgmy+RiMXdiEJsp3b9Rn5nEESaC/O1/P3yMJuBkm4bX94O2rvNiKbWXRIBIkgESSCRJAIEkEiQSJIBIkgESSCRJAIEgkSQSJIBIkgESSCRIJEkAgSQSJIBIkgESQSJIJEkAgSQSJIBIkgkSARJIJEkAgSQSJIBIkEiSARJIJEkAgSQSJIJEgEiSARJIJEkAgSCRJBIkgEiSARJIJEkEiQCBJBIkgEiSARJIJEgkSQCBJBIkgEiSARJBIkgkSQ6P8gGTMDVTeWNA1B1TWTxmlTUFWnGknSaI4bhMoabzaSv+4BHFVoHZzfAAAAAElFTkSuQmCC';
            this.successPdfImage = 'data:image/png;base64,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';
            this.successVideoImage = 'data:image/png;base64,[encoded data, 6440 characters]';
            this.successFileAltImage = 'data:image/png;base64,[encoded data, 6136 characters]';
            this.successMultipleImage = 'data:image/png;base64,[encoded data, 6736 characters]';
            this.blankImage = 'data:image/png;base64,[encoded data, 4304 characters]';

            // Set click events
            this.bindClickEvents();

            // Let's set the placeholder image
            this.imagePreview.style.backgroundImage = 'url("' + this.baseImage + '")';
        }

        _createClass(FileUploadWithPreview, [{
            key: 'bindClickEvents',
            value: function bindClickEvents() {
                var _this = this;

                // Grab the current instance
                var self = this;

                // Deal with the change event on the input
                self.input.addEventListener('change', function (event) {
                    // In this case, the user most likely had hit cancel - which does something
                    // a little strange if they had already selected a single or multiple images -
                    // it acts like they now have *no* files - which isn't true. We'll just check here
                    // for any cached images already captured, and proceed normally. If something *does* want
                    // to clear their images, they'll use the clear button on the label we provide.
                    if (this.files.length === 0) {
                        return;
                    }

                    // If the input is set to allow multiple files, then we'll add to
                    // the existing file count and keep the cachedFileArray. If not,
                    // then we'll reset the file count and reset the cachedFileArray
                    if (self.input.multiple) {
                        self.selectedFilesCount += this.files.length;
                    } else {
                        self.selectedFilesCount = this.files.length;
                        self.cachedFileArray = [];
                    }

                    // Now let's loop over the selected images and act accordingly based on there were multiple images or not
                    for (var x = 0; x < this.files.length; x++) {
                        // Grab this index's file
                        var file = this.files[x];

                        // To make sure each image can be treated individually, let's give
                        // each file a unique token
                        file.token = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);

                        // File/files selected.
                        self.cachedFileArray.push(file);

                        // Process the image in our loop
                        self.processFile(file);
                    }

                    // Send out our event
                    var imageSelectedEvent = new CustomEvent('fileUploadWithPreview:imageSelected', {
                        detail: {
                            uploadId: self.uploadId,
                            cachedFileArray: self.cachedFileArray,
                            selectedFilesCount: self.selectedFilesCount
                        }
                    });
                    window.dispatchEvent(imageSelectedEvent);
                }, true);

                //Listen for the clear button
                this.clearButton.addEventListener('click', function () {
                    _this.clearImagePreviewPanel();
                }, true);

                // Listen for individual clear buttons on images
                this.imagePreview.addEventListener('click', function (event) {

                    // Listen for the specific click of a clear button
                    if (event.target.matches('.custom-file-container__image-multi-preview__single-image-clear__icon')) {
                        // Grab the clicked function
                        var clearFileButton = event.target;

                        // Get its token
                        var fileToken = clearFileButton.getAttribute('data-upload-token');

                        // Get the index of the file
                        var selectedFileIndex = _this.cachedFileArray.findIndex(function (x) {
                            return x.token === fileToken;
                        });

                        // Remove the file from the array
                        _this.cachedFileArray.splice(selectedFileIndex, 1);

                        // Reset the imagePreview pane
                        _this.imagePreview.innerHTML = '';

                        // Reset our selectedFilesCount with the new proper count
                        _this.selectedFilesCount = _this.cachedFileArray.length;

                        // Load back up the images in the pane with the new updated cachedFileArray
                        _this.cachedFileArray.forEach(function (file) {
                            return _this.processFile(file);
                        });

                        // If there's no images left after the latest deletion event,
                        // then let's reset the panel entirely
                        if (!_this.cachedFileArray.length) {
                            _this.clearImagePreviewPanel();
                        }

                        // Send out our deletion event
                        var imageDeletedEvent = new CustomEvent('fileUploadWithPreview:imageDeleted', {
                            detail: {
                                uploadId: _this.uploadId,
                                cachedFileArray: _this.cachedFileArray,
                                selectedFilesCount: _this.selectedFilesCount
                            }
                        });
                        window.dispatchEvent(imageDeletedEvent);
                    }
                });
            }
        }, {
            key: 'processFile',
            value: function processFile(file) {
                var _this2 = this;

                // Update our input label here based on instance selectedFilesCount
                if (this.selectedFilesCount === 0) {
                    this.inputLabel.innerHTML = '+ 파일 선택';
                } else if (this.selectedFilesCount === 1) {
                    // this.inputLabel.innerHTML = file.name;
                    this.inputLabel.innerHTML = this.selectedFilesCount + ' 개 선택됨';
                } else {
                    this.inputLabel.innerHTML = this.selectedFilesCount + ' 개 선택됨';
                }

                // Apply the 'custom-file-container__image-preview--active' class
                this.imagePreview.classList.add('custom-file-container__image-preview--active');

                // Set up our reader
                var reader = new FileReader();
                reader.readAsDataURL(file);

                // Check the file and act accordingly
                reader.onload = function (e) {
                    // We'll pivot here and go through our cases.
                    // The logic we've set is basically as follows:
                    // If this is an input that only accepts a single image, then just show
                    // back that single image each time, and their file count is always 1.
                    // If they have `multiple` set on the input, then what we'll do is ADD
                    // images to the `cachedImageArray`. We'll show the images in a grid style at all times when
                    // `multiple` is set on the input. If the user wants to get rid of all the
                    // images they'll used the `x` button near the input, or the `x` button on the image.

                    ////////////////////////////////////////////////////
                    // First, we'll deal with a single selected image //
                    ////////////////////////////////////////////////////
                    if (!_this2.input.multiple) {
                        //If png, jpg/jpeg, gif, use the actual image
                        if (file.type.match('image/png') || file.type.match('image/jpeg') || file.type.match('image/gif')) {
                            _this2.imagePreview.style.backgroundImage = 'url("' + reader.result + '")';
                        } else if (file.type.match('application/pdf')) {
                            //PDF Upload
                            _this2.imagePreview.style.backgroundImage = 'url("' + _this2.successPdfImage + '")';
                        } else if (file.type.match('video/*')) {
                            //Video upload
                            _this2.imagePreview.style.backgroundImage = 'url("' + _this2.successVideoImage + '")';
                        } else {
                            //Everything else
                            _this2.imagePreview.style.backgroundImage = 'url("' + _this2.successFileAltImage + '")';
                        }
                    }

                    //////////////////////////////////////////////////////////
                    // The next logic set is for a multiple situation, and  //
                    // they want to show multiple images                    //
                    //////////////////////////////////////////////////////////
                    if (_this2.input.multiple) {
                        // Set the main panel's background image to the blank one here
                        _this2.imagePreview.style.backgroundImage = 'url("' + _this2.blankImage + '")';

                        //If png, jpg/jpeg, gif, use the actual image
                        if (file.type.match('image/png') || file.type.match('image/jpeg') || file.type.match('image/gif')) {
                            if (_this2.options.showDeleteButtonOnImages) {
                                _this2.imagePreview.innerHTML += '\n                            <div>\n                                <span\n                                    class="custom-file-container__image-multi-preview"\n                                    style="background-image: url(\'' + reader.result + '\'); "\n                                >\n                                    <span class="custom-file-container__image-multi-preview__single-image-clear">\n                                        <span\n                                            class="custom-file-container__image-multi-preview__single-image-clear__icon"\n                                            data-upload-token="' + file.token + '"\n                                        >&times;</span>\n                                    </span>\n                                </span>\n\n                            </div>\n                        ';
                            } else {
                                _this2.imagePreview.innerHTML += '\n                            <div>\n                                <span\n                                    class="custom-file-container__image-multi-preview"\n                                    style="background-image: url(\'' + reader.result + '\'); "\n                                ></span>\n                            </div>\n                        ';
                            }
                        } else if (file.type.match('application/pdf')) {
                            //PDF Upload
                            if (_this2.options.showDeleteButtonOnImages) {
                                _this2.imagePreview.innerHTML += '\n                            <div>\n                                <span\n                                    class="custom-file-container__image-multi-preview"\n                                    style="background-image: url(\'' + _this2.successPdfImage + '\'); "\n                                >\n                                    <span class="custom-file-container__image-multi-preview__single-image-clear">\n                                        <span\n                                            class="custom-file-container__image-multi-preview__single-image-clear__icon"\n                                            data-upload-token="' + file.token + '"\n                                        >&times;</span>\n                                    </span>\n                                </span>\n\n                            </div>\n                        ';
                            } else {
                                _this2.imagePreview.innerHTML += '\n                            <div>\n                                <span\n                                    class="custom-file-container__image-multi-preview"\n                                    style="background-image: url(\'' + _this2.successPdfImage + '\'); "\n                                ></span>\n                            </div>\n                        ';
                            }
                        } else if (file.type.match('video/*')) {
                            //Video upload
                            if (_this2.options.showDeleteButtonOnImages) {
                                _this2.imagePreview.innerHTML += '\n                            <div>\n                                <span\n                                    class="custom-file-container__image-multi-preview"\n                                    style="background-image: url(\'' + _this2.successVideoImage + '\'); "\n                                >\n                                    <span class="custom-file-container__image-multi-preview__single-image-clear">\n                                        <span\n                                            class="custom-file-container__image-multi-preview__single-image-clear__icon"\n                                            data-upload-token="' + file.token + '"\n                                        >&times;</span>\n                                    </span>\n                                </span>\n\n                            </div>\n                        ';
                            } else {
                                _this2.imagePreview.innerHTML += '\n                            <div>\n                                <span\n                                    class="custom-file-container__image-multi-preview"\n                                    style="background-image: url(\'' + _this2.successVideoImage + '\'); "\n                                ></span>\n                            </div>\n                        ';
                            }
                        } else {
                            //Everything else
                            if (_this2.options.showDeleteButtonOnImages) {
                                _this2.imagePreview.innerHTML += '\n                            <div>\n                                <span\n                                    class="custom-file-container__image-multi-preview"\n                                    style="background-image: url(\'' + _this2.successFileAltImage + '\'); "\n                                >\n                                    <span class="custom-file-container__image-multi-preview__single-image-clear">\n                                        <span\n                                            class="custom-file-container__image-multi-preview__single-image-clear__icon"\n                                            data-upload-token="' + file.token + '"\n                                        >&times;</span>\n                                    </span>\n                                </span>\n\n                            </div>\n                        ';
                            } else {
                                _this2.imagePreview.innerHTML += '\n                            <div>\n                                <span\n                                    class="custom-file-container__image-multi-preview"\n                                    style="background-image: url(\'' + _this2.successFileAltImage + '\'); "\n                                ></span>\n                            </div>\n                        ';
                            }
                        }
                    }
                };
            }
        }, {
            key: 'selectImage',
            value: function selectImage() {
                this.input.click();
            }
        }, {
            key: 'clearImagePreviewPanel',
            value: function clearImagePreviewPanel() {
                this.input.value = '';
                this.inputLabel.innerHTML = 'Choose file...';
                this.imagePreview.style.backgroundImage = 'url("' + this.baseImage + '")';
                this.imagePreview.classList.remove('custom-file-container__image-preview--active');
                this.cachedFileArray = [];
                this.imagePreview.innerHTML = '';
                this.selectedFilesCount = 0;
            }
        }]);

        return FileUploadWithPreview;
    }();

    return FileUploadWithPreview;

})));