import { useCallback, useEffect, useMemo, useState } from 'react';

import dynamic from 'next/dynamic';
import 'easymde/dist/easymde.min.css';
const SimpleMdeReact = dynamic(() => import('react-simplemde-editor'), { ssr: false });

interface headlineMdOptions {
    toolbar: any;
    maxHeight: string;
}
interface contentMdOptions {
    toolbar: any;
}
interface ArticleContent {
    articleHeadline: any;
    setArticleHeadline: React.Dispatch<React.SetStateAction<any>>;
    articleContent: any;
    setArticleContent: React.Dispatch<React.SetStateAction<any>>;
}

const ArticleForm: React.FC<ArticleContent> = ({ articleContent, setArticleContent, articleHeadline, setArticleHeadline }) => {
    const onChangeHeadline = useCallback((value: string) => {
        setArticleHeadline(value);
    }, []);
    const onChangeContent = useCallback((value: string) => {
        setArticleContent(value);
    }, []);

    const headlineMd: headlineMdOptions = useMemo(() => {
        return {
            toolbar: ['italic', 'preview'],
            maxHeight: '50px',
        };
    }, []);

    const contentMd: contentMdOptions = useMemo(() => {
        return {
            toolbar: ['bold', 'italic', 'heading', 'quote', 'strikethrough', 'unordered-list', 'ordered-list', 'link', 'image', 'preview'],
        };
    }, []);

    return (
        <>
            <div className="flex-1 px-0  ltr:xl:mr-6 rtl:xl:ml-6">
                <div className=" mb-2">
                    <div className="my-4 text-lg">Article Headline</div>
                    <div id="article-title" className="markdown-editor prose flex-1 dark:prose-invert" style={{ maxWidth: '100%' }}>
                        <SimpleMdeReact value={articleHeadline} onChange={onChangeHeadline} options={headlineMd} />
                    </div>
                </div>
                <div className="">
                    <div className="my-4 text-lg">Article Content</div>
                    <div id="article-content" className="markdown-editor prose dark:prose-invert" style={{ maxWidth: '100%' }}>
                        <SimpleMdeReact value={articleContent} onChange={onChangeContent} options={contentMd} />
                    </div>
                </div>
            </div>
        </>
    );
};
export default ArticleForm;