import axios from 'axios' // http 통신 도와주는 모듈 
import _uniqBy from 'lodash/uniqBy'

const _defaultMessage = '찾고싶은 영화를 검색해 보세요!!'

export default{
  //모듈화 가능하다는 의미
  namespaced: true, 
  /*
    [ data 형식]
  */
  state: () => ({
    movies: [],
    message: _defaultMessage,
    loading: false,
    theMovie: {}
  }), 
  /*
    [computed 형식]
    state와 연결되기 위해 내부 함수는 매개변수로 state를 받아야 한다.
  */
  getters: {},
  
  /* 
    [methods 형식]
    데이터 수정은 mutations 에서만 가능 => 데이터 수정을 위한 메서드
    즉 mutations는 데이터 변경만을 위한 매서드, 그외 매서드는 actions에서 처리
  */
  mutations:{
    //state 의 데이터를 갱신하는 매서드
    updateState(state,payload){
      //새로운 배열데이터 생성
      Object.keys(payload).forEach(key => {
        state[key] = payload[key]
      })
    },
    resetMovies(state){
      state.movies = [],
      state.message = _defaultMessage,
      state.loading = false
    }
  }, 
  /*
    [methods 형식]
    actions는 기본적으로 비동기로 처리되는 매서드(state를 바로 받아서 처리하지는 못한다.)
    context는 state, getters, mutations를 활용할수 있는 내용 => context를 구조분해 해서 사용할 요소들만 불러온다. 예: {state,commit}
    payload는 searchMovies를 활용할때 인수로 들어온 특정한 데이터 활용
  */
  actions:{
    async searchMovies({state, commit}, payload){
      // state.loading 이 true일 경우 함수 실행 종료
      // 사용자가 searchMovies 함수가 동작중일때 여러번 실행하는 것을 방지
      if(state.loading){
        return
      }

      // 검색 시작되면 메시지 초기화
      // 에러 메시지가 있다면 movieList 컴포넌트에서 movieitem을 출력 안하기 때문에 초기화
      commit('updateState',{
        message:'',
        loading: true //로딩 시작
      })

      try{
        // payload로 전달받은 데이터를 채워 넣는다.
        const res = await _fetchMovie({
          ...payload, page: 1
        }) 
        const {Search, totalResults} = res.data
        //state에 데이터를 넣기 위함
        //commit으로 updateState 연결
        // Search는 omdb에서 받은 영화 정보들, totalResults는 영화 갯수(string 타입)
        // commit 안에 mutations을 작성할때 띄어쓰기 하나도 들어가면 안된다.
        commit('updateState', {
          movies: _uniqBy(Search, 'imdbID')
        })
        // totalResults를 10진법의 숫자로 변환
        const total = parseInt(totalResults, 10) // total => 영화 총 갯수
        // Math.ceil()는 올림 함수
        const pageLength = Math.ceil(total / 10) // pageLength =>  페이지 갯수 
        if(pageLength > 1){
          // page 반복문
          for(let page = 2; page <= pageLength; page += 1){
            // number 가 10일때 요청 x
            // number 가 20일때 요청 1번
            // number 가 30일때 요청 2번
            if(page > (payload.number / 10)){
              break
            }
            //추가 omdbapi 요청
            const res = await _fetchMovie({
              ...payload, page: page
            }) 
            const {Search} = res.data
            // 추가로 commit 
            // 기존에 state 에 있는 movies 값이 덮어씌워지지 않게  새로요청되는 Search 와 함께 구조분해후 새롭게 배열화
            commit('updateState', {
              movies: [...state.movies, ..._uniqBy(Search, 'imdbID')]
            })
          }
        }
      } catch(error){
        commit('updateState', {
          movies: [],
          message : error.message
        })
      } finally{
        commit('updateState',{
          //로딩 끝
          loading: false
        })
      }
    },
    async searchMovieWithId({state, commit}, payload){
      // state.loading 이 true일 경우 함수 실행 종료
      if(state.loading){
        return
      }

      // 로딩 시작
      commit('updateState',{
        theMovie: {},
        loading: true
      })
      
      const { id } = payload
      try{
        const res = await _fetchMovie({
          id: id
        })
        commit('updateState',{
          theMovie: res.data
        })
      } catch(error){
        commit('updateState',{
          theMovie: {}
        }) 
      } finally{
        commit('updateState', {
          loading: false
        })
      }
    }
  } 
}


async function _fetchMovie(payload){
  // netlify의 서버리스 함수로 payload(영화관련 데이터)를 보낸다
  // post 한 이후의 데이터를 반환 할수 있도록 return
  // netlify 호출시 앞에 . 을 붙혀야 한다.
  return await axios.post('/.netlify/functions/movie', payload)
}

//[ node.js 동작환경 ]

//aixos를 받아온다.
const axios = require('axios')
// OMDB API 키 -> .env 파일에 환경변수로 선언됬다.
const OMDB_API_KEY = process.env.OMDB_API_KEY

exports.handler = async function(event){
  //event.body를 네트워크 통신을 통해 받을때 문자 데이터로 받기때문에 이를 객체형식으로 변환해야 한다 -> JSON.parse()
  const payload = JSON.parse(event.body)

  // payload 구조분해
  // search 컴포넌트의 aply()매서드를 통해 전달받은 데이터가 내부로 들어간다.
  const {title, type, year, page, id} = payload
  // url주소는 삼항연산자 를 통해 id 값이 있는 경우 와 없는 경우로 나눠 넣는다. 삼항연산자  ======>   (조건 ? 참일때실행 : 거짓일때실행)
  const url = id 
    ? `https://www.omdbapi.com/?apikey=${OMDB_API_KEY}&i=${id}` //id값이 있을때
    : `https://www.omdbapi.com/?apikey=${OMDB_API_KEY}&s=${title}&type=${type}&y=${year}&page=${page}` //id값이 없을때
  //const url = `https://www.omdbapi.com/?apikey=${OMDB_API_KEY}`

  try{
    const res = await axios.get(url)
    if(res.data.Error){
      return{
        statusCode: 400,
        body: res.data.Error
      }
    } else {
      return{
        statusCode:200,
        body: JSON.stringify(res.data)
      }
    }
  }catch(error){
    return{
      statusCode: error.response.status,
      body: error.message
    }
  }
}