Cursor Pet

import whatInput from 'what-input';

import Component from '../component/component';
import Helpers from '../helpers/helpers';

import './cursor-pet.scss';

import MouseMoveEvent = JQuery.MouseMoveEvent;
import MouseEnterEvent = JQuery.MouseEnterEvent;

interface ICursorPetSettings {
    close: string,
    darkClass: string,
    drag: string,
    hoverClass: string,
    modalClass: string,
    view: string,
    textClass: string,
}

export default class CursorPet extends Component {
    static initSelector: string = '.cursor-pet';

    public mouseX: number;
    public mouseY: number;
    public label: JQuery;
    public targets: string;

    settings: ICursorPetSettings;

    constructor(element: HTMLElement) {
        super(element);

        this.settings = $.extend({
            close: '',
            darkClass: 'is-dark',
            drag: '',
            hoverClass: 'is-hover',
            modalClass: 'is-modal',
            textClass: 'is-text',
            view: '',
        }, this.element.data());

        this.mouseMove = this.mouseMove.bind(this);
        this.mouseEnter = this.mouseEnter.bind(this);
        this.mouseLeave = this.mouseLeave.bind(this);

        this.label = $('.cursor-pet__label');
        this.targets = '.button, button, a, .textfield, .gallery-slider';

        this.init();
    }

    init(): void {
        $(window).on('resize', this.resizeHandler.bind(this));
        window.dispatchEvent(new Event('resize'));

        window.requestAnimationFrame(this.setPetPosition.bind(this));
        $(window).on('load', this.inputConfirmation.bind(this));
    }

    resizeHandler(): void {
        if (!Helpers.isMobileDevice && $(window).width() >= Helpers.bp.md) {
            this.element.removeClass('h-hidden');
            $(window).on('mousemove', this.mouseMove);
            $(this.targets).on('mouseenter', this.mouseEnter);
            $(this.targets).on('mouseleave', this.mouseLeave);
        } else {
            this.element.addClass('h-hidden');
            $(window).off('mousemove', this.mouseMove);
            $(this.targets).off('mouseenter', this.mouseEnter);
            $(this.targets).off('mouseleave', this.mouseLeave);
        }
    }

    mouseMove(event: MouseMoveEvent): void {
        this.mouseX = event.clientX;
        this.mouseY = event.clientY;

        if (!$(event.target).closest('[data-theme="dark"]').length && !$('body').hasClass('is-header-open')) {
            if ($(event.target).closest('body:not(.is-header-dark) .header').length) {
                this.element.removeClass(this.settings.darkClass);
            } else {
                this.element.addClass(this.settings.darkClass);
            }
        } else {
            this.element.removeClass(this.settings.darkClass);
        }

        if ($(event.target).closest('.modal-container').length && !$(event.target).closest('.modal').length) {
            this.element.addClass(this.settings.hoverClass);
            this.label.text(this.settings.close);
            this.element.addClass(this.settings.textClass);
            this.element.addClass(this.settings.modalClass);
        } else if ($(event.target).closest('.modal').length) {
            this.element.removeClass(this.settings.hoverClass);
            this.label.text('');
            this.element.removeClass(this.settings.textClass);
            this.element.removeClass(this.settings.modalClass);
        }
    }

    mouseEnter(event: MouseEnterEvent): void {
        this.element.addClass(this.settings.hoverClass);

        if ($(event.target).closest('.solution').length || $(event.target).closest('.case-study').length) {
            this.label.text(this.settings.view);
            this.element.addClass(this.settings.textClass);
        }

        if ($(event.target).closest('.gallery-slider').length) {
            this.label.text(this.settings.drag);
            this.element.addClass(this.settings.textClass);
        }
    }

    mouseLeave(): void {
        this.element.removeClass(this.settings.hoverClass);
        this.element.removeClass(this.settings.textClass);
        this.label.text('');
    }

    setPetPosition(): void {
        this.element.css('transform', 'translate3d('+ this.mouseX + 'px,' + this.mouseY + 'px, 0)');

        window.requestAnimationFrame(this.setPetPosition.bind(this));
    }

    inputConfirmation(): void {
        if (whatInput.ask() === 'touch'){
            this.element.addClass('h-hidden');
        } else if (whatInput.ask() === 'keyboard' || whatInput.ask() === 'mouse') {
            this.element.removeClass('h-hidden');
        }
    }
}