import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
const R = require('ramda');

// 函式庫

const getUrlParameter = function getUrlParameter(param) {
  var pairs = location.search.substring(1).split('&');
  var pair = 'undefined';
  for (var i = 0; i < pairs.length; i++) {
    if (pairs[i].split('=')[0] === param) {
      return pairs[i].split('=')[1];
    }
  }
  return false;
}

const getProp = (prop) => {
  if(window[prop] != undefined){
    return window[prop];
  }
  return getUrlParameter(prop);
}
const getId = () => {
  let id = getProp('episode_id');
  if(id == false){
    let paths = location.pathname.split('/')
    id = paths[paths.length - 1];
  }
  return id;
}

const getBdm = () => {
  return getProp('bdm');
}

const getBasePath = () =>{
  return location.origin + "/assets/enclosures/" + getId() + "/";
}

const getPlayerWidth = () =>{
  return getProp('player_width');
}

const getPlayerHeight = () =>{
  return getProp('player_height');
}

const getMOS = () =>{
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;
  if (/windows phone/i.test(userAgent)) {
    return "Windows Phone";
  }

  if (/android/i.test(userAgent)) {
    return "Android";
  }

  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
    return "iOS";
  }
  return "unknown";
}

var isChromium = window.chrome,
    isIOS = getMOS() == "iOS",
    winNav = window.navigator,
    vendorName = winNav.vendor,
    isOpera = winNav.userAgent.indexOf("OPR") > -1,
    isIEedge = winNav.userAgent.indexOf("Trident") > -1,
    isIOSChrome = winNav.userAgent.match("CriOS");


Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    width: '100%',
    height: '100%'
  },
  getters: {
    isIOS: (state) =>{
      return isIOS;
    },
    isIEedge: (state) => {
      return isIEedge;
    },
    isChrome: (state) => {
      return isChromium !== null && isChromium !== undefined && vendorName === "Google Inc." && isOpera == false && isIEedge == false;
    },
    playedInNewWindow: (state) => {
      return getProp('played_in_new_window') == 'yes';
    },
    isFullScreenMode: (state) => {
      return getProp('fullscreen_mode') == 'yes';
    },
    fullscreen_url: (state) => {
      return [ location.origin,
                  '/players/episode.html?episode_id=',
                  getId(),
                  '&bdm=',
                  getBdm(),
                  '&fullscreen_mode=yes',
                  '&played_in_new_window=yes',
                  '&player_width=100%&player_height=100%'
                ].join('')
    },
    width: (state) => {
      /*
      let w = getPlayerWidth();
      return w = w? w: '100%';
      */
      return state.width;
    },
    height: (state) => {
      /*
      let h = getPlayerHeight();
      return h = h? h: '100%';
      */
      return state.height;
    },
    poster:(state) => {return getBasePath() + "poster.jpg"},
    src:(state) => {
      let bdm = getBdm();
      let ext_len = parseInt(bdm.slice(8, 9));
      let extname = bdm.slice(9, 9 + ext_len);
      let basename = bdm.slice(9 + ext_len, bdm.length - 4);
      let is360p = getUrlParameter('video') ==="360p";
      if(is360p){
        return getBasePath() + basename + "360p.mp4";
      }else{
        return getBasePath() + basename + "." + extname;
      }
    }
  },
  mutations: {
    setWidth(state, w){
      state.width = w;
    },
    setHeight(state, h){
      state.height = h;
    }
  },
  actions: {
  }
})
