setTimeout(()=>{
  console.log('hello async')
});
console.log('hello')

// hello
// hello async

function printImmediately(print) {
  print();
}
// 콜백 함수
printImmediately(() => console.log('hellop'));

function printWithDelay(print, timeout){
  setTimeout(print, timeout);
}
printWithDelay(() => console.log('async callback'), 2000);

class UserStorage{
  loginUser(id, password, onSuccess, onError){
    setTimeout(() => {
      if(
        (id === 'ellie' && password === 'dream') ||
        (id === 'coder' && password === 'academy')
      ){
        // 성공하면 id 를 인수로 넘겨 onSuccess 함수 실행
        onSuccess(id);
      } else {
        onError(new Error('not found'));
      }
    }, 2000);
  }

  getRoles(user, onSuccess, onError) {
    setTimeout(() => {
      if(user === 'ellie'){
        onSuccess({name: 'ellie', rold: 'admin'});
      } else {
        onError(new Error('no access'));
      }
    }, 1000)
  }
}

// 사용자에게 id, password 입력 받아오기

// 1. 서버에게 loginUser 함수로 로그인 요청. 만일 성공한 경우
// 2. id를 인자로 넘겨준 onSuccess 함수 실행.
// 3. onSuccess 함수에서는 getRoles 함수로 권한을 요청
// 4. 성공한다면 사용자 이름과 권한 출력
const UserStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your password');

UserStorage.loginUser(
  id,
  password,
  user => {
    //success
    UserStorage.getRoles(
      user,
      userWithRole =>{
        // success
        // 넘겨준 user인자가 ellie가 맞다면 성공!
        // 성공적으로 받은 {name: 'ellie', rold: 'admin'} 인자에서 이름과 권한을 꺼내 출력합니다.
        alert(`Hello ${userWithRole.name}, you have a ${userWithRole.role} role`);
      },
      error => {
        // 넘겨준 user인자가 ellie가 아니라면 에러!
        console.log(error);
      }
    )
  },
  error => {
    console.log(error)
  }

// [1] Producer
// 1. promise는 클래스 이므로 객체로 생성할 수 있습니다.
// 2. 또한 처리 성공 시 호출되는 resolve, 실패 시 호출되는 reject 콜백 함수가 존재합니다.
// 3. Promise를 생성한 순간 즉시 실행 되어 doing something...이 바로 표시된다.
// 4. 3번의 이유로 실행 시점을 잘 유의해야하죠.
const promise = new Promise((resolve, reject) => {
  // 로직 처리. 서버에서 파일을 읽어오는 등. 헤비한 작업은 비동기적으로 수행해야한다.
  console.log('doing something...');

  // 네트워크 통신을 예로 서버의 데이터를 기다리는 시간? 을 구성해보기위해
  // setTimeout함수를 사용해보겠습니다.
  setTimeout(() => {
    // 성공한 경우 서버는 ellie와 같이 가공된 데이터를 응답과 동시에 데이터를 동봉하여 보낸다.
    // 아래 Consumer에 1. then에서 해당 데이터 사용 가능
    resolve('ellie');

    // Error 클래스는 자바스크립트가 제공하는 일종의 클래스 주로 에러 핸들링으로 사용
    // 아래 Consumer에 2. catch에서 해당 데이터 사용 가능
    reject(new Error('no network'));
  }, 2000);
})

// [2] Consumer: then, catch, finally

promise
  // 1. then : 위 promise 객체에서 정상적으로 수행이 되었다면(resolve) then메서드로 행동을 취할 수 있다.
  .then((value) => {
    // resolve 에 전달된, 즉 서버에서 보낸 데이터 ellie가 value로 들어온다.
    console.log(value); // ellie
  })
  // 2. catch : 위 promise 객체에서 처리 과정 중 실패했다면(reject) catch메서드로 행동을 취할 수 있다
  .catch(error => {
    console.log(error);
  })
  // 3. finally : 위 promise 처리 과정이 끝나면 마지막에 수행 (성공, 실패 유무 X)
  .finally(() => {
    console.log('finally');
  })

// [3] Promise chaining 또한 then, catch, finally 등 점표 . 을 통해 체이닝할 수 있습니다.
// 즉 동시에 관리하는거죠.
const fetchNumber = new Promise((resolve, reject) => {

  // 서버 통신 기다리는 중... 의 예시로 사용하는 setTimeout 입니다.
  setTimeout(() => resolve(1), 1000);
})

fetchNumber
  // 1. 첫번째 then : 위 promise 객체 fetchNumber 의 resolve시 서버로부터 전달 받은 데이터 1을 num에 가져옵니다.
  .then(num => num * 2)
  // 2. 두번째 then : 위 then 에서 num * 2 값, 즉 2를 가져옵니다.
  .then(num => num * 3)
  // 3. 세번째 then : 위 then 에서 num * 3 값, 즉 6을 가져옵니다.
  // 또한 안에서 또 서버와 통신을 할 비동기 객체 Promise를 생성합니다.
  .then(num => {
    return new Promise((resolve, reject) => {
      // 서버 통신 기다리는 중... 의 예시로 사용하는 setTimeout 입니다.
      setTimeout(() => resolve(num - 1), 1000);
    });
  })
  // 4. 네번째 위 세 번째 then의 resolve의 결과 5를 받습니다.
  // 위 5라는 값은 서버에서 보내준 데이터라고 생각합시다.
  .then(num => consooe.log(num)); // 5

// [4] 오류 처리하기
const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('🦕'), 1000);
  });
  // 닭을 받아와서 알을 낳도록 할꺼예요.
const getEgg = hen =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${hen} => 🥚`), 1000);
  });
  // 낳은 알로 프라이 할겁니다.
const cook = egg =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => 🍳`), 1000);
  });

getHen() // 결과는 3초 뒤에 보일거예요.
  .then(getEgg) // hen => getEgg(hen)를 이렇게 생략할 수 있어요. 단 넘어온 인자가 한 개인 경우!
  .then(cook) // egg => cook(egg)
  .then(console.log) // meal => console.log(meal)
  // 🦕 => 🥚 => 🍳

// [4] 오류 처리하기
const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('🦕'), 1000);
  });
  // 닭을 받아와서 알을 낳도록 할꺼예요.
const getEgg = hen =>
  new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error(`error! ${hen} => 🥚`)), 1000);
  });
  // 낳은 알로 프라이 할겁니다.
const cook = egg =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => 🍳`), 1000);
  });

getHen() // 결과는 3초 뒤에 보일거예요.
  .then(getEgg)
  .catch(error => {
    // 위 then 과정에서 에러가 발생하면 잘 가공해서 빵을 던져줍니다.
    // 그럼 아래 then도 정상적으로 수행될거예요. 에러가 어쨌든 getEgg에서 나긴 했지만
    // 지금 catch로 잘 가공해줬거든요.
    return '🥐';
  })
  .then(cook)
  .then(console.log)
  // 🥐 => 🥚
  // 빵이 대신 전달 됐어요. 아래 catch는 이제 안봐도 되겠네요
  .catch(console.log)
  // error! 🦕 => 🥚 at

// [5] 콜백 지옥 없애기
class UserStorage{
  loginUser(id, password){ // onSuccess, onError 제거! Promise객체가 대신 할 것임.
    return new Promise((resolve, reject) =>{
      setTimeout(() => {
        // 서버에 데이터 요청 중 ...
        if(
          (id === 'ellie' && password === 'dream') ||
          (id === 'coder' && password === 'academy')
        ){
          // 서버로부터 응답이 성공적으로 전달되었다.
          resolve(id);
        } else {
          // 서버로부터 응답이 비정상적으로 전달되었다.
          reject(new Error('not found'));
        }
      }, 2000);
    })
  }

  getRoles(user) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // 서버에 데이터 요청 중 ...
        if(user === 'ellie'){
          // 서버로부터 응답이 성공적으로 전달되었다.
          resolve({name: 'ellie', rold: 'admin'});
        } else {
          // 서버로부터 응답이 비정상적으로 전달되었다.
          reject(new Error('no access'));
        }
      }, 1000)
    });
  }
}

const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your password');

// 콜백 지옥의 해결
userStorage
  .loginUser(id, password)
  .then(userStorage.getRoles) // userStorage.getRoles(user) 축약!
  .then(user => alert(
    `Hello ${user.name}, you have a ${user.role}`));
  .catch(console.log);

// 콜백 지옥의 잔해
// userStorage.loginUser(
//   id,
//   password,
//   user => {
//     //success
//     userStorage.getRoles(
//       user,
//       userWithRole =>{
//         // success
//         // 넘겨준 user인자가 ellie가 맞다면 성공!
//         // 성공적으로 받은 {name: 'ellie', rold: 'admin'} 인자에서 이름과 권한을 꺼내 출력합니다.
//         alert(`Hello ${userWithRole.name}, you have a ${userWithRole.role} role`);
//       },
//       error => {
//         // 넘겨준 user인자가 ellie가 아니라면 에러!
//         console.log(error);
//       }
//     )
//   },
//   error => {
//     console.log(error)
//   }

// Promise
function fetchUser() {
  return new Promise((resolve, reject) => {
    resolve('ellie');
  })
}

const user = fetchNumber(); // 비동기로 처리하지 않는다면 사용자 데이터를
                            // 가지고오는데 10초가 걸리기 때문에 다음 코드가 10초간 동작을 못함.
                            // 비동기로 적용해야함!
user.then(console.log);
console.log(user)

// 비동기 처리 X
function fetchUser() {
  // 네트워크 통신으로 백엔드로부터 데이터를 가져오는 코드가 있다고 가정 ...
  // 10초 뒤에 백엔드로부터 데이터를 받는다.
  return 'ellie'; // 백엔드로부터 보내져 온 데이터를 반환
}

const user = fetchNumber(); // 비동기로 처리하지 않는다면 사용자 데이터를
                            // 가지고오는데 10초가 걸리기 때문에 다음 코드가 10초간 동작을 못함.
                            // 비동기로 적용해야함!
console.log(user);

// 1. async
async function fetchUser() {
  // 네트워크 통신으로 백엔드로부터 데이터를 가져오는 코드가 있다고 가정 ...
  // 10초 뒤에 백엔드로부터 데이터를 받는다.
  return 'ellie'; // 백엔드로부터 보내져 온 데이터를 반환
}

const user = fetchNumber(); // fetchNumber 함수 앞에 async 키워드를 붙여
                            // Promise로 변환
user.then(console.log); // Promise {} 
console.log(user); // ellie

// 2. await
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple(){
  // 통신이 완료되기를 기다려.. await
  await delay(1000);
  return '🍎';
}
🍌
async function getBanana(){
  await delay(1000);
  return '🍌';
}

async function pickFruits(){
  // 아래는 await 구문이 2개 존재하네요..? 바나나는 애플이 완료되기까지 실행이 안되나요?
  // 맞습니다. 아래 1번의 경우 총 2초가 소요됩니다.

  // 1. 잘못된 사용
  // 통신이 완료되기를 기다려.. await
  // const apple = await getApple();
  // 통신이 완료되기를 기다려.. await 응답이 올때까지 기다림 ...
  // const banana = await getBanana();

  // 2. 올바른 사용
  // async가 붙은 함수의 경우 Promise로 변환됩니다.
  // 이제 아래 구문에서 서버 응답을 기다릴 await은 제외하고 async 함수만을 호출해서
  // 병렬적으로 처리할 수 있습니다.
  const applePromise = getApple(); // 사과의 Promise
  const bananaPromise = getBanana(); // 바나나의 Promise
  const apple = await applePromise;
  const banana = await bananaPromise;

  return `${apple} + ${banana}`
}

pickFruits().then(console.log);

function pickAllFruits(){
  return Promise.all([getApple(), getBanana()])
  .then(fruits => fruits.join((' + ')))
}
pickAllFruits().then(console.log);
//(2) 🍎 + 🍌

function pickOnlyOne(){
  return Promise.race([getApple(), getBanana()]);
}

// 응답을 더 빨리 받은 바나나를 출력합니다.
pickOnlyOne().then(console.log);
// 🍌