import { default as StaticPage } from "@/data/page";
import { identityTransformer, Transformer } from "@/serialization";
import { Field, Form, FormikFormProps } from "formik";
import React from "react";
import { TextField as TextFieldFormik } from "formik-material-ui";
import { Typography } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import { useSpacing } from "@/styles";
import { CKEditorField } from "@/forms/ckeditor";

export type StaticPageFormValues = StaticPage;

export const initialStaticPageFormValues: StaticPageFormValues = {
    slug: "",
    title: {
        en: "",
        pl: "",
    },
    content: {
        en: "",
        pl: "",
    }
}

export const staticPageFormValuesTransformer: Transformer<StaticPage, StaticPageFormValues> = identityTransformer;

export function StaticPageForm() {
    const { t } = useTranslation("management");
    const spacing = useSpacing(2);

    return <div className={ spacing.vertical }>
        <Field label={ t("page.field.slug") } name="slug" fullWidth component={ TextFieldFormik }/>
        <Typography variant="subtitle2">{ t("page.field.title") }</Typography>
        <Field label={ t("translation:language.pl") } name="title.pl" fullWidth component={ TextFieldFormik }/>
        <Field label={ t("translation:language.en") } name="title.en" fullWidth component={ TextFieldFormik }/>
        <Typography variant="subtitle2">{ t("page.field.content") }</Typography>
        <Field label={ t("translation:language.pl") } name="content.pl" fullWidth component={ CKEditorField }/>
        <Field label={ t("translation:language.en") } name="content.en" fullWidth component={ CKEditorField }/>
    </div>
}