$(document).ready(function () {
    
    // ### Клики мышью (click, dbclick)
    $('h2').click(function () {
        // Способ 1:
        alert('Ты кликнул по заголовку')
        // Способ 2:
        // В браузере ·· RightClickMenu>Просмотреть код>Console
        console.log('Ты кликнул по заголовку')
        
    });
});

$(document).ready(function () {
    
    // ### Клики мышью (click, dbclick)
    // Двойной клик и заголовок станет синий.
    $('h2').dblclick(function () {
        $(this).toggleClass("blue");

    });
});

$(document).ready(function() {

  // ### Полёты над элементом (mouseenter, mouseleave и т.д.)
  // Можем отловить событие, которое будет окрашивать элемент в синий цвет при наведении курсора:
  $('h2').mouseenter(function() {
    $(this).toggleClass("blue");
  });
  // Если добавить mouseleave - то цвет будет меняться на свой.
  $('h2').mouseenter(function() {
    $(this).toggleClass("blue");
    
  });
});

$(document).ready(function() {

  // ### Формы (focus, change и т.д.)
  // input - текстовое поле для ввода; focus - то есть поместили курсор в область этого поля.
  $('input').focus(function() {
    // Ещё можно присваивать какие то классы, значения, менять стиль элементов но в качестве примера выберем - console.
    console.log("Поле в фокусе");
    
  });
});

$(document).ready(function() {

  // ### Формы (focus, change и т.д.)
  // change - если изменяем что то в этом поле. Пользователь ввел своё имя и поле потеряло статус focus
  $('input').change(function() {
      
    // <form action="#">
    //    <input type="text" placeholder="Введи своё имя">
    //    <p>Приветствую тебя<span id="userName"></span>!</p>
    // </form>

    $("#userName").text(", " + $(this).val()); // В итоге получим "Приветствую тебя, Артём !"

  });
});

$(document).ready(function() {

  // ### Клавиатура (keypress, keydown, keyup)
  // keypress или keydown - будет считывать нажатие клавиш (при нажатии).
  // keyup - будет считывать нажатие клавиш (при отпускании, то есть последняя буква будет считана тоже).
  $("input").keyup(function() {
    $("#userName").text(", " + $(this).val());
    
  });
});

$(document).ready(function(){
    
// ### Можем выделить все теги p, h2, h1 и т.д. c обводкой.
$('p').css('border', 'solid 3px red');

// Чтобы обратиться к конкретному элементу (p.blue, #id)
//p - это тэг который имеет клас .lead
$('p.lead').css('border', 'solid 3px red');

});

$(document).ready(function(){
    
// ### Селекторы взаимодействия (parent, child, + ~ и т.д.)
// Внутри тэга body находятся тэги h2.
$('body h2').css('border', 'solid 3px red');

// Определяем тэг h2 + его сестренский элемент (ближайший).
$('h2 + p').css('border', 'solid 3px red');

// Все тэги которые находятся рядом с h2 (сестринские элементы).
$('h2 + ~').css('border', 'solid 3px red');

//Определить родительский элемент.
$('h2').parent().css('border', 'solid 3px red');

});

$(document).ready(function(){
    
// ### Простые фильтры (:first, :last, even, odd, eq и т.д.)
// То есть выделить первый, последний, чётный и т.д.
$('p:first').css('border', 'solid 3px red');

// eq - обращение к конкретному пункту (начиная с 0 - обращаемся к каждому эл-у):
$('p:eq(0)').css('border', 'solid 3px red');

});

$(document).ready(function(){
    
// ### Фильтры по содержимому (:has, :parent, :empty и т.д.)
// Например у нас 2 тэга h2 а нам нужен тот который содержит в себе span.
$('h2:has(span)').css('border', 'solid 3px red');

// Выделяем только те box-ы которые содержат в себе какие то элементы (то есть выделятся родители а пустой box выделен не будет).
$('.box:parent').css('border', 'solid 3px red');

// Выделяем только пустой элемент.
$('.box:empty').css('border', 'solid 3px red');

});

$(document).ready(function(){
    
// ### Фильтры по атрибутам ([name ~= value] и т. д.)
// Выделять элементы форм,ссылки или картинки.
// В данном примере выделится тот текст который содержит в себе ссылку: 
$('a[href="http://google.com"]').css('border', 'solid 3px red');

// Выделить ту которая не содержит "!=" ссылку на google.com
$('a[href!="http://google.com"]').css('border', 'solid 3px red');

// Выделить те ссылки которые начинаются с http.
$('a[href^="http"]').css('border', 'solid 3px red');

// Выделить те ссылки значения которых заканчивается на ru.
// Знак "$" или "*" - означает что ссылка заканчивается именно на этот символ (то есть ru, можно даже искать 1 букву в слове, например "r").
$('a[href$=".ru"]').css('border', 'solid 3px red');

});

$(document).ready(function( ){
	// Тут уже можем обращаться к элементу...
	$('#id')
});

// Более котортая запись...
$(function(){
    // code...
});

export default <T extends {}>(array: T[], fromIndex: number, toIndex: number) => {
    array.splice(toIndex, 0, array.splice(fromIndex, 1)[0])
}

// Usual
export default class HttpRequestError extends Error {
  constructor(public error: { status: number }) {
    super();
  }
}

// Nice way
interface IHttpStatus {
  status: number;
}

export default class HttpRequestError extends Error {
  constructor(public error: IHttpStatus) {
    super();
  }
}

// Tipos Genéricos: 

/*
    Garantir que iremos trabalhar com objetos do mesmo tipo
    Modifica a interface de acordo com a implementação
*/

interface Comparable<T> {
    age: number; 
    compareAges(obj: T): boolean; 
}

class User implements Comparable<User> {
    age: number; 

    compareAges(obj: User) {
        return (this.age == obj.age) ? true : false; 
    }
}

// Interfaces TypeScript

interface Person {
    name: string; 
    setName(name:string): void;
    verifyEven(value:number): boolean;  
}

class Foo implements Person {
    name: string; 
    age: number; 

    constructor(name:string, age:number = 18) {
        this.name = name; 
        this.age = age; 
    }

    setName(name:string) {
        this.name = name; 
    }

    getName() {
        return this.name; 
    }

    verifyEven(v:number):boolean {
        return (v % 2 == 0) ? true : false; 
    }

}

const foo = new Foo("Fabricio", 19);
foo.verifyEven(3); 
foo.getName(); 

const numbers = [1,2,3,4, "fab"]; 
const numbersT:number[] = [1,2,3,4, "fab"]; // reclama da string;  


// Array de objetos implementado interface: 
// isso é mt fofo 

interface Person {
    name: string; 
    age: number; 
}

const friends:Person[] = [
    {name: "Ana", age: 19},
    {name: "Joao", age: 31}, 
    {name: "Mateus", age: 27} 
]; 

const compareAges = (a:Person, b:Person) => {
    if (a.age == b.age)
        return 0; 
    return (a.age > b.age) ? 1 : -1; 
}

import { css } from 'styled-components'

type MediaQuery = {
  [key: string]: string
}

const mediaQuery: MediaQuery = {
  desktop: 'min-width:1025px',
  tablet: 'max-width:1024px',
  mobile: 'max-width:750px'
}

type AccArguments = (literals: TemplateStringsArray, ...placeholders: any[]) => string

export const media = Object.keys(mediaQuery).reduce(
  (acc, label) => {
    acc[label] = (literals: TemplateStringsArray, ...placeholders: any[]) =>
      css`
        @media (${mediaQuery[label]}) {
          ${css(literals, ...placeholders)};
        }
      `.join('')
    return acc
  },
  {} as Record<keyof typeof mediaQuery, AccArguments> & { [key: string]: AccArguments }
)

export const useModal = () => {
  const [isShowing, setIsShowing] = useState(false);
  // instead function declaration (or expression)
  function toggle() {
    setIsShowing(!isShowing);
  }


  return {
    isShowing,
    toggle: () =>  setIsShowing(!isShowing), // we can move it to return, it's looks nicer
  };
};

// 参考: https://qiita.com/yamikoo@github/items/5dbcc77b267a549bdbae
export function zenkakuToHankaku(str: string): string {
  return str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, (s) => {
    return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
  });
}