// ==UserScript==
// @name         每日杀手数独自动高亮
// @version      0.1.0
// @description  Daily killer Sudoku AutoHighlight
// @author       DreamNya
// @match        https://www.dailykillersudoku.com/puzzle/*
// @grant        none
// @license      MIT
// @run-at       document-end
// @namespace https://greasyfork.org/users/809466
// ==/UserScript==

const getKey = function (key, defaultValue) {
    const value = JSON.parse(localStorage.getItem('AutoHighlight-' + key));
    return value ?? defaultValue;
};
const setKey = function (key, value) {
    localStorage.setItem('AutoHighlight-' + key, JSON.stringify(value));
    return value;
};

const AutoHighlight = {};
window.AutoHighlight = AutoHighlight;

const config = {};
AutoHighlight.config = config;
config.num = getKey('num', true);
config.subnum = getKey('subnum', true);
AutoHighlight.num = 0;

AutoHighlight.reset = function () {
    AutoHighlight.highlight(0);
};

AutoHighlight.toggleConfig = function (item, element) {
    config[item] = setKey(item, !config[item]);
    $(element).attr('data-icon', config[item] ? 'toggle-on' : 'toggle-off');
};

AutoHighlight.highlight = function (num) {
    DKS.puzzle.board.clearHighlightedCells();

    if (AutoHighlight.num == num) {
        num = 0;
    }
    AutoHighlight.num = num;
    if (num == 0) {
        return;
    }
    const boardCells = DKS.puzzle.board._cells.flat();
    const cells = boardCells.reduce((arr, cell) => {
        let flag = false;

        if (config.num) {
            if (cell.value == num) {
                flag = true;
            }
        }
        if (!flag && config.subnum) {
            if (cell.pencilMarks.includes(num)) {
                flag = true;
            }
        }

        if (flag) {
            arr.push(cell);
        }
        return arr;
    }, []);

    DKS.puzzle.board.highlightedCells.push(...cells);
    DKS.puzzle.board._drawHighlightedCells();
};

const off =
    'M384 64H192C85.961 64 0 149.961 0 256s85.961 192 192 192h192c106.039 0 192-85.961 192-192S490.039 64 384 64zM64 256c0-70.741 57.249-128 128-128 70.741 0 128 57.249 128 128 0 70.741-57.249 128-128 128-70.741 0-128-57.249-128-128zm320 128h-48.905c65.217-72.858 65.236-183.12 0-256H384c70.741 0 128 57.249 128 128 0 70.74-57.249 128-128 128z';
const on =
    'M384 64H192C86 64 0 150 0 256s86 192 192 192h192c106 0 192-86 192-192S490 64 384 64zm0 320c-70.8 0-128-57.3-128-128 0-70.8 57.3-128 128-128 70.8 0 128 57.3 128 128 0 70.8-57.3 128-128 128z';

$(document.body).append(
    `<div
        id="AutoHighlight"
        class="controls-container"
        style="position: fixed; z-index: 99999; right: 4%; top: calc(50vh - 160px); width: 240px; height: 320px">
        <header>
            <a
                class="controls-header-button controls-header-button-enabled reset-button"
                onclick="AutoHighlight.reset();"
                ><svg
                    class="svg-inline--fa fa-sync-alt fa-w-16"
                    aria-hidden="true"
                    focusable="false"
                    data-prefix="fas"
                    data-icon="sync-alt"
                    role="img"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 512 512"
                    data-fa-i2svg="">
                    <path
                        fill="currentColor"
                        d="M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z"></path></svg
                >
                <div>Reset</div></a
            >
            <h2 style="font-size: 1em">AutoHighlight - 自动高亮</h2>
        </header>
        <div class="controls-inner">
            <div class="calculator-header" style="display: flex; justify-content: space-around; height: 42px;">
                <div class="preference-toggle">
                    <svg
                        class="svg-inline--fa fa-toggle-${config.num ? 'on' : 'off'} fa-w-18 fa-fw fa-2x"
                        onclick="AutoHighlight.toggleConfig('num', this)"
                        aria-hidden="true"
                        focusable="false"
                        data-prefix="fas"
                        data-icon="toggle-${config.num ? 'on' : 'off'}"
                        role="img"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 576 512"
                        data-fa-i2svg=""
                        style="margin: 0">
                        <path
                            fill="currentColor"
                            d="${config.num ? on : off}"></path></svg
                    ><span style="vertical-align: super">实数</span>
                </div>
                <div class="preference-toggle">
                    <svg
                        class="svg-inline--fa fa-toggle-${config.subnum ? 'on' : 'off'} fa-w-18 fa-fw fa-2x"
                        onclick="AutoHighlight.toggleConfig('subnum', this)"
                        aria-hidden="true"
                        focusable="false"
                        data-prefix="fas"
                        data-icon="toggle-${config.subnum ? 'on' : 'off'}"
                        role="img"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 576 512"
                        data-fa-i2svg=""
                        style="margin: 0">
                        <path
                            fill="currentColor"
                            d="${config.subnum ? on : off}"></path></svg
                    ><span style="vertical-align: super">候选数</span>
                </div>
            </div>
            <div id="calculatorContent" class="calculator-content">${Array(9)
                .fill()
                .reduce((str, _, index) => {
                    str += `<div class="combination-container" onclick="AutoHighlight.highlight(${
                        index + 1
                    })" style="font-size: 16.8011px; width: 33.3%; height: 33.3%">
                            <span>${index + 1}</span>
                            </div>`;
                    return str;
                }, '')}
            </div>
        </div>
        </div>
`
);

$('#AutoHighlight').on('click mousedown', (e) => {
    e.stopPropagation();
});

$(document).on('mousedown', (e) => {
    if (DKS.puzzle.board.highlightedCells.length == 0) {
        AutoHighlight.num = 0;
    }
});