// WysiwygEditor.jsx
// KendoReact Editor implementation for HTML editing with custom toolbar
import React, { useState } from 'react';
import { Editor, EditorTools, EditorToolsSettings } from '@progress/kendo-react-editor';
import InlineCodeTool from './custom/InlineCodeTool';

const {
    Bold, Italic, Underline, Strikethrough,
    Subscript, Superscript,
    CleanFormatting,
    Indent, Outdent,
    OrderedList, UnorderedList,
    NumberedList,
    BulletedList,
    Undo, Redo,
    Link, Unlink, InsertImage, ViewHtml,
    InsertFile,
    SelectAll,
    Print,
    Pdf,
} = EditorTools;

// Custom inline code tool for the editor toolbar
const inlineCode = InlineCodeTool;

function WysiwygEditor({ content, onContentChange }) {
    // KendoReact Editor change handler
    const handleEditorChange = (event) => {
        onContentChange(event.html);
    };


    // KendoReact Editor toolbar configuration with custom inline code tool
    const tools = [
        [Bold, Italic, Underline, Strikethrough], 
        [Subscript, Superscript], 
        [inlineCode], // Custom tool for inline code formatting
        [CleanFormatting], 
        [Indent, Outdent], 
        [OrderedList, UnorderedList], 
        [NumberedList, BulletedList], 
        [SelectAll], 
        [Undo, Redo], 
        [Link, Unlink, InsertImage, InsertFile, ViewHtml]
    ];

    return (
        <div>
            <style>
                {`
                    .k-editor-content a {
                        color: var(--kendo-color-primary, #d94f27) !important;
                        text-decoration: underline;
                    }
                    .k-editor-content a:hover {
                        color: var(--kendo-color-primary-hover, #ff6f48) !important;
                        text-decoration: underline;
                    }
                    .k-editor-content a:visited {
                        color: var(--kendo-color-primary, #d94f27) !important;
                    }
                    .k-textarea {
                        background-color: #f5f1e9 !important;
                    }
                `}
            </style>
            {/* KendoReact Editor with custom toolbar and styling */}
            <div style={{ width: '1000px' }}>
                <Editor
                    value={content}
                    onChange={handleEditorChange}
                    tools={tools}
                    style={{ 
                        height: '400px',
                        width: '1000px'
                    }}
                    contentStyle={{
                        fontFamily: 'Arial, sans-serif',
                        fontSize: '14px',
                        lineHeight: '1.5',
                        backgroundColor: '#f5f1e9'
                    }}
                    className="custom-editor"
                />
            </div>
        </div>
    );
}

export default WysiwygEditor;