import React from "react";
import Button from "../../layout/Button";
import Border from "../../elements/Border";
import { LocalStorageDict } from "@/package-shared/dict/local-storage-dict";

type Props = {
    preview: boolean;
    setPreview: React.Dispatch<React.SetStateAction<boolean>>;
    sideBySide: boolean;
    setSideBySide: React.Dispatch<React.SetStateAction<boolean>>;
};

export default function MarkdownEditorSelectorButtons({
    preview,
    setPreview,
    setSideBySide,
    sideBySide,
}: Props) {
    const [ready, setReady] = React.useState(false);

    React.useEffect(() => {
        if (!ready) return;

        if (sideBySide) {
            localStorage.setItem(
                LocalStorageDict["MarkdownEditorDefaultSideBySide"],
                "true"
            );
        } else {
            localStorage.removeItem(
                LocalStorageDict["MarkdownEditorDefaultSideBySide"]
            );
        }

        if (preview) {
            localStorage.setItem(
                LocalStorageDict["MarkdownEditorDefaultPreview"],
                "true"
            );
        } else {
            localStorage.removeItem(
                LocalStorageDict["MarkdownEditorDefaultPreview"]
            );
        }
    }, [sideBySide, preview, ready]);

    React.useEffect(() => {
        if (
            localStorage.getItem(
                LocalStorageDict["MarkdownEditorDefaultPreview"]
            )
        ) {
            setPreview(true);
        }
        if (
            !localStorage.getItem(
                LocalStorageDict["MarkdownEditorDefaultSideBySide"]
            )
        ) {
            setSideBySide(false);
        }

        setTimeout(() => {
            setReady(true);
        }, 200);
    }, []);

    return (
        <Border className="p-1.5">
            <Button
                title="Code"
                size="smaller"
                color={sideBySide ? "gray" : preview ? "gray" : "primary"}
                variant={
                    sideBySide ? "outlined" : preview ? "outlined" : "normal"
                }
                onClick={() => {
                    setSideBySide(false);
                    setPreview(false);
                }}
            >
                Code
            </Button>
            <Button
                title="Preview"
                size="smaller"
                color={sideBySide ? "gray" : preview ? "primary" : "gray"}
                variant={
                    sideBySide ? "outlined" : preview ? "normal" : "outlined"
                }
                onClick={() => {
                    setSideBySide(false);
                    setPreview(true);
                }}
            >
                Preview
            </Button>
            <Button
                title="Side By Side"
                size="smaller"
                color={sideBySide ? "primary" : "gray"}
                variant={sideBySide ? "normal" : "outlined"}
                onClick={() => {
                    setSideBySide(true);
                }}
            >
                Side By Side
            </Button>
        </Border>
    );
}