import Component from '../component/index';
import './ApiInfoComponent.css';
import Modal from '../modal/Modal';
import storageApi from '../../api/StorageServiceAPI';

class ApiInfoComponent extends Component {
    constructor (container) {
        super('#api-info', container);

        this.infoTitle = this.mainNode.querySelector('.Info__title');
        this.infoHeader = this.mainNode.querySelector('.Info__header');
        this.infoDescription = this.mainNode.querySelector('.Info__description');
        this.infoServiceName = this.mainNode.querySelector('.Info__service_name');
        this.infoEditor = this.mainNode.querySelector('.Info__editor');
        this.infoFooter = this.mainNode.querySelector('.Info__footer');
        this.infoBody = this.mainNode.querySelector('.Info__body');
        this.infoControls = this.mainNode.querySelector('.Info__controls');
        this.btnDelete = this.mainNode.querySelector('.Button__delete');
        this.btnEdit = this.mainNode.querySelector('.Button__edit');
        this.info = {
            headerNode: this.infoHeader,
            contentNode: this.infoBody,
            footerNode: this.infoFooter
        };
        this.key = null;
        this.modal = new Modal(document.body, this.info);

        this.addEventListener(this.btnDelete, 'click', () => {
            if (this.key !== null) {
                this.deleteApi(this.key);
            }
        });
    }

    render = (object, index) => {
        this.object = object;
        this.index = index;
        this.key = object.key;
        this.modal.show();

        if (this.object) {
            let title = '';
            if (this.object.key.length > 20) {
                title = `${this.object.key.substr(0, 20)} ...`;
            } else title = this.object.key;
            this.infoTitle.textContent = title;
            this.infoServiceName.textContent = this.object.service_name;
            this.infoEditor.innerHTML = JSON.stringify(this.object.value, false, 4);
            this.infoFooter.textContent = this.object.author;
            this.infoDescription.textContent = this.object.description;
        }
    }

    deleteApi = async (key) => {
        await storageApi.remove(key);
        this.key = null;
        this.modal.hide();
        this.next('deleteApi');
    }
}
export default ApiInfoComponent;