Image

let specimenFailures = `{"resources":["data:image/png;base64,T2FrbWVyZSBIYWxsIGxldHRlcmhlYWQ=","../../media/oakmere-hall-porch.png"],"errors":[]}`
let letterhead = "data:image/png;base64,T2FrbWVyZSBIYWxsIGxldHRlcmhlYWQ="
let steps: KitReact.Roles.ImageOverlay.steps = {
  previous: Inert,
  next: Inert,
  index: 1,
  total: 2,
  firstLabel: "Previous image, the first image",
  lastLabel: "Next image, the last image",
}

let file = (~name, ~nameId, ~image): KitReact.Roles.FormGroup.fileItem => {
  name,
  nameId,
  state: Chosen,
  stateWords: "Chosen",
  image,
  props: {},
  nameProps: {},
  stateProps: {},
  reasonProps: {},
  removeProps: {},
}

@react.component
let make = () => <>
  <KitReact.Roles.FactGroup>
    <KitReact.Roles.LabelledFact name={React.string("Hall name")} value={Words([KitReact.Words.Text("Oakmere Village Hall")])} />
    <KitReact.Roles.LabelledFact
      name={React.string("Logo")}
      value={Image({
        id: "image-logo",
        overlay: "image-logo-overlay",
        src: "../../media/oakmere-hall-wordmark.svg",
        alt: "Oakmere Hall wordmark",
        width: 1200,
        height: 120,
        failureWords: [KitReact.Words.Text("The logo cannot be shown.")],
      })}
    />
    <KitReact.Roles.LabelledFact
      name={React.string("Condition photo")}
      value={Image({
        id: "image-photo",
        overlay: "image-photo-overlay",
        src: "../../chair-damage.svg",
        alt: "Chair with a split seat, photographed after a hall booking.",
        width: 800,
        height: 500,
        failureWords: [KitReact.Words.Text("The photo cannot be shown.")],
      })}
    />
    <KitReact.Roles.LabelledFact
      name={React.string("Letterhead")}
      value={Image({
        id: "image-letterhead",
        overlay: "image-letterhead-overlay",
        src: letterhead,
        alt: "Oakmere Hall letterhead",
        width: 1240,
        height: 1754,
        failureWords: [KitReact.Words.Text("The letterhead cannot be shown.")],
      })}
    />
  </KitReact.Roles.FactGroup>
  <KitReact.Roles.ImageOverlay
    id="image-logo-overlay"
    failureWords=[KitReact.Words.Text("The logo cannot be shown.")]
    props={{tabIndex: -1, ariaLabelledby: "image-logo-overlay-caption"}}
    width={1200} height={120} imageProps={{src: "../../media/oakmere-hall-wordmark.svg", alt: "Oakmere Hall wordmark"}}
    caption={React.string("Oakmere Hall wordmark")}
    captionProps={{id: "image-logo-overlay-caption"}}
    actionsLabel="Hall images"
    steps={{...steps, next: Link("#image-photo-overlay")}}
    openFileHref="../../media/oakmere-hall-wordmark.svg"
    closeHref="#image-logo"
  />
  <KitReact.Roles.ImageOverlay
    id="image-photo-overlay"
    failureWords=[KitReact.Words.Text("The photo cannot be shown.")]
    props={{tabIndex: -1, ariaLabelledby: "image-photo-overlay-caption"}}
    width={800} height={500} imageProps={{src: "../../chair-damage.svg", alt: "Chair with a split seat, photographed after a hall booking."}}
    caption={React.string("Split chair seat")}
    captionProps={{id: "image-photo-overlay-caption"}}
    actionsLabel="Hall images"
    steps={{...steps, previous: Link("#image-logo-overlay"), index: 2}}
    openFileHref="../../chair-damage.svg"
    closeHref="#image-photo"
  />
  <KitReact.Roles.ImageOverlay
    id="image-letterhead-overlay"
    failureWords=[KitReact.Words.Text("The letterhead cannot be shown.")]
    props={{tabIndex: -1, ariaLabelledby: "image-letterhead-overlay-caption"}}
    width={1240} height={1754} imageProps={{src: letterhead, alt: "Oakmere Hall letterhead"}}
    caption={React.string("Oakmere Hall letterhead")}
    captionProps={{id: "image-letterhead-overlay-caption"}}
    actionsLabel="Hall images"
    openFileHref=letterhead
    closeHref="#image-letterhead"
  />
  <KitReact.Roles.FormGroup
    id="image-hall-pictures-group"
    kind=File
    label={React.string("Hall pictures")}
    labelProps={{htmlFor: "image-hall-pictures"}}
    help={React.string("Accepts images.")}
    controlProps={{id: "image-hall-pictures", name: "pictures", multiple: true, accept: "image/*"}}
    files=[
      file(
        ~name="oakmere-hall-crest.svg",
        ~nameId="image-hall-pictures-crest",
        ~image={source: Src("../../media/oakmere-hall-crest.svg"), alt: "Oakmere Hall crest", props: {id: "image-crest"}},
      ),
      file(
        ~name="oakmere-hall-porch.png",
        ~nameId="image-hall-pictures-porch",
        ~image={source: Src("../../media/oakmere-hall-porch.png"), alt: "Oakmere Hall porch", props: {id: "image-porch"}},
      ),
    ]
  />
</>