import Component from '../../../../core/components/component/Component';
import ButtonComponent from '../../../../core/components/button-component/ButtonComponent';
import './CreateApiComponent.css';
import storageApi from '../../api/StorageServiceAPI';
import Modal from '../../../../core/components/modal/Modal';

class CreateApiComponent extends Component {
    constructor (container) {
        super('#create-api', container);

        this.inputKey = this.mainNode.querySelector('.Create__key');
        this.inputServiceName = this.mainNode.querySelector('.Create__serviceName');
        this.inputDescription = this.mainNode.querySelector('.Create__description');
        this.inputAuthor = this.mainNode.querySelector('.Create__author');
        this.createError = this.mainNode.querySelector('.Create__error-container');
        this.header = this.mainNode.querySelector('.Create__title');
        this.body = this.mainNode.querySelector('.Create__body');
        this.footer = this.mainNode.querySelector('.Create__footer');
        this.form = this.mainNode.querySelector('.Create__form');
        this.editor = this.mainNode.querySelector('.Create__editor');
        this.button = this.createComponent(ButtonComponent, this.footer, 'Создать', 'btn btn-outline-primary Create__send');
        this.content = {
            headerNode: this.header,
            contentNode: this.body,
            footerNode: this.footer
        };
        this.modal = this.createComponent(Modal, document.body, this.content);
        this.modal.container.classList.add('Large__container');
        this.modal.content.classList.add('Scroll__body');

        this.button.subscribe('click', () => {
            this.send();
        });
    }

    show = () => {
        this.modal.show();
    }

    parseString = async (text) => {
        const obj = await JSON.parse(text);
        return obj;
    }

    send = async () => {
        try {
            const obj = await JSON.parse(this.editor.textContent);
            this.data = {
                key: this.inputKey.value,
                value: obj,
                description: this.inputDescription.value,
                service_name: this.inputServiceName.value,
                author: this.inputAuthor.value
            };

            try {
                await storageApi.create(this.data);
                this.createError.textContent = '';
                this.modal.hide();
                this.next('renderTable');
            } catch (err) {
                if (err.response.status === 502) {
                    this.createError.textContent = 'Заполните все необходимые поля для создания хранилища';
                } else if (err.response.status === 404) {
                    this.createError.textContent = 'Не удалось создать хранилище. Возможно Вы используете не уникальное название хранилища';
                } else {
                    this.createError.textContent = 'Что-то пошло не так';
                }
            }
        } catch {
            this.createError.textContent = 'Тело хранилища не соответствует требованиям';
        }
    }
}
export default CreateApiComponent;