/**
 * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
 * SPDX-License-Identifier: CC0-1.0
 */

const path = require('path')
const webpack = require('webpack')
const { merge } = require('webpack-merge')
const webpackConfig = require('./webpack.config.cjs')

module.exports = async () => {
	const base = await webpackConfig()
	const newConfig = {
		...base, // Necessary, because vue-styleguidist runs an old version of webpack-dev-server
		devServer: {
			historyApiFallback: true,
			noInfo: true,
			overlay: true,
		},
		externals: {},
		module: {
			// Ignore eslint
			rules: base.module.rules.filter((rule) => rule.use !== 'eslint-loader'),
		},
	}

	return {
		require: [
			path.join(__dirname, 'styleguide/window.js'),
			path.join(__dirname, 'styleguide/global.requires.js'),
			path.join(__dirname, 'styleguide/assets/icons.css'),
			!process.env.NEXTCLOUD_LEGACY
				? path.join(__dirname, 'styleguide/assets/additional.css')
				: path.join(__dirname, 'styleguide/assets/legacy.css'),
			path.join(__dirname, 'styleguide/assets/styleguide.css'),
		],

		assetsDir: path.join(__dirname, 'styleguide/assets/img'),
		styleguideDir: 'styleguide/build',

		pagePerSection: true,
		minimize: false,
		verbose: false,

		webpackConfig: merge(newConfig, {
			plugins: [
				new webpack.DefinePlugin({
					NEXTCLOUD_VERSION: JSON.stringify(`${!process.env.NEXTCLOUD_LEGACY ? '32' : '31'}.0.0`),
				}),
			],
			// https://webpack.js.org/configuration/dev-server/#devserverproxy
			devServer: {
				proxy: {
					// redirect to the guest avatar endpoint
					'/index.php/avatar': {
						target: 'https://raw.githubusercontent.com/nextcloud/promo/master/nextcloud-icon.png',
						changeOrigin: true,
						ignorePath: true,
						secure: false,
					},
				},
			},
			resolve: {
				alias: {
					vue$: 'vue/dist/vue.esm-browser.js',
				},
			},
		}),

		serverPort: +(process.env.VUE_STYLEGUIDIST_PORT || 6060),

		exampleMode: 'collapse',
		usageMode: 'collapse',

		components: 'src/components/*/*.vue',
		getComponentPathLine(componentPath) {
			const name = path.basename(componentPath, '.vue')
			return `import ${name} from '@nextcloud/vue/components/${name}'`
		},

		enhancePreviewApp: path.resolve(__dirname, 'styleguide/preview.js'),
		compilerConfig: {
			transforms: { asyncAwait: false },
		},

		sections: [
			{
				name: 'Introduction',
				content: 'docs/index.md',
				exampleMode: 'hide',
				usageMode: 'hide',
			},
			{
				name: 'Versions',
				sections: [
					{
						name: 'v9 (Nextcloud 31+ on Vue 3)',
						href: 'https://nextcloud-vue-components.netlify.app',
					},
					{
						name: 'v8 (Nextcloud 28+ on Vue 2)',
						href: 'https://stable8--nextcloud-vue-components.netlify.app',
					},
				],
			},
			{
				name: 'Directives',
				content: 'docs/directives.md',
				sectionDepth: 1,
				sections: [
					{
						name: 'Focus',
						content: 'docs/directives/focus.md',
					},
					{
						name: 'Linkify',
						content: 'docs/directives/linkify.md',
					},
				],
			},
			{
				name: 'Functions',
				content: 'docs/functions.md',
				sectionDepth: 1,
				sections: [
					{
						name: 'a11y',
						content: 'docs/functions/a11y.md',
					},
					{
						name: 'emoji',
						content: 'docs/functions/emoji.md',
					},
					{
						name: 'isDarkTheme',
						content: 'docs/functions/isDarkTheme.md',
					},
					{
						name: 'usernameToColor',
						content: 'docs/functions/usernameToColor.md',
					},
					{
						name: 'reference',
						content: 'docs/functions/reference.md',
					},
					{
						name: 'registerReference',
						content: 'docs/functions/registerReference.md',
					},
					{
						name: 'spawnDialog',
						content: 'docs/functions/spawnDialog.md',
					},
				],
			},
			{
				name: 'Composables',
				content: 'docs/composables.md',
				sectionDepth: 1,
				sections: [
					{
						name: 'useFormatDateTime',
						content: 'docs/composables/useFormatDateTime.md',
					},
					{
						name: 'useHotKey',
						content: 'docs/composables/useHotKey.md',

					},
					{
						name: 'useIsDarkTheme',
						content: 'docs/composables/useIsDarkTheme.md',
					},
				],
			},
			{
				name: 'Components',
				content: 'docs/components.md',
				components: 'src/components/*/*.vue',
				sectionDepth: 1,
				ignore: [
					'src/components/Nc*Field/*.vue',
					'src/components/Nc*Picker*/*.vue',
					'src/components/NcAction*/*.vue',
					'src/components/NcAppContent*/*.vue',
					'src/components/NcAppNavigation*/*.vue',
					'src/components/NcAppSettings*/*.vue',
					'src/components/NcAppSidebar*/*.vue',
					'src/components/NcAssistant*/*.vue',
					'src/components/NcBreadcrumb*/*.vue',
					'src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue',
					'src/components/NcCollectionList/!(NcCollectionList).vue',
					'src/components/NcContent/*.vue',
					'src/components/NcDashboard*/*.vue',
					'src/components/NcDialog*/*.vue',
					'src/components/NcEllipsisedOption*/*.vue',
					'src/components/NcGuestContent/*.vue',
					'src/components/NcHeader*/*.vue',
					'src/components/NcListItem*/*.vue',
					'src/components/NcPopover/NcPopoverTriggerProvider.vue',
					'src/components/NcRadioGroup*/*.vue',
					'src/components/NcRichContenteditable/!(NcRichContenteditable).vue',
					'src/components/NcRichText*/*.vue',
					'src/components/NcSelect*/*.vue',
					'src/components/NcSettings*/*.vue',
					'src/components/NcTextArea/*.vue',
					'src/components/NcUserBubble/NcUserBubbleDiv.vue',
					'src/components/NcFormBox/NcFormBoxItem.vue',
					'src/components/NcIconToggleSwitch/NcIconToggleSwitch.vue',
				],
				sections: [
					{
						name: 'App containers',
						content: 'docs/app-containers.md',
						components: [
							'src/components/NcContent/NcContent.vue',
							'src/components/NcGuestContent/NcGuestContent.vue',
						],
						sections: [
							{
								name: 'NcAppContent',
								components: 'src/components/NcAppContent/NcAppContent.vue',
								sections: [
									{
										name: 'NcAppNavigation',
										components: [
											'src/components/NcAppNavigation*/*.vue',
										],
										ignore: [
											'src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue',
											'src/components/NcAppNavigationItem/NcInputConfirmCancel.vue',
										],
									},
									{
										name: 'NcAppSidebar',
										components: [
											'src/components/NcAppSidebar/NcAppSidebar.vue',
											'src/components/NcAppSidebarHeader/NcAppSidebarHeader.vue',
											'src/components/NcAppSidebarTab/NcAppSidebarTab.vue',
										],
									},
									{
										name: 'NcAppSettings',
										components: [
											'src/components/NcAppSettings*/*.vue',
										],
									},
								],
							},
						],
					},
					{
						name: 'NcActions',
						components: [
							// Put Actions component first
							'src/components/NcActions/*.vue',
							'src/components/NcAction[A-Z]*/*.vue',
						],
					},
					{
						name: 'Nextcloud Assistant',
						components: [
							'src/components/NcAssistant*/*.vue',
						],
					},
					{
						name: 'NcBreadcrumbs',
						components: [
							'src/components/NcBreadcrumb*/*.vue',
						],
					},
					{
						name: 'NcDashboard',
						components: [
							'src/components/NcDashboard*/*.vue',
						],
					},
					{
						name: 'NcDialog',
						components: [
							'src/components/NcDialog*/*.vue',
						],
					},
					{
						name: 'NcFields',
						components: [
							'src/components/Nc*Field/*.vue',
							'src/components/NcTextArea/*.vue',
						],
					},
					{
						name: 'NcHeader',
						components: [
							'src/components/NcHeader*/*.vue',
						],
					},
					{
						name: 'NcListItems',
						components: [
							'src/components/NcListItem*/*.vue',
						],
					},
					{
						name: 'NcSelect',
						components: [
							'src/components/NcSelect*/*.vue',
						],
					},
					{
						name: 'NcPickers',
						components: [
							'src/components/Nc*Picker*/*.vue',
						],
					},
					{
						name: 'NcRadioGroup',
						components: [
							'src/components/NcRadioGroup*/*.vue',
						],
					},
					{
						name: 'NcRichText',
						components: [
							'src/components/NcRichText/NcRichText.vue',
						],
					},
					{
						name: 'NcSettings',
						components: [
							'src/components/NcSettings*/*.vue',
						],
					},
				],
			},
		],

		ribbon: {
			text: 'Fork me on GitHub',
			url: 'https://github.com/nextcloud-libraries/nextcloud-vue',
		},

		// see https://github.com/styleguidist/react-styleguidist/blob/master/src/client/styles/theme.js
		theme: {
			maxWidth: '900px',
			sidebarWidth: 280,
			spaceFactor: 20,
			color: {
				link: '#0082c9',
				linkHover: '#0082c9',
				sidebarBackground: '#ffffff',
				errorBackground: '#e22d44',
				ribbonBackground: '#0082c9',
			},
			fontFamily: {
				base: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
			},
		},
	}
}
