Carousel

let failureWords = [KitReact.Words.Text("The photo cannot be shown.")]
let committee = "data:image/png;base64,Q29tbWl0dGVlIHJvb20="

let item = (~id, ~src, ~alt, ~width, ~height, ~props=?): KitReact.Roles.Carousel.item => {
  id,
  src,
  alt,
  width,
  height,
  overlay: id ++ "-overlay",
  failureWords,
  ?props,
}

let line = (words, count) => [KitReact.Words.Text(`${Int.toString(count)} ${words}`)]

let overlay = (~id, ~src, ~alt, ~width, ~height, ~caption, ~place=?, ~previous=?, ~next=?) => {
  let step = (address: option<string>) =>
    switch address {
    | Some(address) => KitReact.Roles.ImageOverlay.Link("#" ++ address ++ "-overlay")
    | None => Inert
    }
  <KitReact.Roles.ImageOverlay
    key={id ++ "-overlay"}
    id={id ++ "-overlay"}
    failureWords
    props={{tabIndex: -1, ariaLabelledby: id ++ "-overlay-caption"}}
    width height imageProps={{src, alt}}
    caption={React.string(caption)}
    captionProps={{id: id ++ "-overlay-caption"}}
    actionsLabel="Hall photos"
    steps=?{place->Option.map((index): KitReact.Roles.ImageOverlay.steps => {
      previous: step(previous),
      next: step(next),
      index,
      total: 13,
      firstLabel: "Previous photo, the first photo",
      lastLabel: "Next photo, the last photo",
    })}
    openFileHref=src
    closeHref={"#" ++ id}
  />
}

@react.component
let make = () => <>
  <KitReact.Roles.Carousel
    id="hall-photos"
    line={line("photos of the hall", ...)}
    first={item(~id="hall-photos-1", ~src="../../carousel/hall-front.svg", ~alt="Front of the hall from the lane", ~width=1200, ~height=800)}
    rest=[
      item(~id="hall-photos-2", ~src="../../carousel/main-hall.svg", ~alt="Main hall set with long tables", ~width=3000, ~height=750),
      item(~id="hall-photos-3", ~src="../../carousel/stage.svg", ~alt="Stage with its curtains open", ~width=900, ~height=1200),
      item(~id="hall-photos-4", ~src="../../carousel/kitchen.svg", ~alt="Kitchen counters and cupboards", ~width=1600, ~height=1200),
      item(~id="hall-photos-5", ~src=committee, ~alt="Committee room with chairs round a table", ~width=1200, ~height=900),
      item(~id="hall-photos-6", ~src="../../carousel/garden.svg", ~alt="Garden behind the hall", ~width=1920, ~height=1080),
      item(~id="hall-photos-7", ~src="../../carousel/porch.svg", ~alt="Porch at the main door", ~width=1000, ~height=1000),
      item(~id="hall-photos-8", ~src="../../carousel/car-park.svg", ~alt="Car park beside the hall", ~width=1500, ~height=1000),
    ]
  />
  <KitReact.Roles.Carousel
    id="room-photos"
    line={line("photos of the hall set for an event", ...)}
    first={item(~id="room-photos-1", ~src="../../carousel/chairs.svg", ~alt="Chairs stacked along the wall", ~width=1200, ~height=800)}
    rest=[
      item(~id="room-photos-2", ~src="../../carousel/tables.svg", ~alt="Two tables laid for tea", ~width=1600, ~height=900),
      item(~id="room-photos-3", ~src="../../carousel/dusk.svg", ~alt="The hall at dusk with its windows lit", ~width=2400, ~height=800),
      item(
        ~id="room-photos-4",
        ~src="../../carousel/piano.svg",
        ~alt="Upright piano beside the stage",
        ~width=1000,
        ~height=1000,
        ~props={style: ({}: ReactDOM.Style.t)->ReactDOM.Style.unsafeAddProp("scrollInitialTarget", "nearest")},
      ),
    ]
  />
  <KitReact.Roles.Carousel
    id="door-photos"
    line={line("photos of the side door", ...)}
    first={item(~id="door-photos-1", ~src="../../carousel/noticeboard.svg", ~alt="Noticeboard inside the side door", ~width=600, ~height=800)}
    rest=[item(~id="door-photos-2", ~src="../../carousel/doorway.svg", ~alt="Side door from the path", ~width=600, ~height=800)]
  />
  {overlay(~id="hall-photos-1", ~src="../../carousel/hall-front.svg", ~alt="Front of the hall from the lane", ~width=1200, ~height=800, ~caption="Front of the hall", ~place=1, ~next="hall-photos-2")}
  {overlay(~id="hall-photos-2", ~src="../../carousel/main-hall.svg", ~alt="Main hall set with long tables", ~width=3000, ~height=750, ~caption="Main hall", ~place=2, ~previous="hall-photos-1", ~next="hall-photos-3")}
  {overlay(~id="hall-photos-3", ~src="../../carousel/stage.svg", ~alt="Stage with its curtains open", ~width=900, ~height=1200, ~caption="Stage", ~place=3, ~previous="hall-photos-2", ~next="hall-photos-4")}
  {overlay(~id="hall-photos-4", ~src="../../carousel/kitchen.svg", ~alt="Kitchen counters and cupboards", ~width=1600, ~height=1200, ~caption="Kitchen", ~place=4, ~previous="hall-photos-3", ~next="hall-photos-6")}
  {overlay(~id="hall-photos-5", ~src=committee, ~alt="Committee room with chairs round a table", ~width=1200, ~height=900, ~caption="Committee room")}
  {overlay(~id="hall-photos-6", ~src="../../carousel/garden.svg", ~alt="Garden behind the hall", ~width=1920, ~height=1080, ~caption="Garden", ~place=5, ~previous="hall-photos-4", ~next="hall-photos-7")}
  {overlay(~id="hall-photos-7", ~src="../../carousel/porch.svg", ~alt="Porch at the main door", ~width=1000, ~height=1000, ~caption="Porch", ~place=6, ~previous="hall-photos-6", ~next="hall-photos-8")}
  {overlay(~id="hall-photos-8", ~src="../../carousel/car-park.svg", ~alt="Car park beside the hall", ~width=1500, ~height=1000, ~caption="Car park", ~place=7, ~previous="hall-photos-7", ~next="room-photos-1")}
  {overlay(~id="room-photos-1", ~src="../../carousel/chairs.svg", ~alt="Chairs stacked along the wall", ~width=1200, ~height=800, ~caption="Stacked chairs", ~place=8, ~previous="hall-photos-8", ~next="room-photos-2")}
  {overlay(~id="room-photos-2", ~src="../../carousel/tables.svg", ~alt="Two tables laid for tea", ~width=1600, ~height=900, ~caption="Tea tables", ~place=9, ~previous="room-photos-1", ~next="room-photos-3")}
  {overlay(~id="room-photos-3", ~src="../../carousel/dusk.svg", ~alt="The hall at dusk with its windows lit", ~width=2400, ~height=800, ~caption="Hall at dusk", ~place=10, ~previous="room-photos-2", ~next="room-photos-4")}
  {overlay(~id="room-photos-4", ~src="../../carousel/piano.svg", ~alt="Upright piano beside the stage", ~width=1000, ~height=1000, ~caption="Piano", ~place=11, ~previous="room-photos-3", ~next="door-photos-1")}
  {overlay(~id="door-photos-1", ~src="../../carousel/noticeboard.svg", ~alt="Noticeboard inside the side door", ~width=600, ~height=800, ~caption="Noticeboard", ~place=12, ~previous="room-photos-4", ~next="door-photos-2")}
  {overlay(~id="door-photos-2", ~src="../../carousel/doorway.svg", ~alt="Side door from the path", ~width=600, ~height=800, ~caption="Side door", ~place=13, ~previous="door-photos-1")}
</>