import React from "react";
import styled from "styled-components";
import ReactMde from "react-mde";
import { WidgetProps } from "@rjsf/core";
import MarkdownStyles from "@views/common/MarkdownStyles";

type MarkdownEditorWidgetProps = WidgetProps;

const Container = styled.div`
  background: white;
  color: black;

  button {
    color: black;
  }

  .mde-preview {
    min-height: unset !important;
    height: 200px;
    overflow: scroll;
  }
`;

const MarkdownEditorWidget: React.FC<MarkdownEditorWidgetProps> = ({ value, onChange }) => {
  const [selectedTab, setSelectedTab] = React.useState<"write" | "preview">("write");
  return (
    <Container>
      <ReactMde
        value={value}
        onChange={onChange}
        selectedTab={selectedTab}
        onTabChange={setSelectedTab}
        generateMarkdownPreview={(markdown) => Promise.resolve(
          <MarkdownStyles>{markdown}</MarkdownStyles>,
        )}
      />
    </Container>
  );
};

export default MarkdownEditorWidget;