import $ from 'jquery';
import slugify from 'slugify';

export const main = () => {
    // Обработчик выбора пола
    let genderInput = $('#gender')

    $('div.js-select-option[data-gender-option]').on('click', function (e) {
        e.preventDefault();
        const currentGender = $(this).attr('data-gender');
        $('[data-gender]').removeClass('active');
        $(`[data-gender=${currentGender}]`).addClass('active');
        genderInput.val(currentGender)
    });

    $('#user-photo-upload').change(file => {
        const input = file.target;

        const reader = new FileReader();
        reader.onload = () => {
          const dataURL = reader.result;
          const output = document.getElementById('photo');
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
    });

    const $slug = $('#user-slug');
    const changeSlug = () => {
        const fName = $('#user-first-name').val();
        const lName = $('#user-last-name').val();
        $slug.val(slugify(`${fName} ${lName}`));
    }

    if(! $slug.data('current-slug')){
        $('#user-first-name').change(changeSlug);
        $('#user-last-name').change(changeSlug);
        $slug.change(() => {
            $('#user-first-name').unbind('change', changeSlug);
            $('#user-last-name').unbind('change', changeSlug);
        });
        changeSlug();
    }

    $('#referrer-url').select().click(function(){
        $(this).select();
    });
}