import { TinaMarkdownContent } from "tinacms/dist/rich-text";
import { RichTextTemplate } from "@tinacms/schema-tools";

enum imageSize {
    small = "small",
    medium = "medium",
    large = "large"
}

enum imageDecorations {
    default = "default",
    noStyle = "no-style"
}

enum imagePosition {
    left = "left",
    middle = "middle",
    right = "right"
}

export interface ImageProps {
    children: TinaMarkdownContent;
    size: imageSize;
    imageUrl: string,
    decorations: imageDecorations,
    position: imagePosition
}

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

export const imageSchema: RichTextTemplate = {
    name: "Image",
    label: "Image",
    inline: true,
    ui: {
        defaultItem: {
            size: Object.values(imageSize)[0],
            decorations: Object.values(imageDecorations)[0]
        }
    },
    fields: [
        {
            name: "size",
            label: "Size",
            type: "string",
            options: Object.values(imageSize)
        },
        {
            name: "position",
            label: "Position",
            type: "string",
            options: Object.values(imagePosition)
        },
        {
            name: "imageUrl",
            label: "Image",
            type: "image"
        },
        {
            name: "decorations",
            label: "Decorations",
            type: "string",
            options: Object.values(imageDecorations)
        }
    ] };

export default Image;