import { addEventPeriodAPI } from "@/api";
import { PeriodForm } from "@/components/events";
import { BasePage, Header } from "@/components/layout";
import { CAPABILITY } from "@/utils/consts";
import { __ } from "@wordpress/i18n";
import { useParams } from "react-router";

export const AddEventPeriod = () => {
  const params = useParams();
  const defaultValues = {
    event_id: parseInt(params.eventId),
    location: "",
    online_meeting_url: "",
  };

  return (
    <BasePage capability={CAPABILITY.WRITE}>
      <Header title={__("Add Period", "yoyaku-manager")} />
      <PeriodForm
        defaultValues={defaultValues}
        dataHandler={addEventPeriodAPI}
        navigateTo={`/${params.eventId}`}
      />
    </BasePage>
  );
};