Local tabs

let here = "#role-local-tabs-current"
let location: JsxDOM.domProps = {ariaCurrent: #location}

let tab = (~current=?, ~changed=?, ~props=?, ~count=?, key, name): KitReact.Roles.LocalTabs.tab => {key, name, href: here, ?current, ?changed, ?props, ?count}
let text = (~current=?, ~changed=?, ~props=?, ~count=?, name) => tab(~current?, ~changed?, ~props?, ~count?, name, React.string(name))
let month = (~current=?, ~props=?, datetime, name) => tab(~current?, ~props?, datetime, <time dateTime=datetime> {React.string(name)} </time>)

@react.component
let make = () => {
  <>
    <KitReact.Roles.LocalTabs label="Invoice facets" tabs=[text(~current=true, "Details"), text("History")] />
    <p className="specimen-case-line"> {React.string("A saved view with changes to save.")} </p>
    <KitReact.Roles.LocalTabs label="Saved invoice views" tabs=[text(~current=true, ~changed=true, "Invoices awaiting payment from the autumn term accounts"), text("All invoices")] />
    <p> {React.string("Facets within the current page identify a location.")} </p>
    <KitReact.Roles.LocalTabs label="Invoice sections" tabs=[text(~current=true, ~props=location, "Invoice"), text("History")] />
    <KitReact.Roles.LocalTabs label="Booking views" tabs=[text(~current=true, ~props=location, "Summary"), text("Rooms and times"), text("Charges")] />
    <KitReact.Roles.LocalTabs label="Collection periods" tabs=[text("January"), text(~current=true, ~props=location, "February"), text("March")] />
    <KitReact.Roles.LocalTabs label="Charge periods" tabs=[
      month("2025-01", "January 2025"), month("2025-02", "February 2025"), month("2025-03", "March 2025"), month("2025-04", "April 2025"),
      month("2025-05", "May 2025"), month("2025-06", "June 2025"), month("2025-07", "July 2025"), month("2025-08", "August 2025"),
      month(~current=true, ~props=location, "2025-09", "September 2025"), month("2025-10", "October 2025"), month("2025-11", "November 2025"), month("2025-12", "December 2025"),
    ] />
    <KitReact.Roles.LocalTabs label="Parties to the booking" tabs=[text(~current=true, ~props=location, "Oakmere Primary School"), text("Oakmere Choir"), text("St Anne’s Scout Group")] />
    <p> {React.string("Views past the width fold into More, which counts what they hold.")} </p>
    <KitReact.Roles.LocalTabs label="Enquiry views" tabs=[
      text(~current=true, "Open"), text("Assigned to me"), text("Mentioning me"), text("Waiting on the hirer"), text("Snoozed"), text("Closed this week"), text("Spam"),
      text(~count={reader: Specimen_Reader.reader, count: 3, counts: "due", attention: true}, "Escalated"),
      text(~count={reader: Specimen_Reader.reader, count: 2, counts: "unread"}, "Unassigned"),
    ] />
    <p className="specimen-case-line"> {React.string("More waits for the enquiries.")} </p>
    <KitReact.Roles.LocalTabs label="Archived enquiry views" moreState={Inert({id: "role-local-tabs-current-inert-control", words: [KitReact.Words.Text("More views wait until the enquiries load.")]})} tabs=[
      text(~current=true, "Open"), text("Assigned to me"), text("Mentioning me"), text("Waiting on the hirer"), text("Snoozed"), text("Closed this week"), text("Spam"),
      text(~count={reader: Specimen_Reader.reader, count: 3, counts: "due", attention: true}, "Escalated"),
      text(~count={reader: Specimen_Reader.reader, count: 2, counts: "unread"}, "Unassigned"),
    ] />
  </>
}