Labelled fact

let closing: KitReact.AuthoredText.shown = {
  value: [
    Paragraph([Text("Leave by the side gate.", [])]),
    TaskList([{checked: true, content: [[Text("Heating off", [])]]}, {checked: false, content: [[Text("Gate locked", [])]]}]),
  ],
  reader: Specimen_Reader.reader,
  mentionLink: (_, _) => None,
  fileLink: _ => None,
}

let note: KitReact.AuthoredText.shown = {
  value: [
    Heading([Text("Before you arrive", [])]),
    Paragraph([
      Text("Ask ", []),
      Mention({kind: Person, id: "aisha-khan", label: "Aisha Khan"}),
      Text(" to confirm ", []),
      Text("the address", [Bold]),
      Text(" for ", []),
      Mention({kind: Subject, id: "b-1042", label: "B-1042 Garden room"}),
      Text(" before ", []),
      Date({year: 2025, month: 3, day: 14}),
      Text(".", []),
      HardBreak,
      Text("Read the ", []),
      Text("hire terms", [Link("https://example.com/hire-terms")]),
      Text(" first, ", []),
      Text("then", [Italic]),
      Text(" use ", []),
      Text("4721", [Code]),
      Text(" at the gate.", []),
    ]),
    BulletList([[[Text("Bring your own chairs.", [])]], [[Text("Leave the hall by ten.", [])]]]),
    OrderedList([[[Text("Ring the bell by the side gate.", [])]], [[Text("Wait for the caretaker.", [])]]]),
    TaskList([{checked: true, content: [[Text("Deposit paid", [])]]}, {checked: false, content: [[Text("Key returned", [])]]}]),
    Blockquote([[Text("The side door sticks in the cold.", [])]]),
    CodeBlock("Gate: 4721\nAlarm: 0990"),
    Paragraph([Text("Floor plan: ", []), File({id: "floor-plan", name: "garden-room-plan.pdf"})]),
  ],
  reader: Specimen_Reader.reader,
  mentionLink: (kind, _) =>
    switch kind {
    | Person => Some("#role-labelled-fact")
    | Subject => None
    },
  fileLink: _ => Some("#role-labelled-fact"),
}

module BillingEmail = {
  @react.component
  let make = (~id, ~editing as initial, ~controlValue, ~error=?, ~keep=?, ~unsaved=?, ~state=?) => {
    let (editing, setEditing) = React.useState(() => initial)
    <KitReact.Roles.FactGroup>
      <KitReact.Roles.LabelledFact
        name={React.string("Billing email")}
        value={Content(<KitReact.Email address="accounts@oakmereprimary.org" />)}
        supporting=[{pieces: [KitReact.Words.Text("Invoices for every hire go here")]}]
        edit={{
          id,
          editing,
          ?state,
          label: "Edit billing email",
          onEdit: () => setEditing(_ => true),
          onCancel: () => setEditing(_ => false),
          onSave: event => {
            JsxEvent.Form.preventDefault(event)
            setEditing(_ => false)
          },
          content: [KitReact.Roles.LabelledFact.FormGroup({
            id: id ++ "-form-group",
            kind: Email,
            label: React.string("Billing email"),
            controlProps: {name: "email"},
            controlValue,
            printedValue: React.string(controlValue),
            help: React.string("Use the address that receives the hirer’s invoices."),
            ?error,
          })],
          props: {id: ?keep->Option.map(_ => id ++ "-form")},
          editProps: {},
          saveProps: {},
          cancelProps: {},
          ?keep,
          ?unsaved,
        }}
      />
      <KitReact.Roles.LabelledFact name={React.string("Hirer")} value={Words([KitReact.Words.Text("Oakmere Primary School")])} />
    </KitReact.Roles.FactGroup>
  }
}

module ClassAges = {
  @react.component
  let make = () => {
    let (editing, setEditing) = React.useState(() => true)
    let radio = (value, label, checked): KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.RadioGroup.kind> => {
      label: React.string(label), kind: KitReact.Roles.SelectionControl.RadioGroup.Radio, checked, printedValue: [KitReact.Words.Text(checked ? "Chosen" : "Not chosen")], props: {}, controlProps: {name: "class-ages", value}, outputProps: {}, reasonProps: {},
    }
    let older: array<KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.Group.kind>> = [
      {label: React.string("Include all older dancers"), kind: KitReact.Roles.SelectionControl.Group.Checkbox, checked: true, printedValue: [KitReact.Words.Text("Included")], props: {}, controlProps: {name: "include-older", value: "true"}, outputProps: {}, reasonProps: {}},
    ]
    let range = {
      ...radio("range", "An age range", true),
      kind: KitReact.Roles.SelectionControl.RadioGroup.RadioFields({value: "range", fields: <>
        <KitReact.Roles.FormGroup id="class-ages-editing-youngest-form-group"
          label={React.string("Youngest age")}
          labelProps={{htmlFor: "class-ages-editing-youngest"}}
          controlProps={{id: "class-ages-editing-youngest", name: "youngest-age", inputMode: "numeric"}} controlValue="5" printedValue={React.string("5")}
          kind=Text(Narrow)
        />
        <KitReact.Roles.FormGroup id="class-ages-editing-oldest-form-group"
          label={React.string("Oldest age")}
          labelProps={{htmlFor: "class-ages-editing-oldest"}}
          controlProps={{id: "class-ages-editing-oldest", name: "oldest-age", inputMode: "numeric"}} controlValue="11" printedValue={React.string("11")}
          kind=Text(Narrow)
        />
        <KitReact.Roles.SelectionControl.Group id="class-ages-editing-older" choices=older />
      </>}),
      controlProps: {name: "class-ages"},
    }
    <KitReact.Roles.FactGroup>
      <KitReact.Roles.LabelledFact
        name={React.string("Ages")}
        value={Words([KitReact.Words.Text("5 to 11, and all older dancers")])}
        edit={{
          id: "class-ages-editing",
          editing,
          label: "Edit ages",
          onEdit: () => setEditing(_ => true),
          onCancel: () => setEditing(_ => false),
          onSave: event => {
            JsxEvent.Form.preventDefault(event)
            setEditing(_ => false)
          },
          content: [KitReact.Roles.LabelledFact.SelectionControlRadioGroup({
            id: "class-ages-editing-group",
            choices: [radio("all", "All ages", false), range, radio("audition", "By audition", false)],
            legend: React.string("Ages"),
          })],
          props: {},
          editProps: {},
          saveProps: {},
          cancelProps: {},
        }}
      />
    </KitReact.Roles.FactGroup>
  }
}

@react.component
let make = () =>
  <>
  <p className="specimen-case-line">{React.string("Amount, Stamp, Tag and Image values keep their roles.")}</p>
  <KitReact.Roles.FactGroup>
    <KitReact.Roles.LabelledFact name={React.string("Amount due")} value={Content(<KitReact.Roles.Amount value={KitReact.Amount.money(Specimen_Reader.reader, ~amount="84.00", ~currency="GBP")} />)} />
    <KitReact.Roles.LabelledFact name={React.string("Standing")} value={Content(<KitReact.Roles.Stamp state=Neutral>{React.string("Draft")}</KitReact.Roles.Stamp>)} />
    <KitReact.Roles.LabelledFact name={React.string("Tags")} value={Tags({id: "fact-tags", reader: Specimen_Reader.reader, tags: [{name: "Regular"}]})} />
    <KitReact.Roles.LabelledFact name={React.string("Condition photo")} value={Image({id: "fact-photo", overlay: "fact-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.FactGroup>
  <KitReact.Roles.ImageOverlay id="fact-photo-overlay" failureWords=[KitReact.Words.Text("The photo cannot be shown.")] props={{tabIndex: -1, ariaLabelledby: "fact-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: "fact-photo-overlay-caption"}} actionsLabel="Condition photo" openFileHref="../../chair-damage.svg" closeHref="#fact-photo" />
  <KitReact.Roles.FactGroup>
  <KitReact.Roles.LabelledFact
    name={React.string("Standing")}
    value={Stamp(Neutral, [KitReact.Words.Text("Draft")])}
  />
  <KitReact.Roles.LabelledFact
    name={React.string("Booking")}
    value={Stamp(SettledEnded, [KitReact.Words.Text("Cancelled")])}
  />
  <KitReact.Roles.LabelledFact
    name={React.string("Amount due")}
    value={Words([KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~amount="84.00", ~currency="GBP"))])}
    supporting=[{pieces: [KitReact.Words.Amount(KitReact.Amount.count(Specimen_Reader.reader, 1)), KitReact.Words.Text(" booking")]}]
  />
  <KitReact.Roles.LabelledFact
    name={React.string("Issued")}
    value={Content(<KitReact.Roles.Time value={KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 4, day: 3})} />)}
    supporting=[
      {
        pieces: [
          KitReact.Words.Text("By Maya Patel at "),
          KitReact.Words.Time(KitReact.Time.timeOfDay(Specimen_Reader.reader, Date.fromString("2025-04-03T08:12:00Z"))),
        ],
      },
    ]
  />
  <KitReact.Roles.LabelledFact
    name={React.string("Bookings")}
    value={Words([KitReact.Words.Amount(KitReact.Amount.count(Specimen_Reader.reader, 3))])}
    supporting=[
      {pieces: [KitReact.Words.Text("Main Hall, "), KitReact.Words.Time(KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 4, day: 12}))]},
      {pieces: [KitReact.Words.Text("Meeting Room, "), KitReact.Words.Time(KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 4, day: 15}))]},
      {
        pieces: [
          KitReact.Words.Text("Main Hall, "),
          KitReact.Words.Time(KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 4, day: 19})),
          KitReact.Words.Text(", the spring term choir rehearsal"),
        ],
      },
    ]
  />
  <KitReact.Roles.LabelledFact
    name={React.string("Hirers' rating")}
    value={Rating({
      score: KitReact.Amount.score(Specimen_Reader.reader, ~amount="4.5", ~decimals=1),
      words: [
        KitReact.Words.Amount(KitReact.Amount.score(Specimen_Reader.reader, ~amount="4.5", ~decimals=1)),
        KitReact.Words.Text(" from "),
        KitReact.Words.Amount(KitReact.Amount.count(Specimen_Reader.reader, 38)),
        KitReact.Words.Text(" reviews"),
      ],
      spoken: [
        KitReact.Words.Amount(KitReact.Amount.score(Specimen_Reader.reader, ~amount="4.5", ~decimals=1)),
        KitReact.Words.Text(" out of "),
        KitReact.Words.Amount(KitReact.Amount.count(Specimen_Reader.reader, 5)),
        KitReact.Words.Text(", from "),
        KitReact.Words.Amount(KitReact.Amount.count(Specimen_Reader.reader, 38)),
        KitReact.Words.Text(" reviews"),
      ],
    })}
  />
  <KitReact.Roles.LabelledFact
    name={React.string("Email")}
    value={Content(<KitReact.Email address="penelope.quintanilla.wexford@meetingrooms.bookings.oakmereprimaryschoolhall.example" />)}
  />
  <KitReact.Roles.LabelledFact
    name={React.string("Booking reference")}
    value={Content(<code> {React.string("BH2025021413001600MEETINGROOM00580PD198LOCKBOX0412Q7")} </code>)}
  />
  <KitReact.Roles.LabelledFact
    name={React.string("Correction")}
    value={Content(<>
      {React.string("Reissued with the corrected billing address as ")}
      <KitReact.Identifier value="OH-INV-2025-0003-R1" />
    </>)}
  />
  <KitReact.Roles.LabelledFact
    name={React.string("Purchase order")}
    value={Words([KitReact.Words.Text("Not known")])}
  />
  <KitReact.Roles.LabelledFact
    name={React.string("Billing contact")}
    value={Words([KitReact.Words.Text("Aisha Khan")])}
    supporting=[{pieces: [KitReact.Words.Text("Billing address not confirmed")]}]
  />
  <KitReact.Roles.LabelledFact
    name={React.string("Purpose of hire")}
    value={Words([KitReact.Words.Text("Weekly choir rehearsal for the spring term, with the piano moved to the stage end, forty chairs set in rows facing it and the serving hatch open for tea in the interval")])}
    supporting=[
      {
        pieces: [
          KitReact.Words.Text("Agreed with the caretaker on "),
          KitReact.Words.Time(KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 3, day: 28})),
          KitReact.Words.Text(", on the condition that the hall is cleared by "), KitReact.Words.Time(KitReact.Time.clock(Specimen_Reader.reader, {hour: 21, minute: 30})), KitReact.Words.Text(" and the chairs are stacked in the store room"),
        ],
      },
    ]
  />
  <KitReact.Roles.LabelledFact
    name={React.string("Access note")}
    value={AuthoredText(note)}
  />
  </KitReact.Roles.FactGroup>
  <p>
    {React.string("Send the signed form to ")}
    <KitReact.Email address="aisha.khan@oakmereprimaryschool.example" />
    {React.string(", and the hall confirms the booking.")}
  </p>
  <p>
    {React.string("Questions about the invoice go to ")}
    <a href="mailto:penelope.quintanilla.wexford@meetingrooms.bookings.oakmereprimaryschoolhall.example">
      <KitReact.Email address="penelope.quintanilla.wexford@meetingrooms.bookings.oakmereprimaryschoolhall.example" />
    </a>
    {React.string(", who answers within two days.")}
  </p>
  <p> {React.string("Billing email edited where it stands.")} </p>
  <BillingEmail id="billing-email-edit" editing=false controlValue="accounts@oakmereprimary.org" />
  <p className="specimen-case-line">{React.string("Billing email waiting to be edited.")}</p>
  <BillingEmail id="billing-email-inert" editing=false controlValue="accounts@oakmereprimary.org" state=Inert({id: "billing-email-inert-action", words: [KitReact.Words.Text("Confirm the billing contact before editing.")]}) />
  <p> {React.string("Billing email being edited.")} </p>
  <BillingEmail id="billing-email-editing" editing=true controlValue="accounts@oakmereprimary.org" />
  <p> {React.string("Billing email refused on save.")} </p>
  <BillingEmail
    id="billing-email-refused"
    editing=true
    controlValue="accounts@"
    error={React.string("Enter a complete billing email, such as aisha@oakmereprimary.org.")}
  />
  <p> {React.string("Billing email reopened holding a kept entry.")} </p>
  <BillingEmail
    id="billing-email-kept"
    editing=true
    controlValue="bursar@oakmereprimary.org"
    keep={key: "aisha-khan/hirer/oakmere-primary/billing-email", version: "12"}
    unsaved={state: Attention, standing: [KitReact.Words.Text("Not saved")]}
  />
  <p> {React.string("Class ages being edited, an age range chosen.")} </p>
  <ClassAges />
  <p className="specimen-case-line">{React.string("A value in words carries its Amount within the sentence.")}</p>
  <KitReact.Roles.FactGroup>
    <KitReact.Roles.LabelledFact
      name={React.string("Deposit")}
      value={Words([
        KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~amount="50.00", ~currency="GBP")),
        KitReact.Words.Text(", returned once the hall is cleared"),
      ])}
    />
  </KitReact.Roles.FactGroup>
  <p className="specimen-case-line">{React.string("A value written across lines stands under its label, beside a sentence carrying an Amount.")}</p>
  <KitReact.Roles.FactGroup>
    <KitReact.Roles.LabelledFact
      name={React.string("Hire fee")}
      value={Words([KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~amount="120.00", ~currency="GBP"))])}
    />
    <KitReact.Roles.LabelledFact
      name={React.string("Cleaning")}
      value={Words([
        KitReact.Words.Text("Charged at "),
        KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~amount="25.00", ~currency="GBP")),
        KitReact.Words.Text(" when the kitchen is left unwashed after the hire"),
      ])}
    />
  </KitReact.Roles.FactGroup>
  <p className="specimen-case-line">{React.string("A value given an address stands inside a link named by its label; the current one is marked.")}</p>
  <KitReact.Roles.FactGroup>
    <KitReact.Roles.LabelledFact
      name={React.string("Invoiced")}
      value={Words([KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~amount="2096.00", ~currency="GBP"))])}
      valueId="fact-invoiced"
      valueHref="?measure=invoiced"
      valueCurrent=true
    />
    <KitReact.Roles.LabelledFact
      name={React.string("Collected")}
      value={Words([KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~amount="1640.00", ~currency="GBP"))])}
      valueId="fact-collected"
      valueHref="?measure=collected"
    />
    <KitReact.Roles.LabelledFact
      name={React.string("Deposit")}
      value={Stamp(Attention, [KitReact.Words.Text("Unpaid")])}
      valueId="fact-deposit"
      valueHref="?view=deposit"
    />
  </KitReact.Roles.FactGroup>
  <p className="specimen-case-line">{React.string("A Labelled fact in its div form holding a note.")}</p>
  <KitReact.Roles.FactGroup>
    <KitReact.Roles.LabelledFact element=KitReact.Roles.LabelledFact.Div name={React.string("Closing up")} value={AuthoredText(closing)} />
  </KitReact.Roles.FactGroup>
  </>

module BillingEmail = {
  @react.component
  let make = () => {
    let (editing, setEditing) = React.useState(() => true)
    let id = "role-labelled-fact-failed-editing"
    <KitReact.Roles.FactGroup>
      <KitReact.Roles.LabelledFact
        name={React.string("Billing email")}
        value={Content(<KitReact.Email address="accounts@oakmereprimary.org" />)}
        supporting=[{pieces: [KitReact.Words.Text("Invoices for every hire go here")]}]
        standing={Failed({
          words: [KitReact.Words.Text("Billing email was not changed to finance@oakmereprimary.org: the connection dropped before it saved.")],
          tryAgain: {},
        })}
        edit={{
          id,
          editing,
          label: "Edit billing email",
          onEdit: () => setEditing(_ => true),
          onCancel: () => setEditing(_ => false),
          onSave: event => {
            JsxEvent.Form.preventDefault(event)
            setEditing(_ => false)
          },
          content: [KitReact.Roles.LabelledFact.FormGroup({
            id: id ++ "-form-group",
            kind: Email,
            label: React.string("Billing email"),
            controlProps: {name: "email"},
            controlValue: "finance@oakmereprimary.org",
            printedValue: React.string("finance@oakmereprimary.org"),
            help: React.string("Use the address that receives the hirer’s invoices."),
          })],
          props: {},
          editProps: {},
          saveProps: {},
          cancelProps: {},
        }}
      />
    </KitReact.Roles.FactGroup>
  }
}

@react.component
let make = () => <>
  <KitReact.Roles.FactGroup>
    <KitReact.Roles.LabelledFact
      name={React.string("Standing")}
      value={Stamp(Settled, [KitReact.Words.Text("Cancelled")])}
      supporting=[{pieces: [KitReact.Words.Text("By Maya Patel on "), KitReact.Words.Time(KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 4, day: 18}))]}]
      standing={Failed({
        words: [KitReact.Words.Text("This meeting was not reinstated: the connection dropped before it saved.")],
        tryAgain: {},
      })}
    />
  </KitReact.Roles.FactGroup>
  <p className="specimen-case-line">{React.string("With Try again unavailable.")}</p>
  <KitReact.Roles.FactGroup>
    <KitReact.Roles.LabelledFact
      name={React.string("Standing")}
      value={Stamp(Settled, [KitReact.Words.Text("Cancelled")])}
      supporting=[{pieces: [KitReact.Words.Text("By Maya Patel on "), KitReact.Words.Time(KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 4, day: 18}))]}]
      standing={Failed({
        words: [KitReact.Words.Text("This meeting was not reinstated: the connection dropped before it saved.")],
        tryAgain: {},
        tryAgainState: Inert({id: "role-labelled-fact-failed-try-again", words: [KitReact.Words.Text("Try again once you are back online.")]}),
      })}
    />
  </KitReact.Roles.FactGroup>
  <p className="specimen-case-line">{React.string("With the edit open.")}</p>
  <BillingEmail />
</>

@react.component
let make = () => <>
  <KitReact.Roles.FactGroup>
    <KitReact.Roles.LabelledFact
      name={React.string("Room")}
      value={Words([KitReact.Words.Text("Garden Room")])}
      standing={Conflict({
        words: [KitReact.Words.Text("Maya Patel moved this meeting to the Garden Room while you were moving it to the Main Hall.")],
        label: "Move it to the Main Hall", action: {},
      })}
    />
  </KitReact.Roles.FactGroup>
  <p className="specimen-case-line">{React.string("With the action unavailable.")}</p>
  <KitReact.Roles.FactGroup>
    <KitReact.Roles.LabelledFact
      name={React.string("Room")}
      value={Words([KitReact.Words.Text("Garden Room")])}
      standing={Conflict({
        words: [KitReact.Words.Text("Maya Patel moved this meeting to the Garden Room while you were moving it to the Main Hall.")],
        label: "Move it to the Main Hall", action: {},
        actionState: Inert({id: "role-labelled-fact-conflict-action", words: [KitReact.Words.Text("The Main Hall is taken at that time.")]}),
      })}
    />
  </KitReact.Roles.FactGroup>
</>

@react.component
let make = () =>
  <KitReact.Roles.FactGroup>
    <KitReact.Roles.LabelledFact
      name={React.string("Standing")}
      value={Stamp(Settled, [KitReact.Words.Text("Scheduled")])}
      standing={Processing([KitReact.Words.Text("Reinstating this meeting…")])}
    />
  </KitReact.Roles.FactGroup>