import Component from '../component/index';
import Table from '../table';
import storageLogsApi from '../../api/StorageLogsAPI';
import Pagination from '../pagination';
import LogsFilters from '../logs-filters';
import routeService from '../../services/RouteService';
import {prepareToNumber} from '../../utils/urlUtils';
import {LOG_TYPE, LOG_COLS, EVENTS} from '../../consts';
import {createElement, markText} from '../../utils/elementUtils';

const ELEMENTS_ON_PAGE = 15;

class LogsPage extends Component {
    constructor (mainNodeSelector, parentNode) {
        super(mainNodeSelector, parentNode);

        this.header = createElement({
            tagName: 'div',
            parentNode: this.mainNode,
        });
        this.body = createElement({
            tagName: 'div',
            parentNode: this.mainNode,
        });
        this.footer = createElement({
            tagName: 'div',
            parentNode: this.mainNode,
        });

        this.filters = new LogsFilters(this.header);

        this.tables = {
            [LOG_TYPE.SERVER]: new Table(null, LOG_COLS[LOG_TYPE.SERVER]),
            [LOG_TYPE.CLIENT]: new Table(null, LOG_COLS[LOG_TYPE.CLIENT]),
        };

        this.pagination = new Pagination(this.footer);

        this.logList = {
            [LOG_TYPE.SERVER]: [],
            [LOG_TYPE.CLIENT]: [],
        };

        this.addSubscribe(routeService, EVENTS.ROUTE_SEARCH_CHANGE, this.renderTable);

        this.initPage();
    }

    initPage = async () => {
        this.logList[LOG_TYPE.SERVER] = await storageLogsApi.requestServerLogs();
        this.logList[LOG_TYPE.CLIENT] = await storageLogsApi.requestClientLogs();
        this.renderTable();
    }

    filterRows = (rows, query) => {
        const filteredRows = rows.filter((row) => {
            return Object.entries(query).every(([key, value]) => {
                const rowValue = row[key];
                if (!rowValue) {
                    return true;
                }
                return rowValue.toLowerCase().includes(value.toLowerCase());
            });
        });

        return filteredRows.map((row) => {
            return Object.entries(query).reduce((memo, [key, searchMessage]) => {
                const rowValue = memo[key];
                if (!rowValue) {
                    return memo;
                }
                return {
                    ...memo,
                    [key]: markText(searchMessage, rowValue),
                };
            }, row);
        });
    }

    cutPagginationPage = (filteredRows, queryPageNumber) => {
        const countPages = Math.ceil(filteredRows.length / ELEMENTS_ON_PAGE);
        const pageNumber = prepareToNumber(queryPageNumber, countPages);
        this.pagination.changeCountPages(countPages);
        const start = (pageNumber - 1) * ELEMENTS_ON_PAGE;
        const end = start + ELEMENTS_ON_PAGE;
        return filteredRows.slice(start, end + 1);
    }

    renderTable = () => {
        this.render(() => {
            const {query} = routeService.getUrlData();
            const {tableType, ...omitQuery} = query;
            this.table?.mainNode?.remove();
            this.table = this.tables[tableType];
            this.body.appendChild(this.table.mainNode);
            const filteredRows = this.filterRows(this.logList[tableType], omitQuery);
            const rows = this.cutPagginationPage(filteredRows, query.pageNumber);
            this.table.render(rows);
        });
    }
}

export default LogsPage;