module ReactWorkstation
  class ReactAudiencePage < Workstation::BasePage
    page_url("/analytics/audience")
    # sections
    div(:filters, class: "FilterPanel")
    div(:top_metrics, class: "TopMetricsPanel")
    div(:streams_by, class: %w[PanelContainer StreamsByGeography])
    div(:geodata, class: "AudienceData-geoData")
    div(:whos_listening, class: "PanelContainer")
    div(:top_audiences, class: "TopAudiencesPanel")
    link(:go_to_audience_button, text: "Audience")
    # Filters
    div(:filter_search_bar, css: ".FilterSearchBar:not(.FilterSearchBar-disabled)")
    div(:all_stores_toggle, text: "All Stores")
    div(:apple_music_toggle, text: "Apple Music")
    div(:spotify_toggle, text: "Spotify")
    div(:country_toggle_container, class: "FilterArea-dropdownContainer")
    span(:region_toggle, text: "All Regions")
    span(:country_toggle, text: "All Countries")
    text_fields(:location_input, class: "DropdownTypeAhead-input")
    button(:date_filter) { div_element(class: "FilterPeriod").button_element }
    link(:week_toggle, text: "Last 7 Days")
    link(:month_toggle, text: "Last 30 Days")
    link(:year_toggle, text: "Last 12 Months")
    # Searchbar
    div(:search_div, class: "Select-input")
    div(:search_container, class: "Select-control")
    textarea(:search_input) { search_div_element.text_field_element }
    button(:artist_track_search_toggle) { div_element(id: "SearchRowDropdown").button_element }
    link(:artist_search_toggle, class: "SearchRow-dropdown-item-artist")
    link(:tracks_search_toggle, class: "SearchRow-dropdown-item-track")
    span(:search_results, class: "Select-option-highlighted")
    div(:search_placeholder_text, class: "Select-placeholder")
    # Loaders
    divs(:graph_loading_indicator, class: "LoadingIndicator")
    # 3panels
    div(:top_metrics, class: "TopMetricsPanel-section")
    paragraph(:streams) { top_metrics_element.p_element(class: "TopMetricsPanel-title") }
    paragraph(:top_audience) { top_metrics_element.p_element(class: "TopMetricsPanel-title") }
    paragraph(:streams_value) { top_metrics_element.p_element(class: "TopMetricsPanel-value") }
    # Map
    div(:map_container, id: "GeoDataMap-container")
    div(:map, class: "GeoDataMap")
    div(:breadcrumbs, class: "GeoBreadcrumbs")
    elements(:city_label) do
      map_element.elements(tag_name: "text").find_all do |text_tag|
        text_tag.attribute_value("font-size") == "12"
      end
    end
    div(:map_tooltip, id: "GeoDataMap-tooltip")
    element(:filled_country, id: "ac_path_r")
    # Tables
    table(:top_countries) { div_element(class: "TopCountriesPanel").table_element }
    table(:top_regions) { div_element(class: "TopRegionsPanel").table_element }
    span(:table_tooltip_icon, class: "StickyHeaderTable-tooltip-icon")
    div(:table_tooltip, id: "tooltipspl")
    # Who's Listening
    div(:donut_chart, class: "Doughnut-chart")
    div(:age_breakdown_splitted, class: "GroupedBarChart GroupedBarChart-splitted")
    div(:age_breakdown_all, class: "GroupedBarChart")
    div(:age_breakdown_button_container, class: "DemographicsAgeBreakdown-toggleContainer")
    button(:age_breakdown_gender) do
      age_breakdown_button_container_element.button_element(text: "BY GENDER")
    end
    button(:age_breakdown_all) { age_breakdown_button_container_element.button_element(text: "ALL") }
    # Top Audiences
    div(:top_audiences, class: "TopAudiencesPanel")
    table(:top_audiences_table) do
      top_audiences_element.table_element(class: "StickyHeaderTable-table")
    end
    div(:dem_error_message, class: "DemographicsPanel-error")
    div(:top_error_message, class: "TopAudiencesPanel-panel-content")

    def wait_until_loaded
      wait_until { filter_search_bar_element.exist? }
      wait_until { graph_loading_indicator_elements.none? }
    end
  end
end