'use strict'



document.addEventListener('DOMContentLoaded', function () {

    //Функция для вывода таблицы умножения в консоль
    function tableMultiplications(n) {
        let counter,
            lineBorder = '+------',
            space,
            сondition;

        // Считаем сколько разрядов в полученном числе и дорисовываем бордюр в зависимости от длины
        lineBorder += '-'.repeat(String(n).length);

        // Ставим ограничитель на ячейку в бордюре
        lineBorder += '-+-';

        // Проолжаем рисовать бордюр в зависимости от максимального количества разрядов в итоговом числе
        lineBorder += '-'.repeat(String(n * 100).length);

        // Ставим ограничитель в конце бордюра
        lineBorder += '-+';



        // Рисуем саму таблицу умножения от 1 до 99
        for (let i = 1; i < 100; i++) {

            // Верхний бордюр
            console.log(lineBorder);

            // Прибавляем пробел, если счетчик имеет всего 1 разряд
            counter = (i / 10 >= 1) ? i : ` ${i}`;

            // Прибавляем пробел для вывода результата
            сondition = String(n * 100).length - String(i * n).length;

            switch (сondition) {
                case 0:
                    space = '';
                    break;
                case 1:
                    space = ' ';
                    break;
                case 2:
                    space = '  ';
                    break;
            }

            // Формируем строчку вывода
            console.log(`| ${counter} x ${n} | ${i * n} ${space}|`);
        }

        // Замыкающий бордюр
        console.log(lineBorder);

    }
    function maxRepeat(str) {
        const arr = str.split(',');
        const unique = {};
        let countElements = 1;

        // получаем уникальыне элементы и их количество
        arr.forEach(element => {
            if (unique[element]) {
                unique[element] += 1;
            } else {
                unique[element] = 1;
            }
        });

        // проверяем длину массива уникальных элементов
        // и уменьшаем количество элементов для вывода при необходимости
        const uniqueLength = Object.keys(unique).length;
        if (countElements > uniqueLength) {
            countElements = uniqueLength;
        }

        // создаем массив обьектов из обьекта с уникальными элементами
        // после сортируем его по количеству повторений
        const objectArray = Object.keys(unique)
            .map(item => ({
                element: item,
                repeats: unique[item],
            }))
            .sort((a, b) => b.repeats - a.repeats)


        // выводим результат
        console.log('------------');
        for (let i = 0; i < countElements; i++) {
            console.log(`Элемент: ${objectArray[i].element}, количество повторений: ${objectArray[i].repeats}`)
        }
    }
    maxRepeat('8,8,5,5,5,4,4,4,4,4,44,8,8,8,8,8,8,8,8,88,8,4');



    // Функция для обработки клика
    (function () {
        const round = document.querySelectorAll('.round'),
            conntextBlock = document.querySelector('#click-content');

        round.forEach(function (item, i) {
            item.addEventListener('click', function () {
                conntextBlock.innerHTML = `Вы нажали на круг № ${i + 1}`;
            })
        });
    }());

    // Функция для проверки на целое число и иницилизации таблицы в консоли
    (function () {
        const input = document.querySelector('#table-multiplications'),
            btn = document.querySelector('#result-table'),
            alert = document.querySelector('#alert-multiplications');

        // Вешаем событие клик на кнопку
        btn.addEventListener('click', function () {

            // Проверяем условие
            if (Number.isInteger(+input.value)) {
                alert.classList.add('green-color');
                alert.classList.remove('red-color');
                alert.innerHTML = 'Для просмотра резултата откройте консоль браузера';
                tableMultiplications(+input.value);
            } else {
                alert.classList.remove('green-color');
                alert.classList.add('red-color');
                alert.innerHTML = 'Данные введены с ошибкой, повторите ввод';

            }
        });
    }());



});