import React from "react";
import format from "date-fns/format";
import { Template } from "tinacms";
import { RichTextTemplate } from "@tinacms/schema-tools";

export interface DateTimeProps {
    format?: string;
}

const DateTime = (props: DateTimeProps) => {
    const dt = React.useMemo(() => {
        return new Date();
    }, []);

    switch (props.format) {
        case "iso":
            return <span>{ format(dt, "yyyy-MM-dd") }</span>;
        case "utc":
            return <span>{ format(dt, "eee, dd MMM yyyy HH:mm:ss OOOO") }</span>;
        case "local":
            return <span>{ format(dt, "P") }</span>;
        default:
            return <span>{ format(dt, "P") }</span>;
    }
};

export const dateTimeSchema: RichTextTemplate = {
    name: "DateTime",
    label: "Date & Time",
    inline: true,
    fields: [
        {
            name: "format",
            label: "Format",
            type: "string",
            options: ["utc", "iso", "local"]
        }
    ] };

export default DateTime;