import React, { useState, useRef, useMemo, useEffect, useReducer, forwardRef,

import React, { useState, useRef, useMemo, useEffect, useReducer, forwardRef, useImperativeHandle } from "react";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import {

faPlus, faMinus, faImage, faVideo, faSliders,

faUpload, faEye, faSave, faTimes, faCloudUploadAlt,

faEdit

} from "@fortawesome/free-solid-svg-icons";

import { useTranslation } from "react-i18next";

import "./articleCreateForm.css";

import { Editor } from 'react-draft-wysiwyg';

import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

import { useArticleContext } from "../../contexts/ArticleContext";

import { createEditorState } from "../articleUtils/editor";

import ScrollToTop from "../../ScrollToTop/ScrollToTop";

import { ImageAltEditModal } from "../ArticleCreateForm/ImageAltEditModal/ImageAltEditModal";

import VideoThumbnailGenerator from "../ArticleCreateForm/VideoThumbnailGenerator/VideoThumbnailGenerator";

import { SectionQuickMenu } from "../ArticleCreateForm/SectionQuickMenu/SectionQuickMenu";

import ArticlePreview from "./ArticlePreview/ArticlePreview";

import { useCreateArticle } from "../../hooks/useCreateArticle";

import VideoPlayer from "../ArticleView/VideoPlayer/VideoPlayer";

const ArticleCreateForm = forwardRef(({ initialValues: propInitialValues, onSubmitHandler, isEditMode }, ref) => {

const { t, i18n } = useTranslation();

const { createArticle } = useArticleContext();

const [previewMode, setPreviewMode] = useState(false);

const [isAltModalOpen, setIsAltModalOpen] = useState(false);

const [activeSection, setActiveSection] = useState(null);

const [currentEditingImage, setCurrentEditingImage] = useState({

sectionIndex: null,

imageIndex: null,

image: null

});

// Използваме propInitialValues (ако има такива) или дефолтните стойности

const defaultValues = {

title: "",

slug: "",

author: "",

publishDate: new Date().toISOString().split('T')[0],

summary: createEditorState(),

mainImage: {

type: "image",

sources: [],

alt: createEditorState(),

thumbnail: "",

videoUrl: "",

subtitles: [],

allowDownload: false,

},

sections: [

{

title: "",

content: createEditorState(),

image: [],

order: 1,

},

],

tags: [],

previousArticle: null,

nextArticle: null,

};

// Използваме пропнатите стойности, ако има такива

const actualInitialValues = propInitialValues || defaultValues;

// Определяме правилния onSubmitHandler

const submitHandler = onSubmitHandler || createArticle;

// Подготвяме началните mediaFiles според наличните изображения от initialValues

const preparedMediaFiles = useMemo(() => {

const mediaFiles = {

mainImage: [],

sectionImages: {}

};

// Ако редактираме статия със съществуващи изображения в секциите

if (actualInitialValues && actualInitialValues.sections) {

actualInitialValues.sections.forEach((section, index) => {

if (Array.isArray(section.image) && section.image.length > 0) {

// Имаме изображения в тази секция - добавяме празен масив

// Това ще ни помогне да знаем, че секцията има изображения

mediaFiles.sectionImages[index] = [];

}

});

}

return mediaFiles;

}, []);

const {

values,

errors,

isUploading,

uploadProgress,

onChangeHandler,

onBlurHandler,

onSubmit,

handleMainImageTypeChange,

handleMainImageFiles,

handleSectionImageFile,

handleMainImageUrl,

handleSectionImageUrl,

removeUrlImage,

removeMainImage,

removeSectionImage,

addSection,

removeSection,

swapSectionsMedia,

addTag,

updateImageInfo,

removeTag,

mediaFiles,

convertEditorToHtml,

uploadThumbnailFile,

updateImageAlt,

} = useCreateArticle(actualInitialValues, submitHandler);

useImperativeHandle(ref, () => ({

onSubmit,

mediaFiles,

values

}));

const [newTag, setNewTag] = useState("");

const [, forceUpdate] = useReducer(x => x + 1, 0);

const [imageUrl, setImageUrl] = useState("");

const [sectionImageUrls, setSectionImageUrls] = useState({});

const videoUrlInputRef = useRef(null);

const videoPreviewUrl = useMemo(() => {

if (mediaFiles.mainImage && mediaFiles.mainImage.length > 0 && mediaFiles.mainImage[0]) {

try {

return URL.createObjectURL(mediaFiles.mainImage[0]);

} catch (error) {

console.error("Error creating URL:", error);

return null;

}

return null;

}, [mediaFiles.mainImage]);

const handleAddImageUrl = () => {

if (handleMainImageUrl(imageUrl)) {

setImageUrl("");

}

};

const openAltEditModal = (sectionIndex, imageIndex, image) => {

// Копираме изображението за да избегнем проблеми с референции

setCurrentEditingImage({

sectionIndex,

imageIndex,

image: { ...image }

});

setIsAltModalOpen(true);

};

// Функция за запазване на промените в ALT текста

const handleSaveImageInfo = (altEditorState, captionEditorState) => {

const { sectionIndex, imageIndex } = currentEditingImage;

updateImageInfo(sectionIndex, imageIndex, altEditorState, captionEditorState);

};

// Кеширане на blob URL-и за изображения в слайдера

const mainImagePreviewUrls = useMemo(() => {

if (mediaFiles.mainImage && mediaFiles.mainImage.length > 0) {

return mediaFiles.mainImage.map(file => {

try {

return URL.createObjectURL(file);

} catch (error) {

console.error("Error creating URL:", error);

return null;

}

});

}

return [];

}, [mediaFiles.mainImage]);

// Кеширане на blob URL-и за изображения в секциите

const sectionImagePreviewUrls = useMemo(() => {

const urls = {};

// 1. Обработка на файлове от mediaFiles.sectionImages

if (mediaFiles.sectionImages) {

Object.entries(mediaFiles.sectionImages).forEach(([index, file]) => {

try {

if (Array.isArray(file) && file.length > 0 &&

(file[0] instanceof Blob || file[0] instanceof File)) {

urls[index] = URL.createObjectURL(file[0]);

} else if (file && (file instanceof Blob || file instanceof File)) {

urls[index] = URL.createObjectURL(file);

}

} catch (error) {

console.error("Error creating URL for section image:", error);

urls[index] = null;

}

});

}

return urls;

}, [mediaFiles.sectionImages]);

// ВАЖНО: Почистване на blob URL-и при размонтиране на компонента

useEffect(() => {

return () => {

// Освобождаване на видео URL

if (videoPreviewUrl) {

URL.revokeObjectURL(videoPreviewUrl);

}

// Освобождаване на URL-и на основни изображения

mainImagePreviewUrls.forEach(url => {

if (url) URL.revokeObjectURL(url);

});

// Освобождаване на URL-и на секционни изображения

Object.values(sectionImagePreviewUrls).forEach(url => {

if (url) URL.revokeObjectURL(url);

});

};

}, [videoPreviewUrl, mainImagePreviewUrls, sectionImagePreviewUrls]);

const handleEditorChange = (editorState, name) => {

onChangeHandler(null, true, { name, value: editorState });

};

const handleEditorBlur = (name, editorState) => {

onBlurHandler(null, true, { name, value: editorState });

};

const moveSectionUp = (index) => {

if (index <= 0) return;

// Създаваме ново копие на масива със секции

const updatedSections = [...values.sections];

// Запазваме текущата секция и тази над нея

const currentSection = { ...updatedSections[index] };

const prevSection = { ...updatedSections[index - 1] };

// Разменяме ги

updatedSections[index - 1] = currentSection;

updatedSections[index] = prevSection;

// Актуализираме order свойството

updatedSections.forEach((section, idx) => {

section.order = idx + 1;

});

// Правим директен update на секциите в стейта

onChangeHandler(null, true, { name: "sections", value: updatedSections });

// ВАЖНО! Разменяме медия файловете също

swapSectionsMedia(index, index - 1);

// Актуализираме активната секция

setActiveSection(index - 1);

};

const moveSectionDown = (index) => {

if (index >= values.sections.length - 1) return;

// Създаваме ново копие на масива със секции

const updatedSections = [...values.sections];

// Запазваме текущата секция и тази под нея

const currentSection = { ...updatedSections[index] };

const nextSection = { ...updatedSections[index + 1] };

// Разменяме ги

updatedSections[index + 1] = currentSection;

updatedSections[index] = nextSection;

// Актуализираме order свойството

updatedSections.forEach((section, idx) => {

section.order = idx + 1;

});

// Правим директен update на секциите в стейта

onChangeHandler(null, true, { name: "sections", value: updatedSections });

// ВАЖНО! Разменяме медия файловете също

swapSectionsMedia(index, index + 1);

// Актуализираме активната секция

setActiveSection(index + 1);

};

const handleTagAdd = (e) => {

e.preventDefault();

if (newTag.trim()) {

addTag(newTag.trim());

setNewTag("");

}

};

const handlePreviewToggle = () => {

setPreviewMode(!previewMode);

};

const [expandedImageUrl, setExpandedImageUrl] = useState(null);

const handleImageClick = (url) => {

setExpandedImageUrl(url);

};

const closeExpandedImage = () => {

setExpandedImageUrl(null);

};

// Функция за обработка на видео файлове

const handleVideoFile = (files) => {

if (!files || files.length === 0) return;

const videoFile = files[0]; // Вземаме само първия файл за видео

if (videoFile) {

// Проверка за видео формат

if (!/video\/(mp4|webm|ogg)/.test(videoFile.type)) {

alert(t('articles.createForm.invalidVideoFormat'));

return;

}

// Проверка за размер на файла (100MB = 104857600 bytes)

if (videoFile.size > 104857600) {

alert(t('articles.createForm.videoSizeExceeded'));

return;

}

// Подаваме директно за обработка

handleMainImageFiles([videoFile]);

// Добавяме форсирано обновяване, но сега използваме useReducer версията

setTimeout(() => forceUpdate(), 100);

}

};

// Функция за добавяне на външно видео от URL

const handleAddVideoUrl = () => {

if (!values.mainImage.videoUrl) return;

// Проверка на URL формата (опростена)

const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+$/;

const vimeoRegex = /^(https?:\/\/)?(www\.)?vimeo\.com\/.+$/;

if (!youtubeRegex.test(values.mainImage.videoUrl) && !vimeoRegex.test(values.mainImage.videoUrl)) {

alert(t('articles.createForm.invalidVideoUrl'));

return;

}

// Генерираме thumbnail URL ако е YouTube

let thumbnailUrl = "";

if (youtubeRegex.test(values.mainImage.videoUrl)) {

// Опит да извлечем видео ID

let videoId = "";

if (values.mainImage.videoUrl.includes("youtube.com/watch?v=")) {

videoId = values.mainImage.videoUrl.split("v=")[1]?.split("&")[0];

} else if (values.mainImage.videoUrl.includes("youtu.be/")) {

videoId = values.mainImage.videoUrl.split("youtu.be/")[1]?.split("?")[0];

}

if (videoId) {

thumbnailUrl = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;

// Ако има thumbnail, сетваме го автоматично

onChangeHandler({ target: { name: "mainImage.thumbnail", value: thumbnailUrl } });

}

// Уведомяваме потребителя, че външното видео е добавено

alert(t('articles.createForm.videoAddedSuccess'));

// Принуждаваме компонента да се преизрисува с useReducer версията

forceUpdate();

};

// Общи настройки за редактора

const editorToolbarOptions = {

options: ['inline', 'blockType', 'fontSize', 'list', 'textAlign', 'link', 'emoji', 'history'],

inline: {

options: ['bold', 'italic', 'underline', 'strikethrough'],

className: 'editor-toolbar-inline',

},

fontSize: {

options: [12, 14, 16, 18, 20, 24, 28, 32, 36],

className: 'editor-toolbar-fontsize',

dropdownClassName: 'editor-fontsize-dropdown',

inDropdown: true,

},

blockType: {

options: ['Normal', 'H2', 'H3', 'H4', 'Blockquote'],

className: 'editor-toolbar-block',

},

list: {

options: ['unordered', 'ordered'],

},

textAlign: {

inDropdown: true,

},

link: {

inDropdown: false,

showOpenOptionOnHover: true,

},

emoji: {

emojis: [

'😀', '😁', '😂', '😃', '😉', '😋', '😎', '😍', '😮', '🙂', '🙃', '🤑', '🤔', '🤗', '🤐',

'🤡', '🤥', '🤨', '🤩', '🤪', '🤫', '🤬', '🤭', '🧐', '🤯', '😴', '😌', '😛', '😜', '😝'

],

},

};

// Опростени настройки за малки полета (alt текст)

const minimalEditorToolbarOptions = {

options: ['inline', 'link','fontSize'],

inline: {

options: ['bold', 'italic', 'underline'],

className: 'editor-toolbar-inline-small',

},

fontSize: {

options: [12, 14, 16, 18, 20, 24, 28, 32, 36],

className: 'editor-toolbar-fontsize',

dropdownClassName: 'editor-fontsize-dropdown',

inDropdown: true,

defaultSize: 16,

},

link: {

inDropdown: false,

showOpenOptionOnHover: true,

},

};

if (previewMode) {

return (

<ArticlePreview

article={values}

onBack={handlePreviewToggle}

mediaFiles={mediaFiles}

convertEditorToHtml={convertEditorToHtml}

/>

);

}

// Определяме текстовете според режима (създаване или редактиране)

const formTitle = isEditMode

? t('articles.editArticle.edit_article')

: t('articles.createForm.createNewArticle');

const submitButtonText = isEditMode

? t('articles.editArticle.save_changes')

: t('articles.createForm.saveBtn');

return (

{/* Постоянно фиксирано меню - ще се показва винаги */}

<SectionQuickMenu

sectionIndex={activeSection !== null ? activeSection : 0}

totalSections={values.sections.length}

onAddSection={addSection}

onMoveUp={moveSectionUp}

onMoveDown={moveSectionDown}

onRemove={removeSection}

/>

<h2 className="article-form-title">{formTitle}</h2>

{/* Основна информация */}

<h3>{t('articles.createForm.basicInfo')}</h3>

<label htmlFor="title">{t('articles.createForm.title')} <span className="required">*</span></label>

<input

type="text"

id="title"

name="title"

value={values.title}

onChange={onChangeHandler}

onBlur={onBlurHandler}

className={errors.title ? "error" : ""}

placeholder={t('articles.createForm.titlePlaceholder')}

/>

{errors.title && <div className="error-message">{errors.title}</div>}

</div>

<label htmlFor="slug">{t('articles.createForm.slug')} <span className="required">*</span></label>

<input

type="text"

id="slug"

name="slug"

value={values.slug}

onChange={onChangeHandler}

onBlur={onBlurHandler}

className={errors.slug ? "error" : ""}

placeholder={t('articles.createForm.slugPlaceholder')}

/>

{errors.slug && <div className="error-message">{errors.slug}</div>}

</div>

<label htmlFor="author">{t('articles.createForm.author')} <span className="required">*</span></label>

<input

type="text"

id="author"

name="author"

value={values.author}

onChange={onChangeHandler}

onBlur={onBlurHandler}

className={errors.author ? "error" : ""}

placeholder={t('articles.createForm.authorPlaceholder')}

/>

{errors.author && <div className="error-message">{errors.author}</div>}

</div>

<label htmlFor="publishDate">{t('articles.createForm.publishDate')}</label>

<input

type="date"

id="publishDate"

name="publishDate"

value={values.publishDate}

onChange={onChangeHandler}

/>

</div>

<label htmlFor="summary">{t('articles.createForm.summary')} <span className="required">*</span></label>

<Editor

editorState={values.summary}

onEditorStateChange={(editorState) => handleEditorChange(editorState, "summary")}

onBlur={() => handleEditorBlur("summary", values.summary)}

toolbar={editorToolbarOptions}

placeholder={t('articles.createForm.summaryPlaceholder')}

wrapperClassName="editor-wrapper"

editorClassName="editor-main"

toolbarClassName="editor-toolbar"

key={i18n.language}

/>

</div>

{errors.summary && <div className="error-message">{errors.summary}</div>}

</div>

{/* Основно изображение или медия */}

<h3>{t('articles.createForm.mainMedia')}</h3>

<button

type="button"

className={values.mainImage.type === "image" ? "active" : ""}

onClick={() => handleMainImageTypeChange("image")}

>

<FontAwesomeIcon icon={faImage} /> {t('articles.createForm.singleImage')}

</button>

<button

type="button"

className={values.mainImage.type === "slider" ? "active" : ""}

onClick={() => handleMainImageTypeChange("slider")}

>

<FontAwesomeIcon icon={faSliders} /> {t('articles.createForm.slider')}

</button>

<button

type="button"

className={values.mainImage.type === "video" ? "active" : ""}

onClick={() => handleMainImageTypeChange("video")}

>

<FontAwesomeIcon icon={faVideo} /> {t('articles.createForm.video')}

</button>

</div>

{(values.mainImage.type === "image" || values.mainImage.type === "slider") && (

<>

<label htmlFor="mainImageAlt">{t('articles.createForm.altText')} <span className="required">*</span></label>

<Editor

editorState={values.mainImage.alt}

onEditorStateChange={(editorState) => handleEditorChange(editorState, "mainImage.alt")}

onBlur={() => handleEditorBlur("mainImage.alt", values.mainImage.alt)}

toolbar={minimalEditorToolbarOptions}

placeholder={t('articles.createForm.imageDescriptionPlaceholder')}

wrapperClassName="editor-wrapper-small"

editorClassName="editor-main-small"

toolbarClassName="editor-toolbar-small"

key={i18n.language}

/>

</div>

{errors["mainImage.alt"] && <div className="error-message">{errors["mainImage.alt"]}</div>}

</div>

{/* Нова секция за добавяне чрез URL */}

<label>{t('articles.createForm.addViaUrl')}</label>

<input

type="text"

placeholder={t('articles.createForm.imageUrlPlaceholder')}

value={imageUrl}

onChange={(e) => setImageUrl(e.target.value)}

onKeyPress={(e) => e.key === 'Enter' && handleAddImageUrl()}

/>

<button

type="button"

className="add-image-url-btn"

onClick={handleAddImageUrl}

>

<FontAwesomeIcon icon={faPlus} /> {t('articles.createForm.addBtn')}

</button>

</div>

</div>

{t('articles.createForm.dragDropFile')}

</p>

{values.mainImage.type === "image"

? t('articles.createForm.uploadMainImageBtn')

: t('articles.createForm.uploadSliderImagesBtn')}

</label>

<input

type="file"

id="mainImageFile"

multiple={values.mainImage.type === "slider"}

onChange={(e) => handleMainImageFiles(e.target.files)}

accept="image/jpeg,image/png,image/jpg,image/webp"

className="file-input"

/>

</div>

{/* Предпреглед на всички изображения - файлове и URL-и */}

{(mediaFiles.mainImage.length > 0 || values.mainImage.sources.length > 0) && (

{/* Показване на файловете */}

{mediaFiles.mainImage.map((file, index) => (

<img

src={mainImagePreviewUrls[index]}

alt={t('articles.createForm.preview', { index: index })}

onClick={() => handleImageClick(mainImagePreviewUrls[index])}

/>

<button

type="button"

className="remove-image-btn"

onClick={() => removeMainImage(index)}

>

</button>

</div>

))}

{/* Показване на URL адресите */}

{values.mainImage.sources.map((url, index) => (

<img

src={url}

alt={t('articles.createForm.urlImage', { index: index })}

onClick={() => handleImageClick(url)}

/>

<button

type="button"

className="remove-image-btn"

onClick={() => removeUrlImage(index)}

>

</button>

</div>

))}

</div>

)}

</>

)}

{/* Раздел за видео, показва се само когато типът е видео */}

{values.mainImage.type === "video" && (

<>

<label htmlFor="mainImageAlt">{t('articles.createForm.videoTitle')} <span className="required">*</span></label>

<Editor

editorState={values.mainImage.alt}

onEditorStateChange={(editorState) => handleEditorChange(editorState, "mainImage.alt")}

onBlur={() => handleEditorBlur("mainImage.alt", values.mainImage.alt)}

toolbar={minimalEditorToolbarOptions}

placeholder={t('articles.createForm.videoTitlePlaceholder')}

wrapperClassName="editor-wrapper-small"

editorClassName="editor-main-small"

toolbarClassName="editor-toolbar-small"

key={i18n.language}

/>

</div>

{errors["mainImage.alt"] && <div className="error-message">{errors["mainImage.alt"]}</div>}

</div>

<label htmlFor="videoThumbnail">{t('articles.createForm.thumbnail')}</label>

<input

type="text"

id="videoThumbnail"

name="mainImage.thumbnail"

value={values.mainImage.thumbnail}

onChange={onChangeHandler}

placeholder={t('articles.createForm.videoThumbnailPlaceholder')}

/>

</div>

<label>{t('articles.createForm.chooseVideoMethod')}</label>

<button

type="button"

className="video-option-btn"

onClick={() => document.getElementById('mainVideoFile').click()}

>

<FontAwesomeIcon icon={faUpload} /> {t('articles.createForm.uploadFile')}

</button>

<span className="or-divider">{t('articles.createForm.or')}</span>

<input

type="text"

placeholder={t('articles.createForm.videoUrlPlaceholder')}

name="mainImage.videoUrl"

value={values.mainImage.videoUrl || ''}

onChange={onChangeHandler}

ref={videoUrlInputRef}

onKeyPress={(e) => e.key === 'Enter' && handleAddVideoUrl()}

/>

<button

type="button"

className="add-video-url-btn"

onClick={handleAddVideoUrl}

>

<FontAwesomeIcon icon={faPlus} /> {t('articles.createForm.addBtn')}

</button>

</div>

</div>

{t('articles.createForm.dragDropVideo')}

</p>

<FontAwesomeIcon icon={faUpload} /> {t('articles.createForm.uploadVideoBtn')}

</label>

<input

type="file"

id="mainVideoFile"

onChange={(e) => handleVideoFile(e.target.files)}

accept="video/mp4,video/webm,video/ogg"

className="file-input"

/>

<p className="upload-info">{t('articles.createForm.supportedFormats')}</p>

</div>

{/* Предпреглед на видео - използва кеширания URL */}

{values.mainImage.type === "video" && mediaFiles.mainImage && mediaFiles.mainImage.length > 0 && (

<video

controls

width="100%"

height="auto"

src={videoPreviewUrl} // Използваме кеширания URL

poster={values.mainImage.thumbnail || ""}

>

{t('articles.createForm.browserNotSupport')}

</video>

</div>

<p>{mediaFiles.mainImage[0]?.name || t('articles.createForm.unnamedFile')}</p>

<p>{t('articles.createForm.size')} {mediaFiles.mainImage[0]?.size ? (mediaFiles.mainImage[0].size / (1024 * 1024)).toFixed(2) + " MB" : t('articles.createForm.unknownSize')}</p>

</div>

<button

type="button"

className="remove-video-btn"

onClick={() => removeMainImage(0)}

>

<FontAwesomeIcon icon={faTimes} /> {t('articles.createForm.removeBtn')}

</button>

</div>

)}

{/* Добавяме генератора на thumbnail за качени видео файлове */}

{values.mainImage.type === "video" && mediaFiles.mainImage && mediaFiles.mainImage.length > 0 && (

<VideoThumbnailGenerator

videoFile={mediaFiles.mainImage[0]}

onThumbnailGenerated={(thumbnailFile) => {

uploadThumbnailFile(thumbnailFile);

}}

/>

)}

{/* Предпреглед за външно видео от URL */}

{values.mainImage.type === "video" && values.mainImage.videoUrl && !mediaFiles.mainImage?.length && (

<VideoPlayer

src={values.mainImage.videoUrl}

thumbnail={values.mainImage.thumbnail || ''}

alt={convertEditorToHtml(values.mainImage.alt) || t('articles.createForm.urlVideo')}

allowDownload={false}

/>

{/* <p>URL: {values.mainImage.videoUrl}</p> */}

</div>

<button

type="button"

className="remove-video-btn"

onClick={() => {

onChangeHandler({ target: { name: "mainImage.videoUrl", value: "" } });

forceUpdate(); // Използваме useReducer версията

}}

>

<FontAwesomeIcon icon={faTimes} /> {t('articles.createForm.removeBtn')}

</button>

</div>

)}

</>

)}

</div>

{/* Секции статии */}

<h3>{t('articles.createForm.content')}</h3>

<h4>{t('articles.createForm.sections')}</h4>

<FontAwesomeIcon icon={faPlus} /> {t('articles.createForm.addSectionBtn')}

</button>

</div>

{values.sections.map((section, index) => (

<div

key={index}

className={`article-section-item ${activeSection === index ? 'active-section' : ''}`}

onClick={() => setActiveSection(index)}

>

<h4>{t('articles.createForm.sectionWithNumber', { number: index + 1 })}</h4>

{values.sections.length > 1 && (

<button

type="button"

className="remove-section-btn"

onClick={() => removeSection(index)}

>

<FontAwesomeIcon icon={faMinus} /> {t('articles.createForm.removeBtn')}

</button>

)}

</div>

<label htmlFor={`section-title-${index}`}>{t('articles.createForm.title')} <span className="required">*</span></label>

<input

type="text"

id={`section-title-${index}`}

name={`sections[${index}].title`}

value={section.title}

onChange={onChangeHandler}

onBlur={onBlurHandler}

className={errors[`sections[${index}].title`] ? "error" : ""}

placeholder={t('articles.createForm.sectionTitlePlaceholder')}

/>

{errors[`sections[${index}].title`] && <div className="error-message">{errors[`sections[${index}].title`]}</div>}

</div>

<label htmlFor={`section-content-${index}`}>{t('articles.createForm.contentSimple')} <span className="required">*</span></label>

<Editor

editorState={section.content}

onEditorStateChange={(editorState) => handleEditorChange(editorState, `sections[${index}].content`)}

onBlur={() => handleEditorBlur(`sections[${index}].content`, section.content)}

toolbar={editorToolbarOptions}

placeholder={t('articles.createForm.sectionContentPlaceholder')}

wrapperClassName="editor-wrapper"

editorClassName="editor-main"

toolbarClassName="editor-toolbar"

key={i18n.language}

/>

</div>

{errors[`sections[${index}].content`] && <div className="error-message">{errors[`sections[${index}].content`]}</div>}

</div>

<label htmlFor={`section-image-${index}`}>{t('articles.createForm.sectionImages')}</label>

<label>{t('articles.createForm.addViaUrl')}</label>

<input

type="text"

placeholder={t('articles.createForm.imageUrlPlaceholder')}

value={sectionImageUrls[index] || ''}

onChange={(e) => setSectionImageUrls({ ...sectionImageUrls, [index]: e.target.value })}

onKeyPress={(e) => e.key === 'Enter' && handleSectionImageUrl(sectionImageUrls[index], index)}

/>

<button

type="button"

className="add-image-url-btn"

onClick={() => {

if (handleSectionImageUrl(sectionImageUrls[index], index)) {

setSectionImageUrls({ ...sectionImageUrls, [index]: '' });

}

}}

>

<FontAwesomeIcon icon={faPlus} /> {t('articles.createForm.addBtn')}

</button>

</div>

<FontAwesomeIcon icon={faUpload} /> {t('articles.createForm.chooseImage')}

</label>

<input

type="file"

id={`section-image-${index}`}

multiple={true}

onChange={(e) => {

if (e.target.files && e.target.files.length > 0) {

handleSectionImageFile(e.target.files, index);

}

}}

accept="image/jpeg,image/png,image/jpg,image/webp"

className="file-input"

/>

</div>

{/* Показване на всички изображения */}

{/* Показване на всички изображения от масива */}

{Array.isArray(section.image) && section.image.map((image, imgIndex) => {

if (!image || !image.src) return null;

return (

<img

src={image.src}

alt={t('articles.createForm.sectionWithNumber', { number: index + 1 })}

onClick={() => handleImageClick(image.src)}

onError={(e) => {

console.error(`Грешка при зареждане на изображение: ${image.src}`);

e.target.src = '/default-image-placeholder.jpg';

}}

/>

<button

type="button"

className="img-alt-edit-btn"

onClick={() => openAltEditModal(index, imgIndex, image)}

title={t('articles.createForm.editInfo')}

>

</button>

<button

type="button"

className="remove-image-btn"

onClick={() => removeSectionImage(index, imgIndex)}

title={t('articles.createForm.removeImage')}

>

</button>

</div>

{/* ALT текст */}

{image.alt && convertEditorToHtml(image.alt) && (

ALT: <span className="truncated-alt-text" dangerouslySetInnerHTML={{ __html: convertEditorToHtml(image.alt) }}></span>

</div>

)}

{/* Caption */}

{image.caption && convertEditorToHtml(image.caption) && (

</div>

)}

</div>

);

})}

{/* За обратна съвместимост - ако image не е масив, но има src */}

{section.image && !Array.isArray(section.image) && section.image.src && (

<img

src={section.image.src}

alt={t('articles.createForm.sectionWithNumber', { number: index + 1 })}

onClick={() => handleImageClick(section.image.src)}

/>

<button

type="button"

className="remove-image-btn"

onClick={() => removeSectionImage(index)}

>

</button>

</div>

)}

</div>

))}

</div>

{/* Тагове */}

<h3>{t('articles.createForm.tags')}</h3>

<input

type="text"

id="newTag"

value={newTag}

onChange={(e) => setNewTag(e.target.value)}

placeholder={t('articles.createForm.tagPlaceholder')}

onKeyPress={(e) => e.key === 'Enter' && handleTagAdd(e)}

/>

<button

type="button"

className="add-tag-btn"

onClick={handleTagAdd}

>

<FontAwesomeIcon icon={faPlus} /> {t('articles.createForm.addBtn')}

</button>

</div>

{errors.tags && <div className="error-message">{errors.tags}</div>}

{values.tags.map((tag, index) => (

<button

type="button"

onClick={() => removeTag(index)}

className="remove-tag-btn"

>

</button>

</div>

))}

</div>

{/* Прогрес при качване */}

{isUploading && (

</div>

<span>{uploadProgress.toFixed(0)}% {t('articles.createForm.uploaded')}</span>

</div>

)}

{/* Бутони на формата */}

<button

type="button"

className="preview-btn"

onClick={handlePreviewToggle}

>

<FontAwesomeIcon icon={faEye} /> {t('articles.createForm.previewBtn')}

</button>

<button

type="submit"

className="submit-btn"

disabled={isUploading}

>

<FontAwesomeIcon icon={faSave} /> {submitButtonText}

</button>

</div>

</form>

{/* Модален прозорец за преглед на изображение в пълен размер */}

{expandedImageUrl && (

</button>

</div>

)}

{/* В края на компонента, преди последния затварящ таг */}

<ImageAltEditModal

isOpen={isAltModalOpen}

onClose={() => setIsAltModalOpen(false)}

image={currentEditingImage.image}

onSave={handleSaveImageInfo}

/>

</div>

);

});

export default ArticleCreateForm;

Untitled