import Component from '../component/index';
import ModalSidebar from '../modal-sidebar/index';
import FormControl from '../form-control/index';
import {FORM_TYPES} from '../../consts';
import './ApiTableViewForm.css';
import storageApi from '../../api/StorageServiceAPI';

class ApiTableViewForm extends Component {
    constructor (parentNode) {
        super('#api-view-form', parentNode);

        this.sidebar = this.createComponent(ModalSidebar, {
            content: this.mainNode
        });
        this.key = null;

        this.title = this.mainNode.querySelector('.h2');
        this.form = this.mainNode.querySelector('form');
        this.deleteBtn = this.mainNode.querySelector('.Button__delete');
        this.addEventListener(this.deleteBtn, 'click', () => {
            if (this.key !== null) {
                this.deleteApi(this.key);
            }
        });

        this.title.textContent = 'Информация о хранилище';

        const inputs = [
            this.keyInput = this.createComponent(FormControl, this.form, {
                id: 'api-key-input',
                label: 'Название хранилища'
            }),
            this.serviceNameInput = this.createComponent(FormControl, this.form, {
                id: 'api-service-name-input',
                label: 'Название сервиса'
            }),
            this.authorInput = this.createComponent(FormControl, this.form, {
                id: 'api-author-input',
                label: 'Автор хранилища'
            }),
            this.descriptionInput = this.createComponent(FormControl, this.form, {
                id: 'api-description-input',
                label: 'Краткое описание'
            }),
            this.valueInput = this.createComponent(FormControl, this.form, {
                id: 'api-value-input',
                type: FORM_TYPES.TEXTAREA,
                className: 'Api__value-input',
                label: 'Содержимое хранилища'
            }),
        ];

        inputs.forEach((input) => {
            input.disabled(true);
        });
    }

    stringifyValue (value) {
        return JSON.stringify(value, false, 4);
    }

    setForm ({key, service_name, author, description, value}) {
        this.keyInput.setValue(key);
        this.serviceNameInput.setValue(service_name);
        this.authorInput.setValue(author);
        this.descriptionInput.setValue(description);
        this.valueInput.setValue(this.stringifyValue(value));
        this.key = key;

        this.sidebar.show();
    }

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