/** リンクが一致したらcallbackを実行。* は [\w%+.-]+ として扱われ、(*) は callback の引数に中味が渡る。** とすると .+? として扱われる */
ChEx.matchUrl = function(condition, callback, _href) {
    let url = _href || location.href;
    condition = condition.replace(/([.?+\/])/g, '\\$1').replace(/\*\*/g, '.+?').replace(/\*/g, '[\\w%+.-]+');
    condition = new RegExp(condition);
    url.replace(condition, (hit, a, b, c, d) => {
        callback(a, b, c, d);
    });
};

//使用例
// 商品登録ページのみ
ChEx.matchLink('/projects/*/items/add', function() { /* 拡張処理 */ });

// 商品詳細ページのみ
ChEx.matchLink('/projects/*/items/(*)/detail', function(itemId) { /* 拡張処理 */ });

//ちなみに同等のことを正規表現でかくとこうなる(正規表現だと読みづらい)
if (location.href.match(/\/projects\/.*?\/items\/add/)) { /* 拡張処理 */ }

let matches = location.href.match(/\/projects\/.*\/items\/(.*?)\/detail/);
if (matches) { let itemId = matches[1];  /* 拡張処理 */ }

/**
 * 入力内容をテンプレートとして保存する機能
 * @param opt.storageKey
 * @param opt.init - 保存/選択するためのダイアログを開くボタン($opener)の表示を行うコールバック関数。例: $opener => $opener.appendTo('form')
 * @param opt.title
 * @param opt.inputs
 * @param opt.onAdd
 * @param opt.onApply
 */
ChEx.templateStorage = function (opt) {
    const dialog = ChEx.dialog({
        title: opt.title,
        makeBody: () => {
            let $table;
            let $root = $('<div></div>').append(
                $table = $('<table></table>'),
                $('<input type="button" value="Add Template" style="margin-top: 5px;">').click(() => {
                    let title = prompt('title');
                    if (title) {
                        let values = opt.inputs.map(selector => {
                            let $input = $(selector);
                            let type = $input.attr('type');
                            if (type === 'checkbox' || type === 'radio') {
                                return $input.filter(':checked').get().map(elem => elem.value).join(",");
                            } else if ($input.is('select') && $input.prop('multiple')) {
                                //noinspection JSValidateTypes
                                return $input.children('option:selected').get().map(elem => elem.value).join(",");
                            } else {
                                return $input.val();
                            }
                        });
                        if (opt.onAdd) opt.onAdd(values);
                        let tsv = `${title}\t${values.join("\t")}`;
                        __addRow(tsv);
                        ChEx.storage.saveLocal(opt.storageKey, [], templates => {
                            templates.push(tsv);
                        });
                    }
                })
            );
            const __addRow = function (tsv) {
                let $tr;
                $table.append(
                    $tr = $('<tr></tr>').append(
                        $('<td style="padding:0;"><input type="button" value="Select" style="background-color: lightblue;"></td>').click(() => {
                            dialog.close();
                            let values = tsv.split("\t");
                            values.shift(); //タイトル撤去
                            for (let selector of opt.inputs) {
                                let val = values.shift();
                                let $input = $(selector);
                                let type = $input.attr('type');
                                if (type === 'checkbox' || type === 'radio') {
                                    $input.prop('checked', false);
                                    val.split(',').forEach(v => $input.filter(`[value="${v}"]`).prop('checked', true));
                                } else if ($input.is('select') && $input.prop('multiple')) {
                                    //noinspection JSValidateTypes
                                    $input.children('option').prop('selected', false);
                                    //noinspection JSValidateTypes
                                    val.split(',').forEach(v => $input.children(`option[value="${v}"]`).prop('selected', true));
                                } else {
                                    $input.val(val);
                                }
                            }
                            if (opt.onApply) opt.onApply(values); //余った values を渡す
                        }),
                        $('<td style="padding: 0 4px;"></td>').text(tsv.replace(/\t[\s\S]*$/, '')).attr('title', tsv),
                        $('<td><input type="button" value="Delete"></td>').click(() => {
                            if (!confirm(`Delete?\n\n${tsv.replace(/\n/g, ' ').replace(/\t/g, "\n")}`)) return;
                            $tr.remove();
                            ChEx.storage.saveLocal(opt.storageKey, [], function (templates) {
                                let idx = templates.indexOf(tsv);
                                if (idx === -1) return ChEx.error('No tsv in the template. tsv: ' + tsv);
                                templates.splice(idx, 1);
                            });
                        }),
                    )
                );
            };
            ChEx.storage.loadLocal(opt.storageKey, [], templates => {
                for (let tsv of templates) {
                    __addRow(tsv);
                }
            });
            return $root;
        }
    });
    opt.init($(`<input type="button" value="${opt.title}">`).click(() => dialog.open()));
};

//---------------------------------
//使用例
let dialog = ChEx.dialog({
    makeBody: () => $('<div>ダイアログの中身</div>'),
    title: 'ダイアログのタイトル'
});
//デフォルトでは Cancel ボタンしかないので追加する
dialog.addButton('OK', () => {
    dialog.close(); //ダイアログ閉じる
    //OK押した場合の特別な処理
}, 'lightblue');
dialog.open(); //ダイアログを開く
//---------------------------------


/** 最小実装のダイアログ(jquery-uiは大きすぎるので) */
ChEx.__dialog_opened = false;
/**
 * @param opt.makeBody - ダイアログの中身を作るコールバック。戻り値で中身を返す
 * @param opt.css
 * @param opt.title
 * @param opt.onOpen
 * @param opt.onClose
 */
ChEx.dialog = function (opt) {
    if (ChEx.__dialog_opened) return;
    ChEx.__dialog_opened = true;
    let $dialog, $back, $message;
    const dialog = {
        open: () => {
            $('body').append(
                $dialog = $('<div></div>').css(Object.assign({
                    position: 'absolute',
                    height: 'auto',
                    width: '600px',
                    top: 0,
                    left: 0,
                    zIndex: 2147483647,
                    borderRadius: '3px',
                    border: '1px solid #ddd',
                    background: '#fff',
                    color: '#333',
                    fontFamily: 'Arial,Helvetica,sans-serif',
                    fontSize: '1em',
                    overflow: 'hidden',
                    padding: '.2em',
                    outline: 0,
                }, opt.css)).append(
                    (opt.title ? $('<div></div>').text(opt.title).css({
                        padding: '.4em 1em',
                        borderRadius: '3px',
                        border: '1px solid #ddd',
                        background: '#e9e9e9',
                        color: '#333',
                        fontWeight: 'bold',
                    }) : null),
                    $('<div></div>').css({
                        padding: '.5em 1em',
                        color: '#333',
                    }).append(
                        $message = opt.makeBody(),
                        $('<div class="chex-dialog-buttons" style="margin-top: 10px;"></div>')
                    )
                ),
                $back = $('<div></div>').css({
                    zIndex: 2147483646,
                    background: '#aaa',
                    opacity: '.3',
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                })
            );
            if (opt.onOpen) opt.onOpen();
            $message.scrollTop(0); //スクロールが出る場合、ボタン(末尾)にフォーカスが行ってしまうので、これで先頭に戻す
            let $window = $(window);
            let ww = $window.width();
            let dw = $dialog.width();
            //noinspection JSValidateTypes
            $dialog.css({
                left: (ww - dw) / 2,
                top: $window.scrollTop() + 20 //Math.max(20, (wh - dh) / 2),
            });
            $(document).on('keydown.chex-dialog', function (e) {
                if (e.which === 27) dialog.close();
            });
            dialog.addButton('Cancel', () => dialog.close());
        },
        close: () => {
            $dialog.remove();
            $back.remove();
            $(document).off('.chex-dialog');
            if (opt.onClose) opt.onClose();
            ChEx.__dialog_opened = false;
        },
        addButton: (label, onClick, bgColor) => {
            $dialog.find('.chex-dialog-buttons').append(
                $('<button></button>').text(label).click(onClick).css({
                    border: '1px solid #c5c5c5',
                    borderRadius: '3px',
                    padding: '.4em 1em',
                    color: '#454545',
                    background: bgColor || '#f6f6f6',
                    fontSize: '1em',
                    cursor: 'pointer',
                    marginRight: '10px',
                })
            );
        },
    };
    return dialog;
};

//---------------------------------
//使用例
ChEx.storage.saveLocal('example.xyz', {}, data => {
    data['abc'] = 'def';
});
ChEx.storage.loadLocal('example.xyz', {}, data => {
    console.log(data['abc']);
});
//---------------------------------


/** ローカルストレージ */
ChEx.storage = {};
ChEx.storage.loadLocal = function (key, defaultValue, callback) {
    if ((typeof defaultValue) === 'function') return ChEx.error('defaultValue is required.');
    //noinspection JSUnresolvedVariable
    const __local = chrome.storage.local;
    __local.get(key, (data) => {
        if (!data[key]) {
            data[key] = defaultValue;
        }
        callback(data[key]);
    });
};
ChEx.storage.__saveLocal = function (base, afterSave) {
    //noinspection JSUnresolvedVariable
    const __local = chrome.storage.local;
    if (afterSave) {
        __local.set(base, afterSave);
    } else {
        __local.set(base);
    }
};
ChEx.storage.saveLocal = function (key, defaultValue, callback, afterSave) {
    if ((typeof defaultValue) === 'function') return ChEx.error('defaultValue is required.');
    //noinspection JSUnresolvedVariable
    const __local = chrome.storage.local;
    __local.get(key, (base) => {
        if (!base[key]) {
            base[key] = defaultValue;
        }
        let save = callback(base[key]);
        if (save !== false) {
            ChEx.storage.__saveLocal(base, afterSave);
        } else {
            if (afterSave) afterSave();
        }
    });
};

//---------------------------------
//使用例
// form .target を最大 10 秒探して、見つかれば処理を行う。見つからなければエラーにする。
ChEx.waitDom('form .target', '対象のDom', 10, function($target) {
    // $target には取得することができた Dom (jQuery) が入ってる。
    // 第２引数の文言はエラーメッセージ用。
    //   Dom が見つからない場合、Dom から意図がつかめなくなり得るので、
    //   かならず日本語でも残しておくべき。
});
//---------------------------------


/** DOMの出現を待つ。１秒ずつmax回試行。見つかったらnextを実行 */
ChEx.waitDom = function(selector, label, max, next, _count) {
    let $item = $(selector); //毎回取り直す必要あり
    if ($item.length) {
        next($item);
    } else {
        _count = (_count || 0) + 1;
        if (_count < max) {
            setTimeout(function () {
                ChEx.waitDom(selector, label, max, next, _count);
            }, 1000);
        } else {
            ChEx.error(`${max} 秒待ちましたが ${selector} (${label}) が見つかりませんでした。`);
        }
    }
};

/**
 * 文字入力により行が絞り込まれていく
 * @param {function} opt.init - 入力内容を表示するエリア($input)を配置するコールバック。$input => {} の形。
 * @param {jQuery} opt.$foundRows - 検索結果で表示/非表示をする行
 */
ChEx.keyDownSearch = function (opt) {
    let $input = $('<span style="margin-left: 10px; font-weight: bold; font-size: medium;"></span>');
    opt.init($input);
    $('body').keydown(function (e) {
        let input = $input.text();
        if (e.which === 8) { //BS
            input = input.substr(0, input.length - 1); //末尾1文字撤去
        } else {
            let char = String.fromCharCode(e.which);
            if (char.match(/[A-Z0-9]/)) input += char; //特定の文字のみ許す
        }
        $input.text(input);
        opt.$foundRows.show();
        if (input) {
            opt.$foundRows.each(function () {
                let $row = $(this);
                if ($row.text().toUpperCase().indexOf(input) === -1) $row.hide();
            });
        }
    });
};

/** きっかり１個ヒットしない場合にエラー出す。
 *  selector だけだと動かなくなった際に何が欲しかったのかわからなくなるので label も書くこと */
ChEx.findOne = function (selector, label) {
    let $item = $(selector);
    if ($item.length !== 1) {
        ChEx.error(`${selector} (${label}) が ${$item.size()} 個あります。`);
    }
    return $item;
};

/**  findOne(selector) 後、`${selector} ${subSelector}` で再検索する */
ChEx.findOneThen = function (selector, subSelector, label) {
    ChEx.findOne(selector, `${label} のTop`);
    return $(`${selector} ${subSelector}`);
};

/**
 * @param {string} opt.selector - 日付が入ってる欄を指すselector
 * @param {string} opt.format - (省略可)日付の書式
 * @param {bool} opt.color - (省略可)色付けするならtrue
 * @param {int} opt.now - (省略可)現在のtime値
 */
ChEx.dateColor = function (opt) {
    let $dts = $(opt.selector);
    //日付欄ごとにループ
    $dts.each((i, dt) => {
        let $dt = $(dt);
        let date = new Date($dt.text());
        //日付をフォーマットして入れ直す
        $dt.text(ChEx.dateFormat(date, opt.format || 'Y-M-D H:I:S'));
        //現在との差分を計算
        if (opt.color) {
            let dateNum = date.getTime();
            if (dateNum <= opt.now) { //期限過ぎたらだんだん赤黒く
                let num = Math.max(32, 255 - parseInt((opt.now - dateNum) / 1000 / 3600 / 24 * 32));
                $dt.css('background', `rgb(${num}, 0, 0)`);
            } else { //期限がせまったら黄色く
                let num = Math.min(255, parseInt((dateNum - opt.now) / 1000 / 3600 / 24 * 32));
                $dt.css('background', `rgb(255, 255, ${num})`);
            }
        }
    });
};

//$().sort()は少し癖があるのでそれを吸収する
ChEx.sortDom = function (opt) {
    let $rows = $(opt.selector);
    $rows.sort((a, b) => opt.getValue($(a)) > opt.getValue($(b)));
    $rows.parent().append($rows);
};

/** 日付フォーマット。'Y-M-D H:I:S.MS' の形式で指定 */
ChEx.dateFormat = function (date, format) {
    let str = format;
    str = str.replace(/MS/g, () => `00${date.getMilliseconds()}`.slice(-3));
    str = str.replace(/Y/g, () => date.getFullYear());
    str = str.replace(/M/g, () => `0${date.getMonth() + 1}`.slice(-2));
    str = str.replace(/D/g, () => `0${date.getDate()}`.slice(-2));
    str = str.replace(/H/g, () => `0${date.getHours()}`.slice(-2));
    str = str.replace(/I/g, () => `0${date.getMinutes()}`.slice(-2));
    str = str.replace(/S/g, () => `0${date.getSeconds()}`.slice(-2));
    return str;
};

/**
 * @param {jQuery} opt.$targets - 書き換え可能にする対象
 * @param {string} opt.storageKey - 保存につかうキー
 * @param {function} opt.getId - 保存につかうID
 * @param {function|undefined} opt.rewritableIf - (省略可) 書き換え可能にする条件
 * @param {function|undefined} opt.onChange - (省略可) 書き換えた際に見た目など変えたい場合
 */
ChEx.rewritableTexts = function (opt) {
    //設定済みコメント読み込み
    ChEx.storage.loadLocal(opt.storageKey, {}, texts => {
        opt.$targets.each((i, target) => {
            let $target = $(target);
            let id = opt.getId($target);
            let orig = $target.text().trim();
            $target.attr('data-chrome-ex-orig', orig);
            if (texts[id]) {
                $target.text(texts[id]);
                if (opt.onChange) opt.onChange($target, orig !== texts[id]);
            }
        });
    });
    //クリックイベント設定
    opt.$targets.click(event => {
        let $target = $(event.currentTarget);
        if (opt.rewritableIf && !opt.rewritableIf($target)) { return; }
        //確認
        let text = prompt("", $target.text().trim());
        if (text === null) {
            return;
        }
        //入力値に書き換え or 空欄なら元の値に戻す
        if (text) {
            $target.text(text);
            if (opt.onChange) opt.onChange($target, true);
        } else {
            let orig = $target.attr('data-chrome-ex-orig');
            $target.text(orig);
            if (opt.onChange) opt.onChange($target, false);
        }
        //保存
        let id = opt.getId($target);
        if (text) {
            ChEx.storage.saveLocal(opt.storageKey, {}, function (texts) {
                texts[id] = text;
            });
        } else {
            ChEx.storage.saveLocal(opt.storageKey, {}, function (texts) {
                delete texts[id];
            });
        }
    });
};

/** 通知用基本情報の登録 */
ChEx.__info = {};
ChEx.info = function (pluginName, email, author) {
    ChEx.__info = {pluginName, email, author};
};

ChEx.notify = function (storageKey, list) {
    ChEx.storage.loadLocal(storageKey, {}, data => {
        let already = data['alreadyReadNotify'] || '';
        list = list.sort((a, b) => a.ymd > b.ymd);
        if (already) {
            //既読は除去
            list = list.filter(item => already < item.ymd);
        }
        if (list.length) {
            let later = data['alreadyReadNotifyLater'] || '';
            if (later && (new Date()).getTime() < later) return;
            //表示
            $('body').append(
                $('<div id="chex-notify" style="position: fixed; left: 0; top: 0; padding: 0; width: 100vw; background-color: lightblue; z-index: 9999; box-shadow: 4px 4px 4px rgba(0,0,0,0.2);"></div>').append(
                    `<div style="padding: 10px; background-color: darkblue; color: white;">${ChEx.h(ChEx.__info.pluginName)}</div>`,
                    list.map(item => `<div style="margin: 20px; font-size: medium;"><div style="color: gray;">${item.ymd}</div><ul><li>${item.htmls.join('<li>')}</ul></div>`),
                    $('<div style="display: flex; justify-content: center; align-items: center; margin: 30px"></div>').append(
                        $('<input type="button" value="Close (あとで再通知)" style="font-size: larger; padding: 10px;">').click(() => {
                            $('#chex-notify').hide();
                            ChEx.storage.saveLocal(storageKey, {}, data => {
                                data['alreadyReadNotifyLater'] = (new Date()).getTime() + 10 * 60 * 1000; //10分後
                            });
                        }),
                        $('<input type="button" value="Close (完了)" style="margin-left: 60px; font-size: larger; padding: 10px; background-color: darkblue; color: white;">').click(() => {
                            $('#chex-notify').hide();
                            ChEx.storage.saveLocal(storageKey, {}, data => {
                                data['alreadyReadNotify'] = list[list.length - 1].ymd;
                            });
                        }),
                        `<div style="margin-left: 60px; font-size: larger;">連絡先: ${ChEx.inquiryLink()}</div>`
                    )
                )
            );
        }
    });
};

$(function () {
    $('.ope-storage-object,.ope-storage-array').each(function () {
        let $div = $(this);
        let STORAGE_KEY = $div.attr('data-storage');
        let IS_ARRAY_TYPE = $div.is('.ope-storage-array');
        let TITLE = $div.attr('data-title');
        let COL_RATE = $div.attr('data-col-rate');
        let isJson = location.href.match(/json=(1|true)/);
        $div.css({ margin: '2px', flex: COL_RATE, marginBottom: '20px' });
        $div.append(
            `<div style="height: 30px; display: flex; align-items: flex-end;">${TITLE || STORAGE_KEY}</div>`,
            `<textarea style="width: 100%; height: calc(100% - 40px);"></textarea>`
        );
        let $textarea = $div.find('textarea');
        if (isJson) {
            ChEx.storage.loadLocal(STORAGE_KEY, null, data => {
                if (data !== null) {
                    let text = JSON.stringify(data);
                    $textarea.val(text);
                }
            });
        } else if (IS_ARRAY_TYPE) {
            ChEx.storage.loadLocal(STORAGE_KEY, [], data => {
                if (!$.isArray(data)) throw new Error(`${STORAGE_KEY} が ope-storage-array で参照されましたが、これは配列ではありません。`);
                data = data.map(v => v.replace(/\n/g, '\\n'));
                let text = data.join("\n");
                $textarea.val(text);
            });
        } else {
            ChEx.storage.loadLocal(STORAGE_KEY, {}, data => {
                if ($.isArray(data)) throw new Error(`${STORAGE_KEY} が ope-storage-array で参照されていませんが、これは配列です。`);
                let text = Object.keys(data).sort().map(key => `${key}: ${data[key]}`.replace(/\n/g, '\\n')).join("\n");
                $textarea.val(text);
            });
        }
        //noinspection JSUnresolvedFunction
        $div.find('textarea').change(function () {
            if (!confirm('データが変更されました。保存しますか？')) {
                location.reload(); //元に戻す
                return;
            }
            if (isJson) {
                let data = $textarea.val();
                if (data) {
                    data = JSON.parse(data);
                    ChEx.storage.saveLocalDirectly(STORAGE_KEY, data, () => location.reload());
                } else {
                    ChEx.storage.removeLocal(STORAGE_KEY, () => location.reload());
                }
            } else if (IS_ARRAY_TYPE) {
                let data = $textarea.val().trim().split("\n").map(v => v.trim().replace(/\\n/g, "\n"));
                ChEx.storage.saveLocalDirectly(STORAGE_KEY, data, () => location.reload());
            } else {
                let data = {};
                $textarea.val().replace(/^([^:]+):\s*(.*?)\s*$/gm, (hit, key, val) => {
                    data[key] = val.replace(/\\n/g, "\n");
                });
                ChEx.storage.saveLocalDirectly(STORAGE_KEY, data, () => location.reload());
            }
        });
    });
});

/** 下位のDOMが変更されたら */
ChEx.onChangeDom__timeoutId = 0;
ChEx.onChangeDom = function ($root, callback) {
    $root.on("DOMNodeInserted DOMSubtreeModified", function () {
        if (ChEx.onChangeDom__timeoutId) return true; //動いていたらやらない
        ChEx.onChangeDom__timeoutId = setTimeout(function () {
            try {
                callback($root);
            } finally {
                ChEx.onChangeDom__timeoutId = 0;
            }
            return true;
        }, 100);
    });
};

ChEx.h = function (str) {
    str = str.replace(/&/g, "&");
    str = str.replace(/"/g, """);
    str = str.replace(/'/g, "'");
    str = str.replace(//g, ">");
    return str;
};

/**
 * ３桁区切り＆パディング＆左右寄せ
 * @param num     - 数値なら３桁区切り。文字列でもいい
 * @param length  - (省略可)この桁数までパディングする。マイナスなら左寄せ
 * @param char    - (省略可)パディングで埋める文字。デフォルトは空白
 * @param decimal - (省略可)表示させたい小数桁
 */
ChEx.padding = function (num, length, char, decimal) {
    if (!num.replace) { //文字列か
        if (decimal) {
            num = num.toLocaleString('ja-JP', { minimumFractionDigits: decimal, maximumFractionDigits: decimal });
        } else {
            num = num.toLocaleString();
        }
    }
    if (length) {
        char = char || ' ';
        if (length > 0) {
            num = char.repeat(length) + num;
            num = num.slice(-length);
        } else {
            num = num + char.repeat(-length);
            num = num.slice(0, -length);
        }
    }
    return num;
};

function unitTest($appendTo, callback) {
    let $parent = $('<ul></ul>');
    $appendTo.append(
        $('<pre></pre>').append(
            $parent
        )
    );
    const test = (title, callback) => {
        let $result;
        let $case = $(`<li style="color: red;"></li>`).append(
            ChEx.h(title),
            ' ... ',
            $result = $('<span></span>')
        );
        $parent.append($case);
        let $sandbox = $('<div></div>').appendTo($case).hide();
        const assert = (actual, expected) => {
            if (actual === expected) {
                $case.css('color', 'green');
                $result.text('OK');
            } else {
                $result.text(`Error! Expected '${expected}', but '${actual}'`);
            }
            $sandbox.remove();
        };
        try {
            callback(assert, $sandbox);
        } catch (e) {
            $result.text(e.message);
            $sandbox.remove();
        }
    };
    callback(test);
}

function example(testId, callback) {
    $(function () {
        let $test = $(`#${testId}`);
        let params = ChEx.urlParams();
        let on = (params.on === '1' && params['#'] === testId);
        params.on = (on ? '0' : '1');
        params.test = testId;
        params['#'] = testId;
        $test.find('h2').append(
            $(`<a href="${ChEx.makeUrl(params)}">拡張を${on ? '無' : '有'}効化</a>`).css({
                marginLeft: '20px',
                fontSize: 'smaller',
                fontWeight: 'normal'
            })
        );
        if (on) callback($test);
    });
}