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

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) => {
    const getDecorationTypeClass = (): string | undefined => {
        switch (props.decorations) {
            case imageDecorations.default:
                return "default-border";
            case imageDecorations.noStyle:
                return undefined;
            default:
                return undefined;
        }
    };

    const getSizeTypeClass = (): string | undefined => {
        switch (props.size) {
            case imageSize.small:
                return "sm-size";
            case imageSize.medium:
                return "md-size";
            case imageSize.large:
                return "lg-size";
            default:
                return undefined;
        }
    };

    const getPositionTypeClass = (): string | undefined => {
        switch (props.position) {
            case imagePosition.left:
                return "float-left mr-2";
            case imagePosition.middle:
                return "flex justify-center";
            case imagePosition.right:
                return "float-right ml-2";
            default:
                return undefined;
        }
    };

    const getClassNameWithSpace = (className: string): string => `${ className ? ` ${ className }` : "" }`;

    const decorationTypeClass = getDecorationTypeClass();

    const sizeTypeClass = getSizeTypeClass();

    const positionTypeClass = getPositionTypeClass();

    return (<div className={ `not-prose inline-image${ getClassNameWithSpace(positionTypeClass) }` }>
        <img className={ `${ decorationTypeClass ? `${ decorationTypeClass }` : "" }${ getClassNameWithSpace(sizeTypeClass) }` }
            data-tina-field={ tinaField(props, "imageUrl") }
            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;