import Modal from '../modal/Modal';
import {createElement} from '../../utils/elementUtils';
import FormControl from '../form-control/index';
import './AvatarModal.css';
import usersServiceApi from '../../api/UsersServiceAPI';
import userInfoService from '../../services/UserInfoService';
import {EVENTS} from '../../consts';

class AvatarModal extends Modal {
    constructor (parentNode) {
        super(parentNode);

        this.header.textContent = 'Основное изображение';
        this.avatar = createElement({
            tagName: 'div',
            options: {
                className: 'Avatar__img',
            }
        });
        this.width = this.avatar.scrollWidth;
        this.content.append(this.avatar);
        this.content.className = 'Avatar__container';

        this.input = this.createComponent(FormControl, this.content, {
            id: 'avatar-url-input',
            label: 'URL нового изображения',
            placeholder: 'Введите URL',
            className: 'Avatar__url-input'
        });

        this.submitBtn = createElement({
            tagName: 'button',
            options: {
                className: 'Avatar__submit-btn btn btn-outline-primary'
            }
        });
        this.submitBtn.textContent = 'Применить';
        this.footer.append(this.submitBtn);
        this.addEventListener(this.submitBtn, EVENTS.CLICK, () => {
            this.submit();
        });

        this.addSubscribe(this.input, 'input', (evt) => {
            this.url = evt.currentTarget.value;
            this.changeAvatar(this.url);
        });

        this.init();
    }

    changeAvatar (url) {
        this.avatar.style.backgroundImage = `url(${url})`;
    }

    init = async () => {
        const user = await usersServiceApi.getSelfInfo();
        this.changeAvatar(this.url || user.avatar);
    }

    openEditor () {
        this.show();
    }

    submit = async () => {
        if (this.url) {
            await usersServiceApi.setAvatar(this.url);
            userInfoService.setUserLogin();
            this.hide();
        } else {
            this.input.input.placeholder = 'Вы не ввели URL';
        }

    }
}
export default AvatarModal;