import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
import { Template } from "tinacms";
import { anchoringSchema } from "../util/anchoring";
import { RichTextTemplate } from "@tinacms/schema-tools";

export interface ImageProps {
    children: TinaMarkdownContent;
    size: "small" | "medium" | "large";
    imageUrl: string,
    decorations: string,
    position: "left" | "middle" | "right"
}

const Image = (props: ImageProps) => (
    <div>
        <img src={ props.imageUrl }/>
    </div>);

export const imageSchema: RichTextTemplate = {
    name: "image",
    label: "Image",
    inline: true,
    fields: [
        {
            name: "size",
            label: "Size",
            type: "string",
            options: ["small", "medium", "large"]
        },
        {
            name: "position",
            label: "Position",
            type: "string",
            options: ["left", "middle", "right"]
        },
        {
            name: "imageUrl",
            label: "Image",
            type: "image"
        },
        {
            name: "decorations",
            label: "Decorations",
            type: "string"
        }
    ] };

export default Image;