import React, { ComponentProps, useRef } from "react";
import { twMerge } from "tailwind-merge";
import MarkdownEditorPreviewComponent from "./MarkdownEditorPreviewComponent";
import MarkdownEditorComponent from "./MarkdownEditorComponent";
import MarkdownEditorSelectorButtons from "./MarkdownEditorSelectorButtons";
import Row from "../../layout/Row";
import Stack from "../../layout/Stack";
import AceEditor from "../../editors/AceEditor";
import useStatus from "../../hooks/useStatus";

type Props = {
    value?: string;
    setValue?: React.Dispatch<React.SetStateAction<string>>;
    defaultSideBySide?: boolean;
    changeHandler?: (content: string) => void;
    editorProps?: ComponentProps<typeof AceEditor>;
    maxHeight?: string;
    noToggleButtons?: boolean;
};

export default function MarkdownEditor({
    value: existingValue,
    setValue: setExistingValue,
    defaultSideBySide,
    changeHandler,
    editorProps,
    maxHeight: existingMaxHeight,
    noToggleButtons,
}: Props) {
    const [value, setValue] = React.useState<any>(existingValue || ``);

    const [sideBySide, setSideBySide] = React.useState(
        defaultSideBySide || false,
    );
    const [preview, setPreview] = React.useState(false);
    const { refresh, setRefresh } = useStatus();
    const updatingFromExtValueRef = useRef(false);

    const maxHeight = existingMaxHeight || "600px";

    React.useEffect(() => {
        if (updatingFromExtValueRef.current) return;
        setExistingValue?.(value);
        changeHandler?.(value);
    }, [value]);

    React.useEffect(() => {
        if (!existingValue) return;
        updatingFromExtValueRef.current = true;
        setValue(existingValue);
        setTimeout(() => {
            updatingFromExtValueRef.current = false;
            setRefresh((prev) => prev + 1);
        }, 500);
    }, [existingValue]);

    return (
        <Stack className="w-full items-stretch">
            {!noToggleButtons && (
                <MarkdownEditorSelectorButtons
                    {...{ preview, setPreview, setSideBySide, sideBySide }}
                />
            )}

            {sideBySide ? (
                <Row
                    className={twMerge(
                        `w-full grid xl:grid-cols-2 gap-6 max-h-[${maxHeight}]`,
                        "overflow-auto",
                    )}
                >
                    <MarkdownEditorComponent
                        setValue={setValue}
                        value={value}
                        maxHeight={maxHeight}
                        refreshDepArr={[refresh]}
                        {...editorProps}
                    />
                    <MarkdownEditorPreviewComponent
                        value={value}
                        maxHeight={maxHeight}
                    />
                </Row>
            ) : (
                <Stack
                    className={twMerge(`w-full max-h-[${maxHeight}] h-full`)}
                >
                    {preview ? (
                        <MarkdownEditorPreviewComponent
                            value={value}
                            maxHeight={maxHeight}
                        />
                    ) : (
                        <MarkdownEditorComponent
                            setValue={setValue}
                            value={value}
                            maxHeight={maxHeight}
                            refreshDepArr={[refresh]}
                            {...editorProps}
                        />
                    )}
                </Stack>
            )}
        </Stack>
    );
}