import React from 'react';
import { Editor } from '@tiptap/react';
import { Option } from '@strapi/design-system';
import { Level } from '@tiptap/extension-heading';

import * as S from './styles';

export interface HeadingsProps {
	editor: Editor;
}

type HeadingType = 'P' | 'H1' | 'H2' | 'H3' | 'H4' | 'H5' | 'H6';
const headings: HeadingType[] = ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'];

const Headings = ({ editor }: HeadingsProps): JSX.Element => {
	const handleHeadingChange = (h?: HeadingType) => {
		const currentLevel = editor.getAttributes('heading').level as Level | undefined;
		const level = getLevelFromHeading(h);

		if (!level && currentLevel) {
			editor.chain().focus().toggleHeading({ level: currentLevel }).run();
		}

		if (level) {
			editor.chain().focus().setHeading({ level }).run();
		}
	};

	return (
		<S.SelectWrapper>
			<S.HeadingSelect
				id="select"
				onChange={handleHeadingChange}
				value={getHeadingFromLevel(editor.getAttributes('heading').level)}
				size="S"
				disabled={!editor.can().toggleHeading({ level: 1 }) || editor.isActive('htmlsource')}
			>
				{headings.map((h) => (
					<Option key={h} value={h}>
						{h}
					</Option>
				))}
			</S.HeadingSelect>
		</S.SelectWrapper>
	);
};

export default Headings;

const getHeadingFromLevel = (h?: Level): HeadingType => {
	switch (h) {
		case 1:
			return 'H1';
		case 2:
			return 'H2';
		case 3:
			return 'H3';
		case 4:
			return 'H4';
		case 5:
			return 'H5';
		case 6:
			return 'H6';
		default:
			return 'P';
	}
};

const getLevelFromHeading = (h?: HeadingType): Level | undefined => {
	switch (h) {
		case 'H1':
			return 1;
		case 'H2':
			return 2;
		case 'H3':
			return 3;
		case 'H4':
			return 4;
		case 'H5':
			return 5;
		case 'H6':
			return 6;
		default:
			return undefined;
	}
};