rx/presenters

require 'date'

Voom::Presenters.define(:datetime_fields) do
  helpers Demo::Helpers::IndentedGrid
  attach :top_nav
  attach :component_drawer
  page_title 'Date Time'

  indented_grid do
    body <<~DOC
      A date time separates user display format from the value format.  
      
      The default date time user display [format](/formatting_tokens#date) can be configured globally using the following:      
      
      ````
      Voom::Presenters::Settings.configure do |config|
        config.presenters.components.defaults.datetime.format = 'F j, Y H:i'
      end
      ````
            
      The value format for date times can be the following:

      * Ruby Time/DateTime objects.
      * ISO Date Strings, e.g. "2017-02-26T19:40:03.243Z"
      * Chronologically Date Strings, e.g., YYYY-MM-DD HH:MM
    DOC
    grid do
      column 6 do
        datetime_field name: :skydive_at,
                       format: 'F j, Y h:i K' do
          value Time.new(2019, 10, 31)
          label 'Select your date and time to skydive'
          icon :event
          event :change do
            replaces :context_list, :context_list
          end
        end
      end
      column 6 do
        attach :context_list
      end
    end
    grid do
      column 6 do

        title 'With Floating Label'
        datetime_field name: :start_datetime do
          label 'Date of Birth...'
        end

        title 'Min Date'
        datetime_field min_date: "2020-01-01 00:15"

        title 'Max Date'
        datetime_field max_date: "2017-12-15 02:00"

        title 'Min Date (today)'
        datetime_field min_date: :today

        title 'Min (today), Max (Halloween 2025)'
        datetime_field min_date: :today, max_date: Time.new(2025, 10, 31) # Or in rails Time.now + 14.days

        title 'Disabling specific dates'
        datetime_field disable: ["2025-01-30", "2025-02-21", "2025-03-08", DateTime.new(2025, 4, 9)]

        title 'Disable range of dates'
        datetime_field disable: [
            {
                from: "2025-04-01",
                to: "2025-05-01"
            },
            {
                from: "2025-09-01",
                to: "2025-12-01"
            }
        ]

        title 'Enabling specific dates'
        datetime_field enable: [
            {
                from: "2025-04-01",
                to: "2025-05-01"
            },
            {
                from: "2025-09-01",
                to: "2025-12-01"
            }
        ]
        title 'Selecting multiple dates'
        datetime_field mode: :multiple

        title 'Preloading multiple dates'
        datetime_field mode: :multiple do
          value ["2016-10-20", "2016-11-04"]
        end

        title 'Min Time'
        datetime_field min_time: "9:00"

        title 'Max Time'
        datetime_field max_time: "20:00"

        title 'Range'
        datetime_field mode: :range

        title '24 hour time'
        datetime_field time_24hr: true, format: 'H:i'
      end
    end

  end
  attach :code, file: __FILE__
end