Ways in

module SignIn = {
  @react.component
  let make = (~id, ~opened as initial, ~refusal: option<KitReact.Roles.Refusal.props>=?) => {
    let (opened, setOpened) = React.useState(() => initial)
    <KitReact.Roles.WaysIn
      google={{children: React.string("Continue with Google"), props: {name: "way", value: "google"}}}
      way={{
        children: React.string("Continue with email"),
        onOpen: () => setOpened(_ => true),
        form: {
          props: {action: "#role-ways-in", method: "get"},
          formGroups: <KitReact.Roles.FormGroup
            id={id ++ "-email-form-group"}
            kind=Email
            required=true
            label={React.string("Email")}
            autocomplete=Actor("email")
            controlProps={{id: id ++ "-email", name: "email"}}
            printedValue={React.string("No email given")}
          />,
          allWaysFormGroups: <KitReact.Roles.SelectionControl.Group
            id={id ++ "-remember"}
            choices=[{label: React.string("Remember me for 30 days"), controlProps: {name: "remember", value: "true"}}]
          />,
          submit: {children: React.string("Continue with email"), props: {name: "way", value: "email"}},
          ?refusal,
        },
      }}
      opened
      others=[SecondaryAction({children: React.string("Continue with Microsoft")})]
      sentence={React.string("Your workspace opens straight away.")}
    />
  }
}

@react.component
let make = () =>
  <>
    <SignIn id="role-ways-in" opened=false />
    <SignIn id="role-ways-in-opened" opened=true />
    <KitReact.Roles.WaysIn
      google={{children: React.string("Continue with Google"), props: {name: "way", value: "google"}}}
      way={{
        children: React.string("Continue with mobile number"),
        onOpen: () => (),
        form: {
          props: {action: "#role-ways-in", method: "get"},
          formGroups: <KitReact.Roles.FormGroup
            id="role-ways-in-leads-mobile-form-group"
            kind=Telephone
            required=true
            label={React.string("Mobile number")}
            autocomplete=Actor("tel")
            controlProps={{id: "role-ways-in-leads-mobile", name: "mobile"}}
            controlValue="07700 900123"
            printedValue={React.string("07700 900123")}
          />,
          allWaysFormGroups: <KitReact.Roles.SelectionControl.Group
            id="role-ways-in-leads-remember"
            choices=[{label: React.string("Remember me for 30 days"), controlProps: {name: "remember", value: "true"}}]
          />,
          submit: {children: React.string("Send code"), props: {name: "way", value: "mobile"}},
        },
      }}
      opened=true
      leads=true
      others=[SecondaryAction({children: React.string("Continue with Microsoft")})]
      sentence={React.string("Your workspace opens straight away.")}
    />
    <SignIn
      id="role-ways-in-refused"
      opened=false
      refusal={{
        id: "role-ways-in-refused-refusal",
        line: React.string("Signing in with Google did not finish: Google did not confirm your account. Try again, or continue with email."),
      }}
    />
    <form action="#role-ways-in" method="get">
      <KitReact.Roles.WaysIn
        google={{children: React.string("Continue with Google"), props: {name: "way", value: "google"}}}
        others=[SecondaryAction({children: React.string("Continue with Microsoft")})]
        sentence={React.string("Your workspace opens straight away.")}
      />
    </form>
    <form id="role-ways-in-receiver" action="#role-ways-in" method="get" />
    <KitReact.Roles.WaysIn
      google={{children: React.string("Continue with Google"), props: {form: "role-ways-in-receiver", name: "way", value: "google"}}}
      others=[SecondaryAction({children: React.string("Continue with Microsoft")})]
      sentence={React.string("Your workspace opens straight away.")}
    />
  </>

@react.component
let make = () =>
  <KitReact.Roles.WaysIn
    google={{
      children: React.string("Continue with Google"),
      state: Inert({id: "ways-in-google", words: [KitReact.Words.Text("Google sign-in is not ready yet.")]}),
    }}
    way={{
      children: React.string("Continue with email"),
      state: Inert({id: "ways-in-email", words: [KitReact.Words.Text("Email sign-in is not ready yet.")]}),
      onOpen: () => (),
      form: {
        props: {action: "#role-ways-in", method: "get"},
        formGroups: <KitReact.Roles.FormGroup
          id="role-ways-in-inert-email-form-group"
          kind=Email
          label={React.string("Email")}
          autocomplete=Actor("email")
          controlProps={{id: "role-ways-in-inert-email", name: "email"}}
          printedValue={React.string("No email given")}
        />,
        submit: {children: React.string("Continue with email")},
      },
    }}
    others=[InertControl({
      id: "ways-in-microsoft",
      words: [KitReact.Words.Text("Microsoft sign-in is not ready yet.")],
      action: SecondaryAction,
      children: React.string("Continue with Microsoft"),
    })]
    sentence={React.string("Your workspace opens straight away.")}
  />