import Component from '../component/index';
import routeService from '../../services/RouteService';
import {createElement} from '../../utils/elementUtils';
import {prepareToNumber} from '../../utils/urlUtils';

const LEFT_ICON = '«';
const RIGHT_ICON = '»';

const CHAGE_PAGE = 'changePage';

class Pagination extends Component {
    buttons = [];

    constructor (parentNode) {
        super('#pagination', parentNode);

        this.currentPage = 0;
        this.countPages = 0;

        this.container = this.mainNode.querySelector('.pagination');

        routeService.onChange(() => {
            this.renderButtons();
        });
    }

    renderOneButton = (text, isDisabled = false) => {
        const li = createElement({
            tagName: 'li',
            parentNode: this.container,
            options: {
                className: 'page-item',
                disabled: isDisabled,
            },
        });
        const button = createElement({
            tagName: 'button',
            parentNode: li,
            options: {
                className: 'page-link pe-auto',
                innerHTML: text,
            },
        });
        if (isDisabled) {
            li.classList.add('disabled');
            button.setAttribute('disabled', 'true');
        }
        if (text === this.currentPage) {
            li.classList.add('active');
        }
        this.addEventListener(button, 'click', () => {
            const nextPage = (() => {
                if (text === LEFT_ICON) {
                    return this.currentPage - 1;
                }
                if (text === RIGHT_ICON) {
                    return this.currentPage + 1;
                }
                return text;
            })();

            routeService.pushQuery({
                pageNumber: nextPage,
            });
        });
        this.buttons.push(li);
    }

    clearButtons = () => {
        this.buttons.forEach((b) => {
            b.remove();
        });

        this.clearListeners();

        this.buttons = [];
    }

    changeCountPages = (countPages) => {
        if (countPages !== this.countPages) {
            this.countPages = countPages;

            this.renderButtons();
        }
    }

    renderButtons = () => {
        this.clearButtons();
        const {pageNumber} = routeService.getUrlData().query;
        this.currentPage = prepareToNumber(pageNumber, this.countPages);

        const start = this.currentPage < 3 ? 1 : this.currentPage - 2;
        const end = start + 4 > this.countPages ? this.countPages : start + 4;

        this.renderOneButton(LEFT_ICON, this.currentPage <= 1);

        for (let i = start; i <= end; i += 1) {
            this.renderOneButton(i);
        }

        this.renderOneButton(RIGHT_ICON, this.currentPage >= this.countPages);

        this.next(CHAGE_PAGE, this.currentPage);
    }

    onPageChange = (listener) => {
        this.subscribe(CHAGE_PAGE, listener);
    }
}

export default Pagination;