Checkbox

// Pseudocode walkthrough of the Foldkit integration points. Each labeled
// block below is an excerpt. Fit them into your own Model, init, Message,
// update, and view definitions.
import { Match as M, Option } from 'effect'
import { Command, Ui } from 'foldkit'
import { html } from 'foldkit/html'
import { m } from 'foldkit/message'
import { evo } from 'foldkit/struct'

// Add a field to your Model for the Checkbox Submodel:
const Model = S.Struct({
  checkboxDemo: Ui.Checkbox.Model,
  // ...your other fields
})

// In your init function, initialize the Checkbox Submodel with a unique id:
const init = () => [
  {
    checkboxDemo: Ui.Checkbox.init({ id: 'terms' }),
    // ...your other fields
  },
  [],
]

// Embed the Checkbox Message in your parent Message:
const GotCheckboxMessage = m('GotCheckboxMessage', {
  message: Ui.Checkbox.Message,
})

// Inside your update function's M.tagsExhaustive({...}), delegate to
// Ui.Checkbox.update. The OutMessage's `ToggledChecked` carries the new
// `isChecked` value. Use it to fire analytics, validate a form, or push
// the value to a backend at the toggle moment.
GotCheckboxMessage: ({ message }) => {
  const [nextCheckbox, commands, maybeOutMessage] = Ui.Checkbox.update(
    model.checkboxDemo,
    message,
  )
  const mappedCommands = Command.mapMessages(commands, message =>
    GotCheckboxMessage({ message }),
  )

  return Option.match(maybeOutMessage, {
    onNone: () => [
      evo(model, { checkboxDemo: () => nextCheckbox }),
      mappedCommands,
    ],
    onSome: M.type<Ui.Checkbox.OutMessage>().pipe(
      M.tagsExhaustive({
        ToggledChecked: ({ isChecked }) => {
          // The child has emitted `ToggledChecked`. The body commits
          // the child's next state as usual. In this arm the parent
          // can also update its own state or dispatch its own
          // Commands, for example save the preference, validate a
          // form, or dispatch a downstream Command.
          return [
            evo(model, { checkboxDemo: () => nextCheckbox }),
            mappedCommands,
          ]
        },
      }),
    ),
  })
}

// Inside your view function, render the checkbox via h.submodel:
const view = () => {
  const h = html<Message>()

  return h.submodel({
    slotId: 'terms-checkbox',
    model: model.checkboxDemo,
    view: Ui.Checkbox.view,
    viewInputs: {
      toView: attributes =>
        h.div(
          [h.Class('flex flex-col gap-1')],
          [
            h.div(
              [h.Class('flex items-center gap-2')],
              [
                h.button(
                  [...attributes.checkbox, h.Class('h-5 w-5 rounded border')],
                  model.checkboxDemo.isChecked ? ['✓'] : [],
                ),
                h.label(
                  [...attributes.label, h.Class('text-sm')],
                  ['Accept terms and conditions'],
                ),
              ],
            ),
            h.p(
              [...attributes.description, h.Class('text-sm text-gray-500')],
              ['You agree to our Terms of Service.'],
            ),
          ],
        ),
    },
    toParentMessage: message => GotCheckboxMessage({ message }),
  })
}

// Pseudocode walkthrough of the Foldkit integration points. Each labeled
// block below is an excerpt. Fit them into your own Model, init, Message,
// update, and view definitions.
import { Array } from 'effect'
import { Ui } from 'foldkit'
import { html } from 'foldkit/html'
import { m } from 'foldkit/message'
import { evo } from 'foldkit/struct'

// Add multiple Checkbox Submodels to your Model for the parent and children:
const Model = S.Struct({
  optionA: Ui.Checkbox.Model,
  optionB: Ui.Checkbox.Model,
  // ...your other fields
})

// In your init function, initialize each Submodel:
const init = () => [
  {
    optionA: Ui.Checkbox.init({ id: 'option-a' }),
    optionB: Ui.Checkbox.init({ id: 'option-b' }),
    // ...your other fields
  },
  [],
]

// Embed each child's Message, plus a Message for the "Select All" parent:
const GotSelectAllMessage = m('GotSelectAllMessage', {
  message: Ui.Checkbox.Message,
})
const GotOptionAMessage = m('GotOptionAMessage', {
  message: Ui.Checkbox.Message,
})
const GotOptionBMessage = m('GotOptionBMessage', {
  message: Ui.Checkbox.Message,
})

// Inside your update function's M.tagsExhaustive({...}), toggling
// "Select All" routes each child through Ui.Checkbox.setChecked so the
// update goes through the Submodel rather than mutating its fields directly:
GotSelectAllMessage: () => {
  const isAllChecked = Array.every(
    [model.optionA, model.optionB],
    ({ isChecked }) => isChecked,
  )
  const nextChecked = !isAllChecked

  const [nextOptionA] = Ui.Checkbox.setChecked(model.optionA, nextChecked)
  const [nextOptionB] = Ui.Checkbox.setChecked(model.optionB, nextChecked)

  return [
    evo(model, {
      optionA: () => nextOptionA,
      optionB: () => nextOptionB,
    }),
    [],
  ]
}

// Compute the parent's indeterminate state from the child checkboxes:
const checkboxes = [model.optionA, model.optionB]
const isAllChecked = Array.every(checkboxes, ({ isChecked }) => isChecked)
const isIndeterminate =
  !isAllChecked && Array.some(checkboxes, ({ isChecked }) => isChecked)

// Inside your view function, pass isIndeterminate via h.submodel's viewInputs:
const view = () => {
  const h = html<Message>()

  return h.submodel({
    slotId: 'select-all',
    model: { id: 'select-all', isChecked: isAllChecked },
    view: Ui.Checkbox.view,
    viewInputs: {
      isIndeterminate,
      toView: attributes =>
        h.div(
          [h.Class('flex items-center gap-2')],
          [
            h.button(
              [...attributes.checkbox, h.Class('h-5 w-5 rounded border')],
              isIndeterminate ? ['—'] : isAllChecked ? ['✓'] : [],
            ),
            h.label(
              [...attributes.label, h.Class('text-sm')],
              ['All notifications'],
            ),
          ],
        ),
    },
    toParentMessage: message => GotSelectAllMessage({ message }),
  })
}