import { useTranslation } from "next-i18next";

import { Grid, Modal, Text, Textarea, TextInput } from "@mantine/core";

import { useForm } from "@mantine/form";
//import { DateTimePicker } from '@mantine/dates';

export default function EventModal({ open, close, event }) {
  const { t } = useTranslation("common");

  const initialValues = {
    title: "",
    description: "",
    speaker: "",
    start: null,
    end: null,
    place: "",
    signUp: "",
    isStammtisch: false,
  };

  const form = useForm({
    initialValues: initialValues,

    validate: {
      title: (value) => (value ? null : t("ENotEmpty")),
      description: (value) => (value ? null : t("ENotEmpty")),
      speaker: (value) => (value ? null : t("ENotEmpty")),
      start: (value) => (value ? null : t("ENotEmpty")),
      end: (value) => (value ? null : t("ENotEmpty")),
      place: (value) => (value ? null : t("ENotEmpty")),
      signUp: (value) => (value ? null : t("ENotEmpty")),
    },
  });

  const setEvent = () => {
    if (event) {
      form.setValues({ ...event });
    } else {
      form.setValues(initialValues);
    }
  };

  return (
    <Modal opened={open} onClose={close} fz="xl" size="xl">
      <Text variant="h2" fw={700}>
        {event ? t("editEvent") : t("addEvent")}
      </Text>

      <form onSubmit={form.onSubmit((values) => submit(values))}>
        <Grid>
          <Grid.Col sm={12} md={6}>
            <TextInput
              withAsterisk
              label={t("title")}
              placeholder="Introduction to Free Software"
              {...form.getInputProps("title")}
            />
          </Grid.Col>
          <Grid.Col sm={12} md={6}>
            <TextInput
              withAsterisk
              label={t("speaker")}
              placeholder="Maxime Musterfrau"
              {...form.getInputProps("speaker")}
            />
          </Grid.Col>
          <Grid.Col sm={12}>
            <Textarea
              withAsterisk
              label={t("description")}
              placeholder="Lorem Ipsum..."
              {...form.getInputProps("description")}
            />
          </Grid.Col>
          <Grid.Col sm={12} md={6}>
            <TextInput
              withAsterisk
              label={t("place")}
              placeholder="ETH HG F 7"
              {...form.getInputProps("place")}
            />
          </Grid.Col>
          <Grid.Col sm={12} md={6}></Grid.Col>
          <Grid.Col sm={12} md={6}>
            <TextInput
              withAsterisk
              label={t("signUp")}
              placeholder="https://..."
              {...form.getInputProps("signUp")}
            />
          </Grid.Col>
        </Grid>
      </form>
    </Modal>
  );
}