const promiseTest1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, "Test Pass");
});

// setInterval(console.log, 1000, promiseTest1);
promiseTest1.then((value) => console.log(value));

const promiseTest1 = new Promise((resolve, reject) => {
  setTimeout(reject, 3000, "Test Fail");
});

// setInterval(console.log, 1000, promiseTest1);
promiseTest1
  .then((value) => console.log(value))
  .catch((error) => console.log(error));

const promiseTest2 = new Promise((resolve, reject) => {
  resolve(2);
});

promiseTest2
  .then((number) => {
    console.log(number * 2);
    return number * 2;
  })
  .then((otherNumber) => console.log(otherNumber * 2)); 

/**
 * Promise.all
 */
const p1 = new Promise((resolve) => {
  setTimeout(resolve, 5000, "first");
});

const p2 = new Promise((resolve) => {
  setTimeout(resolve, 1000, "second");
});

const p3 = new Promise((resolve) => {
  setTimeout(resolve, 3000, "third");
});

const motherPromise = Promise.all([p1, p2, p3]);

motherPromise
  .then((values) => console.log(values))
  .catch((err) => console.log(err));

// 모든 프로미스가 resolve 해야지 출력
// 5초후 마지막 first 끝나야 최종출력
// 중간에 reject 뜨면 바로 중단

/**
 * Promise.race
 */
 const motherPromise2 = Promise.race([p1, p2, p3]);

 motherPromise2
   .then((values) => console.log(values))
   .catch((err) => console.log(err));

// second

/**
 * Finally
 */
const p1 = new Promise((resolve) => {
  setTimeout(resolve, 3000, "first");
})
  .then((value) => console.log(value))
  .finally(() => console.log("I'm done"));

const friends = ["me", "you", "nico"];

const addHeart = (current, index, array ) => ( console.log(current, index, array));

friends.forEach(addHeart);
	// 파라미터 첫번째로 값을 주고 두번째로 인덱스를 주고 세번째로 현재 배열을 준다
	// me 0 ["me", "you", "nico"]
	// you 1 ["me", "you", "nico"]
	// nico 2 ["me", "you", "nico"]

for (const friend of friends) {
  // 장점 1) const, let 뭐로 할건지 결정가능, forEach에서는 안됨
  console.log(friend); // 모두다 출력됨
}

for (const char of "strings") {
  console.log(char); // s t r i n g s 출력
}
// 장점 2) iterable한 모든것에서 작동한다

for (const friend of friends) {
  if (friend === "steve") {
    break;
  } else {
    console.log(char); // "me", "you", "nico" 이렇게만 출력
  }
}
// 장점 3) 루프를 멈출수가있음!, 최고장점

/**
 * Spread
 */
const friends = [1, 2, 3, 4];

console.log(friends); // [1, 2, 3, 4]
console.log(...friends); // 1 2 3 4

const family = ["a", "b", "c"];
console.log(friends + family); // 1,2,3,4a,b,c
console.log([friends, family]); // [ [ 1, 2, 3, 4 ], [ 'a', 'b', 'c' ] ]
console.log([...friends, ...family]); // [ 1,   2,   3,   4, 'a', 'b', 'c' ]
// spread를 통해 모든 요소를 담고 있는 하나의 object를 얻을 수 있다.
// array.push()를 이용하지 않고 값을 추가하여 새로운 객체를 만든다.
const newFriends = [...friends, 5, 6, 7];
console.log(newFriends); // [ 1, 2, 3, 4, 5, 6, 7]

const admin = {
  username: "admin",
};
console.log({ ...admin, password: 123 }); // { username: 'admin', password: 123 }
// 조건식
// lastName을 입력받았을 때 값이 있을 때만 객체에 넣어주기
const lastName = prompt("Last name: ");
const person = {
  username: "person",
  age: 24,
  ...(lastName !== "" && { lastName }), // spread로 전개하려면 데이터가 object여야하므로, 중괄호로 감싸줌
  //   lastName: lastName !== "" ? lastName : undefined,
};
console.log(person);

const infiniteArge = (...kimchi) => console.log(kimchi);

infiniteArge("1", 2, true, "lalala", [1, 2, 3, 4]);
// 전부 배열에 넣어서 출력된다.

const bestFriends = (firstPotato, ...potatos) => {
	console.log(`he is ${firstPotato}`);
	console.log(potatos);
}

bestFriends("nico", "lynn", "steve", "flynn");
// he is nico
// ["lynn", "steve", "flynn"]
// 이렇게 출력된다

const user = {
	name :"nico",
	age:24,
	password : 12345
};

const killPassword = ({password, ...rest}) => rest; // destructure + rest
// destructuring을 통해 user의 password를 가져오고, 나머지를 rest에 저장

const cleanUser = killPassword(user)
console.log(cleanUser) // {name:"nico", age:24} 출력한다

const setCountry = ({ country = "KR", ...rest }) => ({ country, ...rest });
// default 설정 + rest + spread

console.log(setCountry(user));

// {country : "KR", name :"nico", age:24, password : 12345} 출력

/**
 * Object Destructuring
 */
const settings = {
  notifications: {
    follow: true,
    alerts: true,
    unfollow: false,
  },
  color: {
    theme: "dakr",
  },
};

if (settingss.notifications.follow) {
  // send email
}

// 기존에는 위와 같이 사용했다. 보기에 매우 불편하다.
// 만약 follow라는 값이 없느면 undefined오류가 발생할 것이다.

// 기본적으로 settings를 열어 notifications에 접근하여 follow를 가져오는 것

const { notifications: { follow = false } = {}, color } = settings;
// settings에 notifications가 없으면 {}, notifications에 follow가 없으면 false로
// default 값 세팅을 해준다.

console.log(follow); // true
console.log(color); // { theme: 'dark' }

// 이 때 notifications는 변수가 아님 -> notifications를 console.log에 찍으면 is not defined 오류 발생
// 이런 방식은 큰 Object에서 특정 변수나 그 안에 속한 작은 Object에 접근할 수 있도록 해주는 것
// 

/**
 * Array Destructuring
 */
const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

const [mon, tue, wed, , , , sun, aaa = "AAA"] = days; // ,,,은 skippin

// mon 에는 "Mon" , tue에는 "Tue", wed 에는 "Wed" sun에는 "Sun"이 들어가있음
// aaa는 AAA
console.log(sun);

/**
 * Renaming
 */

const settings = {
  color: {
    chosen_color: "dark",
  },
};

const {
  color: { chosen_color: chosenColor = "light" },
} = settings;
// :를 붙혀 새로운 변수를 생성하고 그 변수에 값을 담는다.

-----------------

let chosenColor = "blue"; // 변수가 미리 있다면

console.log(chosenColor); // blue

({
  color: { chosen_color: chosenColor = "light" },
} = settings);
// 위와 같이 적어 이미 정의가 되어있는 choseColor의 값을 업데이트한다.

console.log(chosenColor); // dark

/**
 * Function Destructuring
 */
function saveSettings(followAlert, unfollowAlert, mrkAlert, themeColor) {} // argument가 너무 길다

function saveSettings({ follow, alert, color = "blue" }) {
  console.log(color); // green
}

saveSettings({
  follow: true,
  alert: true,
  mkt: true,
  color: "green",
});

----------- 더 간단히..

function saveSettings({ notifications, color: { theme = "blue" } = {} }) {
  console.log(theme); // blue
}

saveSettings({
  notifications: {
    follow: true,
    alert: true,
    mkt: true,
  },
  //   color: { theme: "green" },
});

const follow = checkFollow();
const alert = checkAlert();

const settings = {
  notifications: {
    follow: follow,
    alert: alert,
  },
};

// 위 아래 같다. key와 value가 같다면...

const settings = {
    notifications:{
        follow,
        alert
    }
}

// Array.of()
const alphabet = ["a", "b", "c", "d"];
const alphabet = Array.of("a", "b", "c", "d")const alphabet = Array.of("a", "b", "c", "d", 1, 2, 3);;
console.log(alphabet);

const buttons = document.getElementsByClassName("btn");
console.log(buttons);
// buttons는 Array가 아니기 때문에
// 아래와 같이 forEach를 사용할 수 없다.
buttons.forEach((button) => {
  button.addEventListener("click", () => console.log("I ve been clickeds"));
});
----------------
Array.from(buttons).forEach((button) => {
  button.addEventListener("click", () => console.log("I ve been clickeds"));
});

/**
 * Array.find()
 */
const friends = [
  "[email protected]",
  "[email protected]",
  "[email protected]",
  "[email protected]",
];

const target1 = friends.find((friend) => friend.includes("@yahoo.com"));
// 조건을 넣어주면 forEach를 돌리면서 그에 맞는 값을 리턴해준다
// 찾은 첫번째 값만 반환해준다
// 없으면 undefined반환한다
console.log(target1);

/**
 * Array.findIndex()
 */
const target2 = friends.findIndex((friend) => friend.includes("@yahoo.com"));
// 인덱스가 필요할때!
// 없으면 -1반환한다
console.log(target2);
const userName = friends[target2].split("@")[0];
const email = "yahoo.com";
console.log(`${userName}@${email}`);

if (target2 !== -1) {
  friends.fill("*".repeat(5), target2 + 1);
  // target부터 모든 변수는 다 채울값으로 채워줌
}
console.log(friends);

const sayHi = (aName = "anon") => {
  return "Hello " + aName;
};

==>
/**
* 변수
*/
const sayHi = (aName = "anon") => {
	return `Hello ${aName}`;
}
/**
 * 함수
 */
const add = (a, b) => a + b;
console.log(`hello how are you ${add(6, 6)}`);

const wrapper = document.querySelector(".wrapper");

const addWelcome = () => {
  const div = document.createElement("div");
  const h1 = document.createElement("h1");
  h1.innerText = "Hello";
  div.append(h1);
  wrapper.append(div);
};

setTimeout(addWelcome, 1000);

const addWelcome = () => {
  const div = `
    <div class="hello">
        <h1>Hello</h1>
    </div>
    `;
  wrapper.innerHTML = div;
};

const alphas = ["A", "B", "C", "D"];

const ul = document.createElement("ul");
const list = `
    <h1>Alphabet</h1>
    <ul>
        ${alphas.map(alpha => `<li>${alpha}</li>`).join("")}
    </ul>
    `;
wrapper.innerHTML = list;

/**
 * Cloning Styled Components
 */

const styled = (aElement) => {
  const el = document.createElement(aElement);
  return (args) => {
    const styles = args[0];
    el.style = styles;
    return el;
  };
};

// 아래 코드는 함수를 두변 연속 호출 하는 꼴이기 때문에
// 위 함수에서 클로저로 함수를 또 한번 호출할 필요가 있다.
const title = styled("h1")`
  background-color: red;
  color: blue;
`;

const subTitle = styled("span")`
  color: green;
`;

title.innerText = "We just cloned";
subTitle.innerText = "Styled Components";

document.body.append(title, subTitle);

/**
 * includes()
 */
const isEmail = (email) => email.includes("@");
console.log(isEmail("[email protected]")); // true
console.log(isEmail("myEmail")); // false

/**
 * repeat()
 */
const CC_NUMBER = "6060"; // ************6060로 보여주기
const displayName = `${"*".repeat(10)}${CC_NUMBER}`;
console.log(displayName); // **********6060

/**
 * startsWith(), endsWith()
 */
const name = "Mr. abc";
console.log(name.startsWith("Mr")); // true
console.log(name.endsWith("abc")); // true

function Hello() {
  return "hi";
}
console.log(Hello());

const names = ["kim", "lee", "park"];

const hearts = names.map(function (name) {
  return name + " ❤️";
});
console.log(hearts);

const Hello = () => {
  return "hi";
};
console.log(Hello());

const names = ["kim", "lee", "park"];

const hearts = names.map((name) => {
  return name + " ❤️";
});
console.log(hearts);

const Hello = () => "hi";
console.log(Hello());

const names = ["kim", "lee", "park"];

const hearts = names.map(name => name + " ❤️");
console.log(hearts);

const thisTest = {
  cnt: 0,
  addCnt() {
    this.cnt++;
  },
  addCnt2: () => {
    this.cnt++;
  },
};
console.log(thisTest.cnt); // 0
thisTest.addCnt();
console.log(thisTest.cnt); // 1
thisTest.addCnt2;
console.log(thisTest.cnt); // 1

const sayHi = (aName = "anon") => {
	return `Hello ${aName}`;
}

console.log(sayHi());
console.log(sayHi('chaehyeon'));