anyone-oslo/pages

import DateRangeSelect from "../DateRangeSelect";
import usePageFormContext from "./usePageFormContext";

export default function Dates() {
  const { state, dispatch } = usePageFormContext();
  const { datesEnabled, page } = state;

  const toggleAllDay = () => {
    dispatch({ type: "update", payload: { all_day: !page.all_day } });
  };

  const toggleDatesEnabled = () => {
    dispatch({ type: "setDatesEnabled", payload: !datesEnabled });
  };

  const setDate = (attr: "starts_at" | "ends_at") => (date: Date) => {
    dispatch({ type: "update", payload: { [attr]: date } });
  };

  return (
    <div className="page-dates field">
      <input
        type="hidden"
        name="page[all_day]"
        value={datesEnabled && page.all_day ? "1" : "0"}
      />
      <label>Dates</label>
      <div className="toggles">
        <label className="has-dates-toggle">
          <input
            type="checkbox"
            checked={datesEnabled}
            onChange={toggleDatesEnabled}
          />
          Enabled
        </label>
        <label className={!datesEnabled && "disabled"}>
          <input
            type="checkbox"
            disabled={!datesEnabled}
            checked={page.all_day}
            onChange={toggleAllDay}
          />
          All day event
        </label>
      </div>
      <DateRangeSelect
        objectName="page"
        startsAt={page.starts_at}
        setStartsAt={setDate("starts_at")}
        endsAt={page.ends_at}
        setEndsAt={setDate("ends_at")}
        disabled={!datesEnabled}
        disableTime={page.all_day}
      />
    </div>
  );
}