import Vue from 'vue'
import VueRouter from 'vue-router'
import Chat1 from 'vue-beautiful-chat'
Vue.use(Chat1)
Vue.use(VueRouter)
Vue.component('pagination', require('laravel-vue-pagination'));

import VueEmoji from 'emoji-vue'
Vue.component('VueEmoji', VueEmoji);


import Multiselect from 'vue-multiselect'
Vue.component('multiselect', Multiselect);

import Datepicker from 'vuejs-datepicker';
Vue.component('datepicker', Datepicker);

import App from './views/App'
import Home from './views/Home'
import SendTip from './views/BuyTip'
// import ProductDetailView from './views/ProductDetailView'
import Login from './views/Login'
import Register from './views/Register'
import FrontLogin from './views/Front-Login'
import SingleProduct from './views/SingleProduct'
import Checkout from './views/Checkout'
import Confirmation from './views/Confirmation'
import UserBoard from './views/UserBoard'
import Admin from './views/Admin/Dashboard'
import AccountSetting from './views/AccountSetting'
import ChangePassword from './views/ChangePassword'
import TipsHistory from './views/PurchaseHistory'
import TransactionHistory from './views/TransactionHistory'
import DetailView from './views/DetailView'

import SendResetPasswordLink from './views/SendResetPasswordLink'

import ResetPasswordForm from './views/ResetPasswordForm'

import About from './views/About'
import MessagePurchaseHistory from './views/MessagePurchaseHistory'
import ChatForm from './views/Chat'

//------------- PayPal Component Add --------------// 
import PayPalCheckout from './views/PayPalCheckout/PayPalCheckout';
Vue.component('paypal-checkout', PayPalCheckout);
//------------- PayPal Component End --------------//

Vue.prototype.$isloggedin = true




const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/admin/login',
            name: 'login',
            component: Login
        },
        {
            path: '/login',
            name: 'login',
            component: FrontLogin
        },
        {
            path: '/register',
            name: 'register',
            component: Register
        }, 

     
        {
            path: '/products/:id',
            name: 'single-products',
            component: SingleProduct
        },
        {
            path: '/confirmation',
            name: 'confirmation',
            component: Confirmation
        },
        {
            path: '/checkout',
            name: 'checkout',
            component: Checkout,
            props: (route) => ({ pid: route.query.pid })
        },
        {
            path: '/dashboard',
            name: 'userboard',
            component: UserBoard,
            meta: {
                requiresAuth: true,
                is_user: true
            }
        },

        {
            path: '/account-setting',
            name: 'account-setting',
            component: AccountSetting,
            meta: {
                requiresAuth: true,
                is_user: true
            }
        },

        {
            path: '/change-password',
            name: 'change-password',
            component: ChangePassword,
           /* meta: {
                requiresAuth: true,
                is_user: true
            }*/
        },

        {
            path: '/password/reset',
            name: 'password/reset',
            component: SendResetPasswordLink,
          
        },

        {
            path: '/password/reset/:token',
            name: 'password/reset',
            component: ResetPasswordForm,
        },

        {
            path: '/send-tip',
            name: 'send-tip',
            component: SendTip,
           /* meta: {
                requiresAuth: true,
                is_user: true
            }*/
        },

       

        {
            path: '/tips-history',
            name: 'tips-history',
            component: TipsHistory,
            meta: {
                requiresAuth: true,
                is_user: true
            }
        },

        {
            path: '/transaction-history',
            name: 'transaction-history',
            component: TransactionHistory,
            meta: {
                requiresAuth: true,
                is_user: true
            }
        },
        {
            path: '/detail-view/:id',
            name: 'detail-view',
            component: DetailView,
           /* meta: {
                requiresAuth: true,
                is_user: true
            }*/
        },

        {
            path: '/message-purchase-history',
            name: 'message-purchase-history',
            component: MessagePurchaseHistory,
            meta: {
                requiresAuth: true,
                is_user: true
            }
        },



        {
            path: '/about',
            name: 'about',
            component: About,
           /* meta: {
                requiresAuth: true,
                is_user: true
            }*/
        },

        {
            path: '/user_chat',
            name: 'chat',
            component: ChatForm,
           /* meta: {
                requiresAuth: true,
                is_user: true
            }*/
        },

        {
            path: '/admin/:page',
            name: 'admin-pages',
            component: Admin,
            meta: { 
                requiresAuth: true,
                is_admin : true
            }
        },
        {
            path: '/admin',
            name: 'admin',
            component: Admin,
            meta: { 
                requiresAuth: true,
                is_admin : true
            }
        },
    ],
})

router.beforeEach((to, from, next) => {
   if (localStorage.getItem('bigStore.jwt') == null) {
      Vue.prototype.$isloggedin = false;
    }
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (localStorage.getItem('bigStore.jwt') == null) {
            next({
                path: '/admin/login',
                params: { nextUrl: to.fullPath }
            })
        } else {
            let user = JSON.parse(localStorage.getItem('bigStore.user'))

            if (to.matched.some(record => record.meta.is_admin)) {
                if (user.is_admin == 1) {
                    next()
                }
                else {
                    next({ name: 'userboard' })
                }
            }
            else if (to.matched.some(record => record.meta.is_user)) {
                if (user.is_admin == 0) {
                    next()
                }
                else {
                    next({ name: 'admin' })
                }
            }
            next()
        }
    } else {
        next()
    }
})

const app = new Vue({
    el: '#app',
    components: { App },
    router,
});