Phone sheet

let reader = Specimen_Reader.reader

let choice = (label, value): KitReact.Roles.FormGroup.optionItem => {
  label: React.string(label),
  value,
  props: {},
}

@react.component
let make = (~print: Specimen_Print.t) =>
  <>
    <details>
      <summary>{React.string("Calendar with Filters")}</summary>
      <KitReact.Layouts.Calendar
        printIdentity={print.identity} printSubject={print.subject} printStanding={print.standing} printTenant=?print.tenant
        subjectState=None
        toolbarProps={{ariaLabel: "Calendar controls"}}
        range={
          days: KitReact.Time.dayRange(reader, ~first={year: 2025, month: 4, day: 14}, ~last={year: 2025, month: 4, day: 16}),
          today: {label: "Today", props: {}},
          previous: {label: "Previous week", href: "?week=previous", props: {rel: "prev"}},
          next: {label: "Next week", href: "?week=next", props: {rel: "next"}},
          date: {group: {id: "phone-sheet-open-date", label: React.string("Go to a date"), kind: KitReact.Roles.DateField.control({name: "date", reader: Specimen_Reader.reader, value: Day(KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 4, day: 14})), today: KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 4, day: 14}), direction: Either})}},
        }
        scopeId="role-phone-sheet-calendar-filters"
        filtersLabel="Filters"
        scope=[
          FormGroup({id: "role-phone-sheet-calendar-hall-form-group",
            kind: KitReact.Roles.FormGroup.Select,
            label: React.string("Hall"),
            labelProps: {htmlFor: "role-phone-sheet-calendar-hall"},
            controlProps: {id: "role-phone-sheet-calendar-hall"},
            options: [choice("All halls", "all"), choice("Oakmere Hall", "oakmere")],
          }),
          FormGroup({id: "role-phone-sheet-calendar-room-form-group",
            kind: KitReact.Roles.FormGroup.Select,
            label: React.string("Room"),
            labelProps: {htmlFor: "role-phone-sheet-calendar-room"},
            controlProps: {id: "role-phone-sheet-calendar-room"},
            options: [choice("All rooms", "all"), choice("Main Hall", "main-hall")],
          }),
        ]
        view={<KitReact.Roles.FormGroup id="role-phone-sheet-calendar-view-form-group"
          label={React.string("View")}
          kind={KitReact.Roles.SegmentedControl.controlSet({name: "role-phone-sheet-calendar-view", value: "week", options: Two({value: "week", content: React.string("Week")}, {value: "day", content: React.string("Day")})})}
        />}
        actions={content: [PrimaryAction({props: {type_: "button"}, children: React.string("New booking")})]}
        content={subjectRegion => <KitReact.Layouts.Calendar.Days subjectRegion>
          <KitReact.Layouts.Calendar.Day
            day={KitReact.Time.day(reader, {year: 2025, month: 4, day: 14})}
            empty={<p>{React.string("Nothing booked")}</p>}
          />
        </KitReact.Layouts.Calendar.Days>}
      />
    </details>
  </>