import { string } from 'yup';
import { prefixPluginTranslations } from '@strapi/helper-plugin';
import pluginPkg from '../../package.json';
import getTrad from './utils/getTrad';
import pluginId from './pluginId';
import Initializer from './components/Initializer';
import CustomFieldIcon from './components/CustomFieldIcon';

const name = pluginPkg.strapi.name;

export default {
	register(app: any) {
		const plugin = {
			id: pluginId,
			initializer: Initializer,
			isReady: false,
			name
		};

		app.customFields.register({
			pluginId,
			name: 'tiptap',
			type: 'richtext',
			intlLabel: {
				id: 'tiptap.label',
				defaultMessage: 'Tiptap Editor'
			},
			intlDescription: {
				id: 'tiptap.description',
				defaultMessage: 'The rich text editor for every use case'
			},
			icon: CustomFieldIcon,
			components: {
				Input: async () => import(/* webpackChunkName: "tiptap" */ './components/Input')
			},
			options: {
				base: [
					{
						intlLabel: {
							id: 'tiptap.preset.label',
							defaultMessage: 'Choose editor version'
						},
						description: {
							id: 'tiptap.preset.description',
							defaultMessage: 'Do you need more or less features?'
						},
						name: 'options.preset',
						type: 'select',
						options: [
							{
								key: 'light',
								value: 'light',
								metadatas: {
									intlLabel: {
										id: 'tiptap.preset.light.label',
										defaultMessage: 'Light version'
									}
								}
							},
							{
								key: 'standard',
								value: 'standard',
								metadatas: {
									intlLabel: {
										id: 'tiptap.preset.standard.label',
										defaultMessage: 'Standard version'
									}
								}
							},
							{
								key: 'rich',
								value: 'rich',
								metadatas: {
									intlLabel: {
										id: 'tiptap.preset.rich.label',
										defaultMessage: 'Rich version'
									}
								}
							},
							{
								key: 'custom',
								value: 'custom',
								metadatas: {
									intlLabel: {
										id: 'tiptap.preset.custom.label',
										defaultMessage: 'Custom version'
									}
								}
							}
						]
					},
					{
						intlLabel: {
							id: getTrad('tiptap.options.externalApi.enable'),
							defaultMessage: 'Enable external API source'
						},
						name: 'options.externalApi.enabled',
						description: {
							id: getTrad('tiptap.options.externalApi.enable.description'),
							defaultMessage: 'Enable this to connect with an external API'
						},
						type: 'checkbox',
						defaultValue: false
					},
					{
						intlLabel: {
							id: getTrad('tiptap.options.externalApi.tabName'),
							defaultMessage: 'Set tab name for external API source'
						},
						name: 'options.externalApi.tabName',
						description: {
							id: getTrad('tiptap.options.externalApi.enable.tabName'),
							defaultMessage: '(Optional) Set tab name for external API source'
						},
						type: 'text',
						defaultValue: ''
					},
					{
						intlLabel: {
							id: getTrad('tiptap.options.source.options'),
							defaultMessage: 'External API Source'
						},
						name: 'options.externalApi.apiUrl',
						description: {
							id: getTrad('tiptap.options.source.options.description'),
							defaultMessage: 'Set the options for the external API source'
						},
						type: 'text',
						defaultValue: ''
					},
					{
						intlLabel: {
							id: getTrad('tiptap.options.source.label.mapping'),
							defaultMessage: 'Label from API'
						},
						name: 'options.externalApi.labelPath',
						description: {
							id: getTrad('tiptap.options.source.label.mapping.description'),
							defaultMessage: 'Select the label to be mapped from the API'
						},
						type: 'text',
						defaultValue: ''
					},
					{
						intlLabel: {
							id: getTrad('tiptap.options.source.value.mapping'),
							defaultMessage: 'Value from API'
						},
						name: 'options.externalApi.valuePath',
						description: {
							id: getTrad('tiptap.options.source.value.mapping.description'),
							defaultMessage: 'Select the value to be mapped from the API'
						},
						type: 'text',
						defaultValue: ''
					},
					{
						intlLabel: {
							id: getTrad('tiptap.options.source.additionalLabel.mapping'),
							defaultMessage: 'Optional additional label to map from API'
						},
						name: 'options.externalApi.labelAdditionPath',
						description: {
							id: getTrad('tiptap.options.source.value.additionalLabel.description'),
							defaultMessage: 'Select the additional label to be mapped from the API'
						},
						type: 'text',
						defaultValue: ''
					}
				],
				advanced: [
					{
						sectionTitle: null,
						items: [
							{
								name: 'required',
								type: 'checkbox',
								intlLabel: {
									id: 'tiptap.required.label',
									defaultMessage: 'Required field'
								},
								description: {
									id: 'tiptap.required.description',
									defaultMessage: "You won't be able to create an entry if this field is empty"
								}
							},
							// Note: We can't call it simply "maxLength" because then Strapi
							// applies this to the length of HTML string automatically.
							// We want to apply this to the number of characters in the editor,
							// hence – a unique name.
							{
								name: 'options.maxLengthCharacters',
								type: 'checkbox-with-number-field',
								intlLabel: {
									id: 'tiptap.maxLength.label',
									defaultMessage: 'Maximum length (characters)'
								}
							}
						]
					}
				],
				validator: () => ({
					preset: string().required({
						id: 'tiptap.preset.error.required',
						defaultMessage: 'Editor preset is required'
					})
				})
			}
		});

		app.registerPlugin(plugin);
	},

	bootstrap(app: any) {},
	async registerTrads(app: any) {
		const { locales } = app;

		const importedTrads = await Promise.all(
			locales.map((locale: any) => {
				return import(`./translations/${locale}.json`)
					.then(({ default: data }) => {
						return {
							data: prefixPluginTranslations(data, pluginId),
							locale
						};
					})
					.catch(() => {
						return {
							data: {},
							locale
						};
					});
			})
		);

		return Promise.resolve(importedTrads);
	}
};