<%
stimulus_controller = 'fields--date'
form ||= current_fields_form

user_tz = defined?(current_user.time_zone) ? ActiveSupport::TimeZone.find_tzinfo(current_user.time_zone).name : nil

current_team_time_zone = if current_user&.respond_to?(:current_team) && current_team.time_zone
  current_team.time_zone
else
  "UTC"
end
team_tz = ActiveSupport::TimeZone.find_tzinfo(current_team_time_zone)&.name

options ||= {}
data_options ||= {}
other_options ||= {}

# data_options represents the iso8601 date and time value in a hidden input field.
# The value we display on screen is in options[:value].
data_options[:id] ||= form.field_id(method)
data_options[:class] = "hidden"
data_options[:value] = form.object.send(method)&.in_time_zone(current_time_zone)&.iso8601
data_options = data_options.merge({ data: {"#{stimulus_controller}-target": 'field' }})

# localized display options
options[:id] ||=  "#{form.field_id(method)}_display"
options[:class] = "form-control single-daterange w-full border-slate-300 dark:bg-slate-800 dark:border-slate-900 disabled:bg-slate-200 disabled:dark:bg-slate-700 #{options[:class]}".strip
raw_value = form.object.send(method)&.in_time_zone(current_user&.time_zone || current_team_time_zone || "UTC")
options[:value] = raw_value && I18n.l(raw_value, format: :date_and_time_field)
options = options.merge({ data: {"#{stimulus_controller}-target": 'displayField' }})

%>

<%# Although we pass options below to `text_field`, we need to pass options here %>
<%# too because the id we set earlier is not the usual `form.field_id(method)`. %>
<%= render 'shared/fields/field', form: form, method: method, options: options, other_options: other_options do %>
  <% content_for :field do %>
    <div
      class="date-input relative"
      data-controller="<%=stimulus_controller%>"
      data-<%= stimulus_controller %>-include-time-value="true"
      data-<%= stimulus_controller %>-date-format-value="<%= I18n.t('date.formats.date_controller') %>"
      data-<%= stimulus_controller %>-time-format-value="<%= I18n.t('time.formats.date_controller') %>"
      data-<%= stimulus_controller %>-is-am-pm-value="<%= am_pm? %>"
      data-<%= stimulus_controller %>-picker-locale-value="<%= I18n.t("daterangepicker").deep_transform_keys { |k| k.to_s.camelize(:lower) }.to_json %>"
      data-<%= stimulus_controller %>-default-time-zones-value="<%= "[\"#{current_user&.time_zone}\",\"#{current_team_time_zone}\"]" %>"
      data-<%= stimulus_controller %>-current-time-zone-value="<%= current_time_zone %>"
    >
      <%= form.text_field method, options %>
      <%= form.text_field method, data_options %>
      <% unless options[:disabled] %>
      <button type="button" class="clear py-2 px-3 border border-transparent inline-flex items-center whitespace-nowrap absolute rounded-md top-1 md:top-0.5 right-0.5"
        data-<%= stimulus_controller %>-target="clearButton"
        data-action="<%=stimulus_controller%>#clearDate"
      >
        <i class="leading-4 text-lg ti ti-trash dark:text-blue-500"></i>
      </button>
      <% end %>
      <% if current_user&.time_zone != current_team_time_zone %>
        <div class="mt-1.5 text-xs text-slate-500">
          <input class="hidden" data-<%=stimulus_controller%>-target="timeZoneField" value="<%= current_time_zone %>">
          <div data-<%= stimulus_controller %>-target="currentTimeZoneWrapper">
            <%= link_to (current_user&.time_zone || current_team_time_zone || "UTC"), '#', class: 'button-secondary p-0', data: {action: "#{stimulus_controller}#showTimeZoneButtons"} %>
          </div>
          <div class="space-x-1 hidden" data-<%= stimulus_controller %>-target="timeZoneButtons">
            <%= link_to '', '#', hidden: true, class: 'time-zone-button button-alternative button-smaller selected-option-time-zone-button hidden', data: {action: "#{stimulus_controller}#setTimeZone", value: ''} %>
            <%= link_to current_team_time_zone, '#', class: 'time-zone-button button-alternative button-smaller', data: {action: "#{stimulus_controller}#setTimeZone", value: team_tz, label: current_team_time_zone } if current_team_time_zone%>
            <%= link_to current_user&.time_zone, '#', class: 'time-zone-button button button-smaller', data: {action: "#{stimulus_controller}#setTimeZone", value: user_tz, label: current_user&.time_zone  } if current_user %>
            <%= link_to t('global.buttons.other'), '#', class: 'button-alternative button-smaller', data: {action: "#{stimulus_controller}#showTimeZoneSelectWrapper"} %>
            <%= link_to t('global.buttons.cancel'), '#', class: 'button-secondary button-smaller', data: {action: "#{stimulus_controller}#resetTimeZoneUI"} %>
          </div>
          <div class="hidden flex flex-row items-center mt-3 text-sm" data-<%= stimulus_controller %>-target="timeZoneSelectWrapper">
            <div class="flex-grow">
              <%= select_tag :time_zone, 
                  options_for_select(ActiveSupport::TimeZone.all.map{|tz| [tz.name.to_s, tz.tzinfo.name.to_s]}, [  user_tz || team_tz ]), 
                  class: 'form-control select2',
                  data: { "#{stimulus_controller}-target": "timeZoneSelect", action: "#{stimulus_controller}#selectTimeZoneChange"}
              %>
            </div>
            <%= link_to t('global.buttons.cancel'), '#', class: 'button-secondary ml-1.5', data: {action: "#{stimulus_controller}#cancelSelect"} %>
          </div>
        </div>
      <% end %>
    </div>
  <% end %>
<% end %>