import Component from '../../../../core/components/component/Component';
import storageApi from '../../api/StorageServiceAPI';
import FilterApiComponent from '../filter-api-component/FilterApiComponent';
import ButtonComponent from '../../../../core/components/button-component/ButtonComponent';
import ApiTableComponent from '../api-table-component/ApiTableComponent';
import ApiTableViewForm from '../api-table-view-form/ApiTableViewForm';
import {EVENTS, MODES} from '../../../../core/consts';
import routeService from '../../../../services/RouteService';

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

        this.filterBox = this.createComponent(FilterApiComponent, this.mainNode);

        this.apiViewForm = this.createComponent(ApiTableViewForm);

        this.createBtn = this.createComponent(ButtonComponent, this.filterBox.filterButtonBox, '✚', 'btn btn-primary mb-3 Create__btn');
        this.addSubscribe(this.createBtn, EVENTS.CLICK, () => {
            routeService.pushQuery({mode: MODES.Create}, true);
        });

        this.initStorageListTable();

        this.addSubscribe(this.apiViewForm, EVENTS.CREATE_STORE, async (store) => {
            await storageApi.create(store);
            this.initStorageListTable();
        });

        this.addSubscribe(this.apiViewForm, EVENTS.SAVE_STORE, async (store) => {
            await storageApi.update(store);
            this.initStorageListTable();
        });

        this.addSubscribe(this.apiViewForm, EVENTS.DELETE_STORE, async (storeKey) => {
            await storageApi.remove(storeKey);
            this.initStorageListTable();
        });

        this.apiTable = this.createComponent(ApiTableComponent, this.mainNode);
        this.addSubscribe(this.apiTable, EVENTS.ROW_DOUBLE_CLICK, (_, row) => {
            routeService.pushQuery({mode: MODES.View, key: row.key}, true);
        });
    }

    initStorageListTable = async () => {
        this.apiList = await storageApi.request();
        return this.renderTable();
    };

    renderTable = () => {
        this.render(() => {
            this.apiTable.render(this.apiList);
        });
    }
}

export default ApiPage;