Switch

let on = [KitReact.Words.Text("On")]
let off = [KitReact.Words.Text("Off")]

let flipped = set => event => {
  let checked = ReactEvent.Form.currentTarget(event)["checked"]
  set(_ => checked)
}

@react.component
let make = () => {
  let (summary, setSummary) = React.useState(() => false)
  let (online, setOnline) = React.useState(() => true)
  let (texts, setTexts) = React.useState(() => false)
  <>
    <KitReact.Roles.FormGroup
      id="react-switch-summary"
      label={React.string("Weekly summary")}
      help={React.string("An email each Monday with the week's changes.")}
      kind={KitReact.Roles.Switch.control({
        name: "summary",
        checked: summary,
        onWords: on,
        offWords: off,
        props: {onChange: flipped(setSummary)},
      })}
    />
    <KitReact.Roles.FormGroup
      id="react-switch-online"
      label={React.string("Show when I'm online")}
      help={React.string("A dot beside your name while you have the app open.")}
      kind={KitReact.Roles.Switch.control({
        name: "online",
        checked: online,
        onWords: on,
        offWords: off,
        props: {onChange: flipped(setOnline)},
      })}
    />
    <KitReact.Roles.FormGroup
      id="react-switch-texts"
      label={React.string("Text me before each booking")}
      help={React.string("A reminder the day before.")}
      error={React.string("Add a mobile number to your account to turn this on.")}
      kind={KitReact.Roles.Switch.control({
        name: "texts",
        checked: texts,
        onWords: on,
        offWords: off,
        props: {onChange: flipped(setTexts)},
      })}
    />
    <KitReact.Roles.FormGroup
      id="react-switch-calendar"
      label={React.string("Share my bookings with the team calendar")}
      help={React.string("Teammates see the time, not the details.")}
      kind={KitReact.Roles.Switch.control({
        name: "calendar",
        checked: true,
        onWords: on,
        offWords: off,
        reason: [KitReact.Words.Text("Your organiser has turned this on for everyone.")],
        props: {disabled: true},
      })}
    />
  </>
}

@react.component
let make = () =>
  <KitReact.Roles.FormGroup
    id="react-switch-processing-summary"
    label={React.string("Weekly summary")}
    help={React.string("An email each Monday with the week's changes.")}
    kind={KitReact.Roles.Switch.control({
      name: "summary",
      checked: true,
      onWords: [KitReact.Words.Text("On")],
      offWords: [KitReact.Words.Text("Off")],
      processing: [KitReact.Words.Text("Turning on…")],
    })}
  />