const tag = '[View]'

export default {

  // init은 el(element)를 주입받음.
  init(el) {
    if (!el) throw el
    // el을 자신의 property로 받게됨
    this.el = el
    return this
  },

  // On: 특정 이벤트에 대한 행동을 정의함. 이벤트와 핸들러를 같이 인자로 받음. 
  on(event, handler) {
    // 현재 가지고 있는 엘레멘트에서 특정 이벤트가 발생했을 때 handler가 실행되도록하는 역할
    // handler: vue를 사용 시, vue에서 나온 이벤트를 어떻게 핸들링 할 것인가를 위해서 사용을 한 것
    this.el.addEventListener(event, handler)
    return this
  },

  // Emit: 스스로 이벤트를 방출하는 기능을 함. 이벤트와 데이터를 인자로 받음.
  emit(event, data) {
    // customEvent는 첫번째 인자로 event 이름을 받고, 
    // 2번째 인자로 디테일 키를 갖고 있는 데이터 객체를 받음
    const evt = new CustomEvent(event, { detail: data })
    
    // HTML el(element)에는 dispatchEvent라는 메서드가 있음. 인자로 방금 만든 evt 객체를 넘겨줌.
    // 이를 통해 el는 이벤트를 방출함.
    this.el.dispatchEvent(evt)
    return this
  },

  // css 
  hide() {
    // css 속성 중 display 값이 none으로 주면 hide가 됨
    this.el.style.display = 'none'
    return this
  },

  show() {
   	// css 속성 중 display 값을 주지않으로 주면 show
    this.el.style.display = ''
    return this
  }
}

export default {
  // 데이터를 collecction의 형태로 갖고 있음.
  // keyword: 검색어, data: 검색날짜
  data: [
    { keyword: '검색기록2', date: '12.03' },
    { keyword: '검색기록1', date: '12.02'},
    { keyword: '검색기록0', date: '12.01' },
  ],

  // ㅣist 메서드는 데이터를 return 해줌. 특별하게는 Promise 패턴을 이용함. return this.data를 하지 않고 Promise 패턴을 사용한 이유는 history 모델의 경우 서버에서 비동기로 갖고 오는 경우도 있고, 쿠키로도 데이터를 얻을 수도 있기 떄문에 공통적으로 사용하기 위해 Promise 패턴 사용
  list() {
    return Promise.resolve(this.data)
  },
  
 // 추가될 검색어를 받아(keyword='') 실제 데이터가 데이터에 있는지를 체크한 후, 있으면 삭제, 다시 날짜를 산정하여 기존데이터와 합쳐서 추가하는 기능
  add(keyword = '') {
    keyword = keyword.trim()
    if (!keyword) return 
    if (this.data.some(item => item.keyword === keyword)) {
      this.remove(keyword)
    }

    const date = '12.31'
    this.data = [{keyword, date}, ...this.data]
  },
  
 // keyword를 받아서 그 키워드에 해당하는 것들을 삭제하는 기능
  remove(keyword) {
    this.data = this.data.filter(item => item.keyword !== keyword)
  }
}

export default {
  // 데이터를 콜렉션의 형태로 갖고 있음. keyword만 갖고 있음.
  data: [
    {keyword: '이탈리아'}, 
    {keyword: '세프의요리'}, 
    {keyword: '제철'}, 
    {keyword: '홈파티'}
  ],

  // 리스트 메서드만 갖고 있음. Promise 패턴을 이용. setTimeout을 이용하여 200ms 이후 데이터를 반환하도록 구현
  list() {
    return new Promise(res => {
      setTimeout(() => {
        res(this.data)
      }, 200)
    })
  }
}

const data = [
  {
    id: 1,
    name: '[키친르쎌] 홈메이드 칠리소스 포크립 650g',
    image: 'https://cdn.bmf.kr/_data/product/H1821/5a4ed4e8a6751cb1cc089535c000f331.jpg'
  },
  {
    id: 2,
    name: '[키친르쎌] 이탈리아 파티 세트 3~4인분',
    image: 'https://cdn.bmf.kr/_data/product/H503E/300d931e3b8252ed628b6a3c2f56936b.jpg'
  }
]

export default {
  // 리스트 메서드에 쿼리를 인자로 받아 쿼리에 해당하는 데이터를 return 하도록 코드 구현
  // setTimeout을 이용하여 200ms 이후 데이터를 반환하도록 구현
  list(query) {
    return new Promise(res => {
      setTimeout(()=> {
        res(data)
      }, 200);
    })
  }
}

// MainController.js
const tag = '[MainController]'

export default {
    init() {
        console.log(tag, 'init()')
    }
}

//app.js
import MainController from './controllers/MainController.js'

document.addEventListener('DOMContentLoaded', ()=>{
    MainController.init()
})