rx/presenters

require_relative '../helpers/indented_grid'

Voom::Presenters.define(:toggles) do
  helpers Demo::Helpers::IndentedGrid
  attach :top_nav
  attach :component_drawer
  page_title 'Toggles'

  indented_grid do
    title 'CHECKBOX'
    checkbox
    checkbox checked: true, text: "I am initially checked"
    checkbox indeterminate: true, text: "I am indeterminate"
    checkbox disabled: true, text: "I am disabled"

    title 'RADIO BUTTON'
    radio_button name: :radio, value: 'one', checked: true, text: "One"
    radio_button name: :radio, value: 'two', text: "Two"

    title 'ICON TOGGLE'

    icon_toggle :format_italic do
      tooltip 'toggle it - uses same icon'
    end

    icon_toggle :check_box_outline_blank, on_icon: :check_box do
      tooltip 'toggle it - uses on and off icons'
    end

    icon_toggle :check_box_outline_blank, on_icon: :check_box, checked: true do
      tooltip 'toggle it - already in a checked state'
    end

    icon_toggle :toggle_off, on_icon: :toggle_on, disabled: true do
      tooltip 'Im disabled'
    end

    title 'SWITCH'
    grid do
      column 6 do
        switch checked: true
      end
    end
    grid do
      column 6 do
        switch do
          tooltip 'I will reset my state when clicked as a result of a failed event action'
          event :click do
            posts '_echo_', status: 500
          end
        end
      end
    end
    grid do
      column 6 do
        switch disabled: true do
          tooltip 'I am disabled'
        end
      end
    end
    grid do
      column 10, padding: :none do
        switch text: "This is a long text label that should display even longer wraps to another line?"
      end
      column 10, padding: :none  do
        checkbox text: "This is a long text label that should display even longer wraps to another line?"
      end
    end


    button :on_dialog do
      event :click do
        dialog :toggle_dlg
      end
    end
    dialog id: :toggle_dlg, width: '30rem' do
      form do
        switch name: :reset_password_email, checked: true, text: 'Send reset password email'
      end
    end


    grid do
      column 6 do
        headline 'Field Level Events', level: 3
        title 'Text Fields'
        body 'This demonstrates that a change event will submit the  field value to the event action. '\
                 'This works with posts and replace actions'
        switch name: :myfield do
          event :change do
            replaces :context_list, :context_list
          end
        end
        blank
        body 'Toggle components (switches, checkboxes, and icon toggles)',
             'can take `on_value` and `off_value` attributes to represent both states. ',
             'The default is `"on"` and `nil`.'
        switch name: :miller_lite, on_value: 'Great taste', off_value: 'Less filling' do
          event :change do
            replaces :context_list, :context_list
          end
        end

        blank
        headline 'Posts in Form', level: 3
        body 'This demonstrates that a change event on **ANY** form input will send all the form inputs to the event action. '\
                 'This works with posts and replace actions'
        form do
          switch name: :myfield
          switch name: :myfield2
          event :change do
            replaces :context_list, :context_list
          end
        end
      end
      column 6 do
        attach :context_list
      end
    end
    attach :code, file: __FILE__
  end
end