const FONT_URL = "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Rubik:wght@300;400;500;600;700;800;900&display=swap";

const METADATA = {
	title: "Vindigo Task Planner",
	desc: "Introducing Vindigo, a brand new, open source organization tool for planning, sketching, and tracking tasks.",
	keywords: 'Vindigo,Planning,Kanban,Calendar,App,Open Source',
	image: "https://vindigo.app/icon-white.png",
};

const WAVE_CONFIG = {
	colors: {
		primary: '#000',
		secondary: '#000',
		success: '#000',
		error: '#000',
		warning: '#000',
		info: '#000'
	}
};

module.exports = {
	telemetry: false,
	components: true,
	dev: true,

	server: {
		port: 8080
	},

	head: {
		title: 'Project Planner',
		titleTemplate: 'Vindigo • %s',
		htmlAttrs: {
			lang: 'en'
		},
		meta: [
			// SEO
			{ name: "author", content: "Starlane Studios" },
			{ name: "keywords", content: METADATA.keywords },
			{ hid: 'description', name: "description", content: METADATA.desc },

			// Rendering
			{ charset: "utf-8" },
			{ name: "viewport", content: "width=device-width, initial-scale=1" },
			{ name: "mobile-web-app-capable", content: "yes" },
			{ name: 'format-detection', content: 'telephone=no' },

			// Social embed metadata
			{ hid: 'theme-color', name: "theme-color", content: "#23C7FF" },
			{ hid: 'twitter:card', name: "twitter:card", content: "content" },
			{ hid: 'twitter:title', name: "twitter:title", content: METADATA.title },
			{ hid: 'twitter:image', name: "twitter:image", content: METADATA.image },
			{ hid: 'twitter:site', name: "twitter:site", content: "@VindigoApp" },
			{ hid: 'og:title', property: "og:title", content: METADATA.title },
			{ hid: 'og:type', property: "og:type", content: "website" },
			{ hid: 'og:keywords', property: "og:keywords", content: METADATA.keywords },
			{ hid: 'og:description', property: "og:description", content: METADATA.desc },
			{ hid: 'og:image', property: "og:image", content: METADATA.image }
		],
		link: [
			{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
			{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
			{ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: true },
			{ rel: 'stylesheet', href: FONT_URL }
		]
	},

	loading: {
		color: '#8b5cf6',
		duration: 3000,
		throttle: 0
	},

	// NOTE: Application style is inserted in modules/loader.ts in order
	// to receive priority over Wave UI's stylesheets.
	
	css: [
		'@mdi/font/css/materialdesignicons.min.css',
		'vue-advanced-cropper/dist/style.css',
		'codemirror/lib/codemirror.css'
	],

	plugins: [
		'~/plugins/dayjs.ts',
		'~/plugins/api.ts',
		'~/plugins/extend.ts',
		'~/plugins/registry.ts',
		'~/plugins/directives.ts',
	],

	buildModules: [
		['@wave-ui/nuxt', WAVE_CONFIG],
		'@nuxtjs/style-resources',
		'@nuxt/typescript-build',
		'~/modules/loader.ts',
	],

	modules: [
		'cookie-universal-nuxt',
		'@nuxtjs/axios',
		'@nuxtjs/proxy',
		'@nuxtjs/i18n'
	],

	router: {
		middleware: 'global'
	},

	proxy: {
		'/data': 'http://localhost:8085',
		'/upload': 'http://localhost:8085',
		'/graphql': 'http://localhost:8085',
		'/subscriptions': {
			target: 'ws://localhost:8085',
			ws: true
		}
	},

	i18n: {
		defaultLocale: 'en-US',
		strategy: 'no_prefix',
		langDir: '~/assets/i18n',
		vueI18n: {
			silentTranslationWarn: true,
			silentFallbackWarn: true,
		},
		detectBrowserLanguage: {
			useCookie: true
		},
		locales: [
			{
				code: 'nl-NL',
				file: 'nl-NL.json',
				name: 'Dutch',
				dayjs: 'nl',
				icon: 'nl'
			},
			{
				code: 'en-US',
				file: 'en-US.json',
				name: 'English (United States)',
				dayjs: 'en',
				icon: 'us'
			}
		]
	},

	styleResources: {
		scss: [
			'~/assets/style/_variables.scss',
			'~/assets/style/_colors.scss',
			'~/assets/style/_mixins.scss',
		]
	},

	publicRuntimeConfig: {
		axios: {
			baseURL: process.env.VINDIGO_URL || 'http://localhost:8080/'
		}
	},

	build: {
		extend(config) {
			config.module.rules.push({
				test: /\.gql$/,
				loader: 'raw-loader'
			});
		}
	}
};
