import Clickable, { ClickableProps } from "@insite/mobius/Clickable";
import Modal from "@insite/mobius/Modal";
import Typography, { TypographyProps } from "@insite/mobius/Typography";
import RichTextEditor from "@insite/shell/Components/Elements/RichTextEditorCode";
import { createSetNewValueInDraft } from "@insite/shell/Components/Shell/StyleGuide/Helpers";
import { PresetHelpers } from "@insite/shell/Components/Shell/StyleGuide/Types";
import { TS } from "@insite/shell/TS";
import get from "lodash/get";
import React, { useState } from "react";
import styled, { css } from "styled-components";

const codeInjectionConfig = (fieldName: string, title: string, presetHelpers: PresetHelpers) => {
    const locationInTheme = `codeInjection.${fieldName}`;
    const [isModalOpen, setIsModalOpen] = useState(false);
    const titleClickHandler = () => {
        setIsModalOpen(true);
    };
    const modalCloseHandler = () => {
        setIsModalOpen(false);
    };
    const editorChangeHandler = (newValue: string) => {
        presetHelpers.update(draft => createSetNewValueInDraft(locationInTheme)(draft, newValue));
    };

    return (
        <>
            <ItemWrapper>
                <Clickable onClick={titleClickHandler} {...clickableProps}>
                    <Typography {...titleProps}>{title}</Typography>
                </Clickable>
            </ItemWrapper>
            <Modal headline={`${title} ${TS("Code Injection")}`} isOpen={isModalOpen} handleClose={modalCloseHandler}>
                <RichTextEditor
                    name={fieldName}
                    value={get(presetHelpers.theme, locationInTheme)}
                    extendedConfig={{
                        paragraphMultipleStyles: false,
                        pastePlain: true,
                        codeViewKeepActiveButtons: [`popin${fieldName}`, `popout${fieldName}`, "html"],
                        codeMirrorOptions: {
                            lineNumbers: false,
                        },
                        htmlRemoveTags: [],
                    }}
                    collapsedToolbarButtons={{
                        moreText: {},
                    }}
                    expandedToolbarButtons={{
                        moreParagraph: {},
                        moreText: {},
                        moreMisc: {},
                        code: {},
                        unredo: {},
                    }}
                    onChange={editorChangeHandler}
                    isCodeViewMode={true}
                />
            </Modal>
        </>
    );
};

const ItemWrapper = styled.nav`
    padding: 0 35px;
    &:hover {
        background-color: #d4e0fd;
    }
`;

const clickableProps: ClickableProps = {
    style: { width: "100%" },
};

const titleProps: TypographyProps = {
    variant: "h6",
    css: css`
        margin: 7px 0;
    `,
};

const Head = (presetHelpers: PresetHelpers) => {
    return codeInjectionConfig("head", TS("Head"), presetHelpers);
};

export default function CodeInjectionConfig(props: any) {
    return (
        <>
            <Head {...props.presetHelpers} />
        </>
    );
}
