woocraft 0.4.5

use std::{collections::HashMap, ops::Range, rc::Rc, time::Duration};

use gpui::{
  App, AppContext, Axis, Bounds, ClickEvent, Context, Div, DragMoveEvent, EventEmitter,
  FocusHandle, Focusable, InteractiveElement, IntoElement, ListSizingBehavior, MouseButton,
  MouseDownEvent, ParentElement, Pixels, Point, Render, ScrollStrategy, SharedString, Stateful,
  StatefulInteractiveElement as _, Styled, Task, TextStyle, UniformListScrollHandle, Window, div,
  prelude::FluentBuilder, px, uniform_list,
};

use super::*;
use crate::{
  ActiveTheme, Button, ButtonVariants as _, ContextMenuExt, ElementExt, Icon, IconName, PopupMenu,
  ScrollableMask, Scrollbar, Selectable, Sizable, Size, StyleSized as _, StyledExt, TableThemeExt,
  VirtualListScrollHandle,
  actions::{
    Cancel, SelectDown, SelectFirst, SelectLast, SelectNextColumn, SelectPageDown, SelectPageUp,
    SelectPrevColumn, SelectUp,
  },
  h_flex, v_flex,
};

const AUTO_WIDTH_SAMPLE_ROWS: usize = 3;

#[derive(Copy, Clone, Debug, PartialEq, Eq)]
enum SelectionMode {
  Column,
  Row,
  Cell,
}

pub(crate) type TableBlankContextMenuBuilder<D> =
  Rc<dyn Fn(PopupMenu, &mut Window, &mut Context<TableState<D>>) -> PopupMenu>;

impl SelectionMode {
  #[inline(always)]
  fn is_row(&self) -> bool {
    matches!(self, SelectionMode::Row)
  }

  #[inline(always)]
  fn is_column(&self) -> bool {
    matches!(self, SelectionMode::Column)
  }

  #[inline(always)]
  fn is_cell(&self) -> bool {
    matches!(self, SelectionMode::Cell)
  }
}

/// The Table event.
#[derive(Clone)]
pub enum TableEvent {
  /// Single click or move to selected row.
  SelectRow(usize),
  /// Double click on the row.
  DoubleClickedRow(usize),
  /// Selected column.
  SelectColumn(usize),
  /// A cell has been selected (clicked or navigated to via keyboard).
  ///
  /// Emitted when a cell is selected in cell selection mode.
  /// The first `usize` is the row index, and the second `usize` is the column
  /// index.
  ///
  /// This event is also emitted when navigating between cells using keyboard
  /// shortcuts.
  SelectCell(usize, usize),
  /// A cell has been double-clicked.
  ///
  /// Emitted when a cell is double-clicked in cell selection mode.
  /// The first `usize` is the row index, and the second `usize` is the column
  /// index.
  ///
  /// Use this event to trigger actions like opening a detail view or editing
  /// the cell content.
  DoubleClickedCell(usize, usize),
  /// The column widths have changed.
  ///
  /// The `Vec<Pixels>` contains the new widths of all columns.
  ColumnWidthsChanged(Vec<Pixels>),
  /// A column has been moved.
  ///
  /// The first `usize` is the original index of the column,
  /// and the second `usize` is the new index of the column.
  MoveColumn(usize, usize),
  /// A row has been right-clicked.
  ///
  /// Contains the row index, or `None` if right-clicked on an empty area.
  /// Use this event to show context menus for rows.
  RightClickedRow(Option<usize>),
  /// A cell has been right-clicked.
  ///
  /// Emitted when a cell is right-clicked in cell selection mode.
  /// The first `usize` is the row index, and the second `usize` is the column
  /// index.
  ///
  /// Use this event to show context menus specific to the cell content.
  /// The right-clicked cell becomes the current primary selection before the
  /// context menu opens.
  RightClickedCell(usize, usize),
  /// The selection has been cleared.
  ///
  /// This event is emitted when the selection is cleared.
  ClearSelection,
}

/// The visible range of the rows and columns.
#[derive(Debug, Default)]
pub struct TableVisibleRange {
  /// The visible range of the rows.
  rows: Range<usize>,
  /// The visible range of the columns.
  cols: Range<usize>,
}

impl TableVisibleRange {
  /// Returns the visible range of the rows.
  pub fn rows(&self) -> &Range<usize> {
    &self.rows
  }

  /// Returns the visible range of the columns.
  pub fn cols(&self) -> &Range<usize> {
    &self.cols
  }
}

/// The state for [`Table`].
///
/// # Selection Modes
///
/// The table supports three selection modes:
/// - **Row Selection**: Select entire rows (default mode)
/// - **Column Selection**: Select entire columns
/// - **Cell Selection**: Select individual cells
///
/// ## Cell Selection
///
/// When `cell_selectable` is enabled, users can:
/// - Click on cells to select them
/// - Right-click on cells to select them before opening a context menu
/// - Double-click on cells to trigger actions
/// - Navigate between cells using keyboard (arrow keys, Home, End, PageUp,
///   PageDown, Tab)
///
/// When in cell selection mode, a row selector column appears on the left side,
/// allowing users to select entire rows by clicking on it.
///
/// # Events
///
/// The table emits the following events related to cell selection:
/// - [`TableEvent::SelectCell`]: Emitted when a cell is selected
/// - [`TableEvent::DoubleClickedCell`]: Emitted when a cell is double-clicked
/// - [`TableEvent::RightClickedCell`]: Emitted when a cell is right-clicked
///
/// # Example
///
/// ```rust,ignore
/// let table_state = cx.new(|cx| {
///     TableState::new(delegate, cx)
///         .cell_selectable(true)
///         .row_selectable(true)
/// });
///
/// // Subscribe to cell events
/// cx.subscribe(&table_state, |this, table, event, cx| {
///     match event {
///         TableEvent::SelectCell(row_ix, col_ix) => {
///             println!("Selected cell: ({}, {})", row_ix, col_ix);
///         }
///         TableEvent::DoubleClickedCell(row_ix, col_ix) => {
///             println!("Double-clicked cell: ({}, {})", row_ix, col_ix);
///         }
///         _ => {}
///     }
/// });
/// ```
pub struct TableState<D: TableDelegate> {
  focus_handle: FocusHandle,
  delegate: D,
  pub(crate) options: TableOptions,
  /// The bounds of the table container.
  bounds: Bounds<Pixels>,
  /// The bounds of the fixed head cols.
  fixed_head_cols_bounds: Bounds<Pixels>,

  col_groups: Vec<ColGroup>,

  /// Whether the table can loop selection, default is true.
  ///
  /// When the prev/next selection is out of the table bounds, the selection
  /// will loop to the other side.
  pub loop_selection: bool,
  /// Whether the table can select column.
  pub col_selectable: bool,
  /// Whether the table can select row.
  pub row_selectable: bool,
  /// Whether the table can select cell, default is true.
  ///
  /// When enabled:
  /// - Users can click on individual cells to select them
  /// - A row selector column appears on the left for selecting entire rows
  /// - Keyboard navigation works at the cell level (arrow keys move between
  ///   cells)
  /// - Right-click and double-click events are supported for cells
  pub cell_selectable: bool,
  /// Whether the table can sort.
  pub sortable: bool,
  /// Whether the table can resize columns.
  pub col_resizable: bool,
  /// Whether the table can move columns.
  pub col_movable: bool,
  /// Enable/disable fixed columns feature.
  pub col_fixed: bool,

  pub vertical_scroll_handle: UniformListScrollHandle,
  pub horizontal_scroll_handle: VirtualListScrollHandle,

  selected_row: Option<usize>,
  selection_mode: SelectionMode,
  right_clicked_row: Option<usize>,
  right_clicked_cell: Option<(usize, usize)>,
  right_clicked_blank: bool,
  pub(crate) blank_context_menu_builder: Option<TableBlankContextMenuBuilder<D>>,
  selected_col: Option<usize>,
  selected_cell: Option<(usize, usize)>,

  /// The column index that is being resized.
  resizing_col: Option<usize>,
  pending_auto_detect_col_width: bool,
  manual_col_widths: HashMap<SharedString, Pixels>,

  /// The visible range of the rows and columns.
  visible_range: TableVisibleRange,

  _measure: Vec<Duration>,
  _load_more_task: Task<()>,
}

impl<D> TableState<D>
where
  D: TableDelegate,
{
  /// Create a new TableState with the given delegate.
  pub fn new(delegate: D, _: &mut Window, cx: &mut Context<Self>) -> Self {
    let mut this = Self {
      focus_handle: cx.focus_handle().tab_stop(true),
      options: TableOptions::default(),
      delegate,
      col_groups: Vec::new(),
      horizontal_scroll_handle: VirtualListScrollHandle::new(),
      vertical_scroll_handle: UniformListScrollHandle::new(),
      selection_mode: SelectionMode::Row,
      selected_row: None,
      right_clicked_row: None,
      right_clicked_cell: None,
      right_clicked_blank: false,
      blank_context_menu_builder: None,
      selected_col: None,
      selected_cell: None,
      resizing_col: None,
      pending_auto_detect_col_width: false,
      manual_col_widths: HashMap::new(),
      bounds: Bounds::default(),
      fixed_head_cols_bounds: Bounds::default(),
      visible_range: TableVisibleRange::default(),
      loop_selection: true,
      col_selectable: true,
      row_selectable: true,
      cell_selectable: false,
      sortable: true,
      col_movable: true,
      col_resizable: true,
      col_fixed: true,
      _load_more_task: Task::ready(()),
      _measure: Vec::new(),
    };

    this.prepare_col_groups(cx);
    this
  }

  /// Returns a reference to the delegate.
  pub fn delegate(&self) -> &D {
    &self.delegate
  }

  /// Returns a mutable reference to the delegate.
  pub fn delegate_mut(&mut self) -> &mut D {
    &mut self.delegate
  }

  /// Set to loop selection, default to true.
  pub fn loop_selection(mut self, loop_selection: bool) -> Self {
    self.loop_selection = loop_selection;
    self
  }

  /// Set to enable/disable column movable, default to true.
  pub fn col_movable(mut self, col_movable: bool) -> Self {
    self.col_movable = col_movable;
    self
  }

  /// Set to enable/disable column resizable, default to true.
  pub fn col_resizable(mut self, col_resizable: bool) -> Self {
    self.col_resizable = col_resizable;
    self
  }

  /// Set to enable/disable column sortable, default true
  pub fn sortable(mut self, sortable: bool) -> Self {
    self.sortable = sortable;
    self
  }

  /// Set to enable/disable row selectable, default true
  pub fn row_selectable(mut self, row_selectable: bool) -> Self {
    self.row_selectable = row_selectable;
    self
  }

  /// Set to enable/disable column selectable, default true
  pub fn col_selectable(mut self, col_selectable: bool) -> Self {
    self.col_selectable = col_selectable;
    self
  }

  /// Set to enable/disable cell selection, default is true.
  ///
  /// When enabled:
  /// - Individual cells become selectable by clicking
  /// - A row selector column appears on the left side
  /// - Keyboard navigation operates at the cell level
  /// - Cell-specific events (SelectCell, DoubleClickedCell, RightClickedCell)
  ///   are emitted
  ///
  /// # Example
  ///
  /// ```rust,ignore
  /// let table_state = cx.new(|cx| {
  ///     TableState::new(delegate, cx)
  ///         .cell_selectable(true)  // Enable cell selection
  ///         .row_selectable(true)   // Also allow row selection via row selector
  /// });
  /// ```
  pub fn cell_selectable(mut self, cell_selectable: bool) -> Self {
    self.cell_selectable = cell_selectable;
    self
  }

  /// When we update columns or rows, we need to refresh the table.
  pub fn refresh(&mut self, cx: &mut Context<Self>) {
    self.prepare_col_groups(cx);
  }

  /// Notify the table that delegate data has changed.
  ///
  /// Unlike [`refresh`](Self::refresh), this method preserves the current
  /// selection, scroll position, and right-click state. It only refreshes
  /// column groups when the column count has changed. Use this after modifying
  /// delegate data (rows added/removed/reordered) to ensure the table
  /// reflects the changes without disrupting any open context menus or other
  /// ephemeral UI state.
  pub fn invalidate_data(&mut self, cx: &mut Context<Self>) {
    let old_col_count = self.col_groups.len();
    let new_col_count = self.delegate.columns_count(cx);
    if old_col_count != new_col_count {
      self.prepare_col_groups(cx);
    }

    let rows_count = self.delegate.rows_count(cx);
    // Clamp selection to valid range.
    if let Some(row) = self.selected_row
      && row >= rows_count
    {
      self.selected_row = if rows_count > 0 {
        Some(rows_count - 1)
      } else {
        None
      };
    }
    if let Some((row, col)) = self.selected_cell
      && (row >= rows_count || col >= new_col_count)
    {
      self.selected_cell = None;
    }
    if let Some((row, col)) = self.right_clicked_cell
      && (row >= rows_count || col >= new_col_count)
    {
      self.right_clicked_cell = None;
    }
    if let Some(row) = self.right_clicked_row
      && row >= rows_count
    {
      self.right_clicked_row = None;
    }
    cx.notify();
  }

  /// Scroll to the row at the given index.
  pub fn scroll_to_row(&mut self, row_ix: usize, cx: &mut Context<Self>) {
    self
      .vertical_scroll_handle
      .scroll_to_item(row_ix, ScrollStrategy::Top);
    cx.notify();
  }

  // Scroll to the column at the given index.
  pub fn scroll_to_col(&mut self, col_ix: usize, cx: &mut Context<Self>) {
    let col_ix = col_ix.saturating_sub(self.fixed_left_cols_count());

    self
      .horizontal_scroll_handle
      .scroll_to_item(col_ix, ScrollStrategy::Top);
    cx.notify();
  }

  /// Returns the selected row index.
  pub fn selected_row(&self) -> Option<usize> {
    if self.selection_mode.is_row() {
      self.selected_row
    } else {
      None
    }
  }

  /// Sets the selected row to the given index.
  pub fn set_selected_row(&mut self, row_ix: usize, cx: &mut Context<Self>) {
    self.select_row(row_ix, true, cx);
  }

  fn select_row(&mut self, row_ix: usize, clear_right_click_target: bool, cx: &mut Context<Self>) {
    let is_down = match self.selected_row {
      Some(selected_row) => row_ix > selected_row,
      None => true,
    };

    cx.stop_propagation();
    self.selection_mode = SelectionMode::Row;
    self.selected_col = None;
    self.selected_cell = None;

    if clear_right_click_target {
      self.clear_right_click_target(cx, true);
    }

    self.selected_row = Some(row_ix);
    if let Some(row_ix) = self.selected_row {
      self.vertical_scroll_handle.scroll_to_item(
        row_ix,
        if is_down {
          ScrollStrategy::Bottom
        } else {
          ScrollStrategy::Top
        },
      );
    }
    cx.emit(TableEvent::SelectRow(row_ix));
    cx.notify();
  }

  /// Returns the row that has been right clicked.
  pub fn right_clicked_row(&self) -> Option<usize> {
    self.right_clicked_row
  }

  /// Returns the selected column index.
  pub fn selected_col(&self) -> Option<usize> {
    if self.selection_mode.is_column() {
      self.selected_col
    } else {
      None
    }
  }

  /// Sets the selected col to the given index.
  pub fn set_selected_col(&mut self, col_ix: usize, cx: &mut Context<Self>) {
    self.select_col(col_ix, true, cx);
  }

  fn select_col(&mut self, col_ix: usize, clear_right_click_target: bool, cx: &mut Context<Self>) {
    self.selection_mode = SelectionMode::Column;
    self.selected_row = None;
    self.selected_cell = None;

    if clear_right_click_target {
      self.clear_right_click_target(cx, true);
    }

    self.selected_col = Some(col_ix);
    if let Some(col_ix) = self.selected_col {
      self.scroll_to_col(col_ix, cx);
    }
    cx.emit(TableEvent::SelectColumn(col_ix));
    cx.notify();
  }

  /// Returns the selected cell as `(row_ix, col_ix)`.
  ///
  /// Returns `None` if no cell is currently selected or if the table is in
  /// row/column selection mode.
  ///
  /// # Example
  ///
  /// ```rust,ignore
  /// if let Some((row_ix, col_ix)) = table_state.read(cx).selected_cell() {
  ///     println!("Selected cell: ({}, {})", row_ix, col_ix);
  /// }
  /// ```
  pub fn selected_cell(&self) -> Option<(usize, usize)> {
    if self.selection_mode.is_cell() {
      self.selected_cell
    } else {
      None
    }
  }

  /// Sets the selected cell to the given row and column indices.
  ///
  /// This method:
  /// - Switches the table to cell selection mode
  /// - Scrolls to make the cell visible (centered vertically)
  /// - Emits a [`TableEvent::SelectCell`] event
  ///
  /// # Example
  ///
  /// ```rust,ignore
  /// // Select the cell at row 5, column 3
  /// table_state.update(cx, |state, cx| {
  ///     state.set_selected_cell(5, 3, cx);
  /// });
  /// ```
  pub fn set_selected_cell(&mut self, row_ix: usize, col_ix: usize, cx: &mut Context<Self>) {
    self.select_cell(row_ix, col_ix, true, cx);
  }

  fn select_cell(
    &mut self, row_ix: usize, col_ix: usize, clear_right_click_target: bool, cx: &mut Context<Self>,
  ) {
    self.selection_mode = SelectionMode::Cell;
    self.selected_row = None;
    self.selected_col = None;

    if clear_right_click_target {
      self.clear_right_click_target(cx, true);
    }

    self.selected_cell = Some((row_ix, col_ix));

    // Scroll to the cell
    self
      .vertical_scroll_handle
      .scroll_to_item(row_ix, ScrollStrategy::Center);
    self.scroll_to_col(col_ix, cx);

    cx.emit(TableEvent::SelectCell(row_ix, col_ix));
    cx.notify();
  }

  fn clear_right_click_target(&mut self, cx: &mut Context<Self>, emit_event: bool) {
    let had_right_click_target = self.right_clicked_row.is_some()
      || self.right_clicked_cell.is_some()
      || self.right_clicked_blank;

    self.right_clicked_row = None;
    self.right_clicked_cell = None;
    self.right_clicked_blank = false;

    if emit_event && had_right_click_target {
      cx.emit(TableEvent::RightClickedRow(None));
    }
  }

  /// Clear the selection of the table.
  pub fn clear_selection(&mut self, cx: &mut Context<Self>) {
    self.selection_mode = SelectionMode::Row;
    self.selected_row = None;
    self.selected_col = None;
    self.selected_cell = None;
    self.right_clicked_row = None;
    self.right_clicked_cell = None;
    self.right_clicked_blank = false;
    cx.emit(TableEvent::ClearSelection);
    cx.notify();
  }

  /// Returns the visible range of the rows and columns.
  ///
  /// See [`TableVisibleRange`].
  pub fn visible_range(&self) -> &TableVisibleRange {
    &self.visible_range
  }

  /// Dump table data.
  ///
  /// Returns a tuple of (headers, rows) where each row is a vector of cell
  /// values.
  pub fn dump(&self, cx: &App) -> (Vec<String>, Vec<Vec<String>>) {
    // Get header row
    let columns_count = self.delegate.columns_count(cx);
    let mut headers = Vec::with_capacity(columns_count);
    for col_ix in 0..columns_count {
      let column = self.delegate.column(col_ix, cx);
      headers.push(column.name.to_string());
    }

    // Get data rows
    let rows_count = self.delegate.rows_count(cx);
    let mut rows = Vec::with_capacity(rows_count);
    for row_ix in 0..rows_count {
      let mut row = Vec::with_capacity(columns_count);
      for col_ix in 0..columns_count {
        row.push(self.delegate.cell_text(row_ix, col_ix, cx));
      }
      rows.push(row);
    }

    (headers, rows)
  }

  fn prepare_col_groups(&mut self, cx: &mut Context<Self>) {
    self.pending_auto_detect_col_width = self.options.auto_detect_col_width;
    self.col_groups = (0..self.delegate.columns_count(cx))
      .map(|col_ix| {
        let column = self.delegate().column(col_ix, cx);
        let width = if self.options.auto_detect_col_width {
          self
            .manual_col_widths
            .get(&column.key)
            .copied()
            .unwrap_or(column.width)
        } else {
          column.width
        };
        ColGroup {
          width,
          preview_width: None,
          bounds: Bounds::default(),
          column,
        }
      })
      .collect();
    cx.notify();
  }

  fn table_text_style(&self, window: &Window) -> TextStyle {
    let mut text_style = window.text_style();
    text_style.font_size = self.options.size.text_size().into();
    text_style
  }

  fn shape_line_for_display(&self, text: &str, window: &Window) -> gpui::ShapedLine {
    let text_style = self.table_text_style(window);
    let font_size = text_style.font_size.to_pixels(window.rem_size());
    let runs = [text_style.to_run(text.len())];

    window
      .text_system()
      .shape_line(text.to_string().into(), font_size, &runs, None)
  }

  fn estimate_column_width(
    &self, col_ix: usize, column: &Column, window: &Window, cx: &App,
  ) -> Pixels {
    let sample_rows = self.delegate.rows_count(cx).min(AUTO_WIDTH_SAMPLE_ROWS);
    let mut max_text_width = self
      .shape_line_for_display(column.name.as_ref(), window)
      .width;

    for row_ix in 0..sample_rows {
      let cell_text = self.delegate.cell_text(row_ix, col_ix, cx);
      max_text_width = max_text_width.max(self.shape_line_for_display(&cell_text, window).width);
    }

    let padding = column
      .paddings
      .as_ref()
      .map(|edges| edges.left + edges.right)
      .unwrap_or_else(|| {
        let default_padding = self.options.size.table_cell_padding();
        default_padding.left + default_padding.right
      });

    let sort_icon_width = if self.sortable && column.sort.is_some() {
      // Header labels are IconLabel (default Medium), while sort icon uses a
      // Small icon-only Button. Reserve the delta over the baseline label
      // paddings to prevent header text clipping.
      Size::Small.component_height() + Size::Medium.component_gap() - Size::Medium.component_px()
        + Size::Medium.container_px()
    } else {
      px(0.)
    };
    let estimated = max_text_width + padding + sort_icon_width + px(32.);

    estimated.clamp(column.min_width, column.max_width)
  }

  fn apply_auto_detect_col_widths(&mut self, window: &Window, cx: &App) {
    if !self.options.auto_detect_col_width || !self.pending_auto_detect_col_width {
      return;
    }

    for col_ix in 0..self.col_groups.len() {
      let column = self.col_groups[col_ix].column.clone();
      if let Some(width) = self.manual_col_widths.get(&column.key).copied() {
        self.col_groups[col_ix].width = width;
        self.col_groups[col_ix].preview_width = None;
        continue;
      }
      if let Some(width) = column.auto_width {
        self.col_groups[col_ix].width = width;
        self.col_groups[col_ix].preview_width = None;
        continue;
      }
      self.col_groups[col_ix].width = self.estimate_column_width(col_ix, &column, window, cx);
      self.col_groups[col_ix].preview_width = None;
    }

    self.pending_auto_detect_col_width = false;
  }

  fn fixed_left_cols_count(&self) -> usize {
    if !self.col_fixed {
      return 0;
    }

    self
      .col_groups
      .iter()
      .filter(|col| col.column.fixed == Some(ColumnFixed::Left))
      .count()
  }

  fn page_item_count(&self) -> usize {
    let row_height = self.options.size.table_row_height();
    let height = self.bounds.size.height;
    let count = (height / row_height).floor() as usize;
    count.saturating_sub(1).max(1)
  }

  fn on_row_right_click(
    &mut self, _: &MouseDownEvent, row_ix: Option<usize>, _: &mut Window, cx: &mut Context<Self>,
  ) {
    cx.stop_propagation();

    if let Some(row_ix) = row_ix {
      self.select_row(row_ix, false, cx);
      self.right_clicked_row = Some(row_ix);
      self.right_clicked_cell = None;
      self.right_clicked_blank = false;
      cx.emit(TableEvent::RightClickedRow(Some(row_ix)));
      cx.notify();
      return;
    }

    self.clear_right_click_target(cx, false);
    cx.emit(TableEvent::RightClickedRow(None));
    cx.notify();
  }

  fn on_cell_right_click(
    &mut self, _: &MouseDownEvent, row_ix: usize, col_ix: usize, _: &mut Window,
    cx: &mut Context<Self>,
  ) {
    if !self.cell_selectable {
      return;
    }

    cx.stop_propagation();
    self.select_cell(row_ix, col_ix, false, cx);
    self.right_clicked_cell = Some((row_ix, col_ix));
    self.right_clicked_row = None;
    self.right_clicked_blank = false;
    cx.emit(TableEvent::RightClickedCell(row_ix, col_ix));
    cx.notify();
  }

  fn on_blank_right_click(&mut self, _: &MouseDownEvent, _: &mut Window, cx: &mut Context<Self>) {
    self.clear_right_click_target(cx, false);
    self.right_clicked_blank = true;
    cx.emit(TableEvent::RightClickedRow(None));
    cx.notify();
  }

  fn on_row_left_click(
    &mut self, e: &ClickEvent, row_ix: usize, _: &mut Window, cx: &mut Context<Self>,
  ) {
    if !self.row_selectable {
      return;
    }

    self.set_selected_row(row_ix, cx);

    if e.click_count() == 2 {
      cx.emit(TableEvent::DoubleClickedRow(row_ix));
    }
  }

  fn on_col_head_click(&mut self, col_ix: usize, _: &mut Window, cx: &mut Context<Self>) {
    if !self.col_selectable {
      return;
    }

    let Some(col_group) = self.col_groups.get(col_ix) else {
      return;
    };

    if !col_group.column.selectable {
      return;
    }

    self.set_selected_col(col_ix, cx)
  }

  fn on_cell_click(
    &mut self, e: &ClickEvent, row_ix: usize, col_ix: usize, _: &mut Window, cx: &mut Context<Self>,
  ) {
    if !self.cell_selectable {
      return;
    }

    cx.stop_propagation();
    self.set_selected_cell(row_ix, col_ix, cx);

    if e.click_count() == 2 {
      cx.emit(TableEvent::DoubleClickedCell(row_ix, col_ix));
    }
  }

  fn has_selection(&self) -> bool {
    self.selected_row.is_some() || self.selected_col.is_some() || self.selected_cell.is_some()
  }

  pub(crate) fn action_cancel(&mut self, _: &Cancel, _: &mut Window, cx: &mut Context<Self>) {
    if self.has_selection() {
      self.clear_selection(cx);
      return;
    }
    cx.propagate();
  }

  pub(crate) fn action_select_prev(
    &mut self, _: &SelectUp, _: &mut Window, cx: &mut Context<Self>,
  ) {
    let rows_count = self.delegate.rows_count(cx);
    if rows_count < 1 {
      return;
    }

    // Cell selection mode: move up within the same column
    if self.selection_mode.is_cell() {
      if let Some((row_ix, col_ix)) = self.selected_cell {
        let new_row = if row_ix > 0 {
          row_ix.saturating_sub(1)
        } else if self.loop_selection {
          rows_count.saturating_sub(1)
        } else {
          row_ix
        };
        self.set_selected_cell(new_row, col_ix, cx);
      } else {
        // No cell selected, select first cell
        self.set_selected_cell(0, 0, cx);
      }
      return;
    }

    // Row selection mode
    let mut selected_row = self.selected_row.unwrap_or(0);
    if selected_row > 0 {
      selected_row = selected_row.saturating_sub(1);
    } else if self.loop_selection {
      selected_row = rows_count.saturating_sub(1);
    }

    self.set_selected_row(selected_row, cx);
  }

  pub(crate) fn action_select_next(
    &mut self, _: &SelectDown, _: &mut Window, cx: &mut Context<Self>,
  ) {
    let rows_count = self.delegate.rows_count(cx);
    if rows_count < 1 {
      return;
    }

    // Cell selection mode: move down within the same column
    if self.selection_mode.is_cell() {
      if let Some((row_ix, col_ix)) = self.selected_cell {
        let new_row = if row_ix < rows_count.saturating_sub(1) {
          row_ix + 1
        } else if self.loop_selection {
          0
        } else {
          row_ix
        };
        self.set_selected_cell(new_row, col_ix, cx);
      } else {
        // No cell selected, select first cell
        self.set_selected_cell(0, 0, cx);
      }
      return;
    }

    // Row selection mode
    let selected_row = match self.selected_row {
      Some(selected_row) if selected_row < rows_count.saturating_sub(1) => selected_row + 1,
      Some(selected_row) => {
        if self.loop_selection {
          0
        } else {
          selected_row
        }
      }
      _ => 0,
    };

    self.set_selected_row(selected_row, cx);
  }

  pub(crate) fn action_select_first_column(
    &mut self, _: &SelectFirst, _: &mut Window, cx: &mut Context<Self>,
  ) {
    // Cell selection mode: move to first cell in current row
    if self.selection_mode.is_cell() {
      if let Some((row_ix, _)) = self.selected_cell {
        self.set_selected_cell(row_ix, 0, cx);
      } else {
        // No cell selected, select first cell of first row
        self.set_selected_cell(0, 0, cx);
      }
      return;
    }

    // Column selection mode
    self.set_selected_col(0, cx);
  }

  pub(crate) fn action_select_last_column(
    &mut self, _: &SelectLast, _: &mut Window, cx: &mut Context<Self>,
  ) {
    let columns_count = self.delegate.columns_count(cx);

    // Cell selection mode: move to last cell in current row
    if self.selection_mode.is_cell() {
      if let Some((row_ix, _)) = self.selected_cell {
        self.set_selected_cell(row_ix, columns_count.saturating_sub(1), cx);
      } else {
        // No cell selected, select last cell of first row
        self.set_selected_cell(0, columns_count.saturating_sub(1), cx);
      }
      return;
    }

    // Column selection mode
    self.set_selected_col(columns_count.saturating_sub(1), cx);
  }

  pub(crate) fn action_select_page_up(
    &mut self, _: &SelectPageUp, _: &mut Window, cx: &mut Context<Self>,
  ) {
    let step = self.page_item_count();

    // Cell selection mode: move up by page within the same column
    if self.selection_mode.is_cell() {
      if let Some((row_ix, col_ix)) = self.selected_cell {
        let target = row_ix.saturating_sub(step);
        self.set_selected_cell(target, col_ix, cx);
      } else {
        // No cell selected, select first cell
        self.set_selected_cell(0, 0, cx);
      }
      return;
    }

    // Row selection mode
    let current = self.selected_row.unwrap_or(0);
    let target = current.saturating_sub(step);
    self.set_selected_row(target, cx);
  }

  pub(crate) fn action_select_page_down(
    &mut self, _: &SelectPageDown, _: &mut Window, cx: &mut Context<Self>,
  ) {
    let rows_count = self.delegate.rows_count(cx);
    if rows_count == 0 {
      return;
    }

    let step = self.page_item_count();

    // Cell selection mode: move down by page within the same column
    if self.selection_mode.is_cell() {
      if let Some((row_ix, col_ix)) = self.selected_cell {
        let max_row = rows_count.saturating_sub(1);
        let target = (row_ix + step).min(max_row);
        self.set_selected_cell(target, col_ix, cx);
      } else {
        // No cell selected, select first cell
        self.set_selected_cell(0, 0, cx);
      }
      return;
    }

    // Row selection mode
    let current = self.selected_row.unwrap_or(0);
    let max_row = rows_count.saturating_sub(1);
    let target = (current + step).min(max_row);
    self.set_selected_row(target, cx);
  }

  pub(crate) fn action_select_prev_col(
    &mut self, _: &SelectPrevColumn, _: &mut Window, cx: &mut Context<Self>,
  ) {
    let columns_count = self.delegate.columns_count(cx);

    // Cell selection mode: move left within the same row
    if self.selection_mode.is_cell() {
      if let Some((row_ix, col_ix)) = self.selected_cell {
        let new_col = if col_ix > 0 {
          col_ix.saturating_sub(1)
        } else if self.loop_selection {
          columns_count.saturating_sub(1)
        } else {
          col_ix
        };
        self.set_selected_cell(row_ix, new_col, cx);
      } else {
        // No cell selected, select first cell
        self.set_selected_cell(0, 0, cx);
      }
      return;
    }

    // Column selection mode
    let mut selected_col = self.selected_col.unwrap_or(0);
    if selected_col > 0 {
      selected_col = selected_col.saturating_sub(1);
    } else if self.loop_selection {
      selected_col = columns_count.saturating_sub(1);
    }
    self.set_selected_col(selected_col, cx);
  }

  pub(crate) fn action_select_next_col(
    &mut self, _: &SelectNextColumn, _: &mut Window, cx: &mut Context<Self>,
  ) {
    let columns_count = self.delegate.columns_count(cx);

    // Cell selection mode: move right within the same row
    if self.selection_mode.is_cell() {
      if let Some((row_ix, col_ix)) = self.selected_cell {
        let new_col = if col_ix < columns_count.saturating_sub(1) {
          col_ix + 1
        } else if self.loop_selection {
          0
        } else {
          col_ix
        };
        self.set_selected_cell(row_ix, new_col, cx);
      } else {
        // No cell selected, select first cell
        self.set_selected_cell(0, 0, cx);
      }
      return;
    }

    // Column selection mode
    let mut selected_col = self.selected_col.unwrap_or(0);
    if selected_col < columns_count.saturating_sub(1) {
      selected_col += 1;
    } else if self.loop_selection {
      selected_col = 0;
    }

    self.set_selected_col(selected_col, cx);
  }

  /// Scroll table when mouse position is near the edge of the table bounds.
  fn scroll_table_by_col_resizing(&mut self, mouse_position: Point<Pixels>, col_group: &ColGroup) {
    // Do nothing if pos out of the table bounds right for avoid scroll to the
    // right.
    if mouse_position.x > self.bounds.right() {
      return;
    }

    let mut offset = self.horizontal_scroll_handle.offset();
    let col_bounds = col_group.bounds;

    if mouse_position.x < self.bounds.left() && col_bounds.right() < self.bounds.left() + px(20.) {
      offset.x += px(1.);
    } else if mouse_position.x > self.bounds.right()
      && col_bounds.right() > self.bounds.right() - px(20.)
    {
      offset.x -= px(1.);
    }

    self.horizontal_scroll_handle.set_offset(offset);
  }

  /// The `ix`` is the index of the col to resize,
  /// and the `size` is the new size for the col.
  fn resize_cols(&mut self, ix: usize, size: Pixels, _: &mut Window, cx: &mut Context<Self>) {
    if !self.col_resizable {
      return;
    }

    let Some(col_group) = self.col_groups.get_mut(ix) else {
      return;
    };

    if !col_group.is_resizable() {
      return;
    }

    let new_width = size.clamp(col_group.column.min_width, col_group.column.max_width);

    // Only update if it actually changed
    if col_group.current_width() != new_width {
      col_group.preview_width = Some(new_width);
      cx.notify();
    }
  }

  fn commit_resized_columns(&mut self, cx: &mut Context<Self>) {
    let mut changed = false;
    for col_group in &mut self.col_groups {
      if col_group.commit_preview_width() {
        if self.options.auto_detect_col_width {
          self
            .manual_col_widths
            .insert(col_group.column.key.clone(), col_group.width);
        }
        changed = true;
      }
    }

    if !changed {
      return;
    }

    let new_widths = self
      .col_groups
      .iter()
      .map(ColGroup::current_width)
      .collect();
    cx.emit(TableEvent::ColumnWidthsChanged(new_widths));
    cx.notify();
  }

  fn perform_sort(&mut self, col_ix: usize, window: &mut Window, cx: &mut Context<Self>) {
    if !self.sortable {
      return;
    }

    let sort = self.col_groups.get(col_ix).and_then(|g| g.column.sort);
    if sort.is_none() {
      return;
    }

    let sort = sort.unwrap();
    let sort = match sort {
      ColumnSort::Ascending => ColumnSort::Default,
      ColumnSort::Descending => ColumnSort::Ascending,
      ColumnSort::Default => ColumnSort::Descending,
    };

    for (ix, col_group) in self.col_groups.iter_mut().enumerate() {
      if ix == col_ix {
        col_group.column.sort = Some(sort);
      } else if col_group.column.sort.is_some() {
        col_group.column.sort = Some(ColumnSort::Default);
      }
    }

    self.delegate_mut().perform_sort(col_ix, sort, window, cx);

    cx.notify();
  }

  fn move_column(
    &mut self, col_ix: usize, to_ix: usize, window: &mut Window, cx: &mut Context<Self>,
  ) {
    if col_ix == to_ix {
      return;
    }

    self.delegate.move_column(col_ix, to_ix, window, cx);
    let col_group = self.col_groups.remove(col_ix);
    self.col_groups.insert(to_ix, col_group);

    cx.emit(TableEvent::MoveColumn(col_ix, to_ix));
    cx.notify();
  }

  /// Dispatch delegate's `load_more` method when the visible range is near the
  /// end.
  fn load_more_if_need(
    &mut self, rows_count: usize, visible_end: usize, window: &mut Window, cx: &mut Context<Self>,
  ) {
    let threshold = self.delegate.load_more_threshold();
    // Securely handle subtract logic to prevent attempt to subtract with overflow
    if visible_end >= rows_count.saturating_sub(threshold) {
      if !self.delegate.has_more(cx) {
        return;
      }

      self._load_more_task = cx.spawn_in(window, async move |view, window| {
        _ = view.update_in(window, |view, window, cx| {
          view.delegate.load_more(window, cx);
        });
      });
    }
  }

  fn update_visible_range_if_need(
    &mut self, visible_range: Range<usize>, axis: Axis, window: &mut Window, cx: &mut Context<Self>,
  ) {
    // Skip when visible range is only 1 item.
    // The visual_list will use first item to measure.
    if visible_range.len() <= 1 {
      return;
    }

    if axis == Axis::Vertical {
      if self.visible_range.rows == visible_range {
        return;
      }
      self
        .delegate_mut()
        .visible_rows_changed(visible_range.clone(), window, cx);
      self.visible_range.rows = visible_range;
    } else {
      if self.visible_range.cols == visible_range {
        return;
      }
      self
        .delegate_mut()
        .visible_columns_changed(visible_range.clone(), window, cx);
      self.visible_range.cols = visible_range;
    }
  }

  fn render_cell(
    &self, _row_ix: Option<usize>, col_ix: usize, _window: &mut Window, _cx: &mut Context<Self>,
  ) -> Div {
    let Some(col_group) = self.col_groups.get(col_ix) else {
      return h_flex();
    };

    let col_width = col_group.current_width();
    let col_padding = col_group.column.paddings;
    let align = col_group.column.align;

    h_flex()
      .w(col_width)
      .h_full()
      .flex_shrink_0()
      .overflow_hidden()
      .whitespace_nowrap()
      .map(|this| match align {
        gpui::TextAlign::Right => this.justify_end(),
        gpui::TextAlign::Center => this.justify_center(),
        gpui::TextAlign::Left => this.justify_start(),
      })
      .component_size(self.options.size)
      .map(|this| match col_padding {
        Some(padding) => this
          .pl(padding.left)
          .pr(padding.right)
          .pt(padding.top)
          .pb(padding.bottom),
        None => this,
      })
  }

  /// Show Column selection style, when the column is selected and the selection
  /// state is Column. Note: When a cell is selected, column selection style
  /// is not shown.
  fn render_col_wrap(
    &self, _row_ix: Option<usize>, col_ix: usize, _: &mut Window, cx: &mut Context<Self>,
  ) -> Div {
    let el = h_flex().h_full();
    let selectable = self.col_selectable
      && self
        .col_groups
        .get(col_ix)
        .map(|col_group| col_group.column.selectable)
        .unwrap_or(false);

    // Don't show column selection if a cell is selected
    if self.selection_mode.is_cell() {
      return el;
    }

    if selectable && self.selected_col == Some(col_ix) && self.selection_mode.is_column() {
      el.bg(cx.theme().table_active())
    } else {
      el
    }
  }

  fn render_resize_handle(
    &self, ix: usize, _: &mut Window, cx: &mut Context<Self>,
  ) -> impl IntoElement {
    const HANDLE_SIZE: Pixels = px(2.);

    let resizable = self.col_resizable
      && self
        .col_groups
        .get(ix)
        .map(|col| col.is_resizable())
        .unwrap_or(false);
    if !resizable {
      return div().into_any_element();
    }

    let group_id = SharedString::from(format!("resizable-handle:{}", ix));
    let handle_color = if self.resizing_col == Some(ix) {
      cx.theme().primary
    } else {
      cx.theme().border
    };

    h_flex()
      .id(("resizable-handle", ix))
      .group(group_id.clone())
      .occlude()
      .cursor_col_resize()
      .h_full()
      .w(HANDLE_SIZE)
      .ml(-(HANDLE_SIZE))
      .justify_end()
      .items_center()
      .child(
        div()
          .h_full()
          .justify_center()
          .bg(handle_color)
          .group_hover(&group_id, |this| this.bg(handle_color).h_full())
          .w(px(1.)),
      )
      .on_drag_move(
        cx.listener(move |view, e: &DragMoveEvent<ResizeColumn>, window, cx| {
          match e.drag(cx) {
            ResizeColumn((entity_id, ix)) => {
              if cx.entity_id() != *entity_id {
                return;
              }

              // sync col widths into real widths
              // TODO: Consider to remove this, this may not need now.
              // for (_, col_group) in view.col_groups.iter_mut().enumerate() {
              //     col_group.width = col_group.bounds.size.width;
              // }

              let ix = *ix;
              view.resizing_col = Some(ix);

              let col_group = view
                .col_groups
                .get(ix)
                .expect("BUG: invalid col index")
                .clone();

              view.resize_cols(
                ix,
                e.event.position.x - HANDLE_SIZE - col_group.bounds.left(),
                window,
                cx,
              );

              // scroll the table if the drag is near the edge
              view.scroll_table_by_col_resizing(e.event.position, &col_group);
            }
          };
        }),
      )
      .on_drag(ResizeColumn((cx.entity_id(), ix)), |drag, _, _, cx| {
        cx.stop_propagation();
        cx.new(|_| drag.clone())
      })
      .on_mouse_up_out(
        MouseButton::Left,
        cx.listener(|view, _, _, cx| {
          if view.resizing_col.is_none() {
            return;
          }

          view.resizing_col = None;
          view.commit_resized_columns(cx);
        }),
      )
      .into_any_element()
  }

  /// Render the row selector cell (when cell_selectable is enabled)
  fn render_row_selector_cell(
    &self, row_ix: usize, is_head: bool, cx: &mut Context<Self>,
  ) -> impl IntoElement {
    div()
      .id((
        if is_head {
          "row-selector-head"
        } else {
          "row-selector-row"
        },
        row_ix,
      ))
      .w_3()
      .h_full()
      .bg(cx.theme().table_head())
      .flex_shrink_0()
      .component_size(self.options.size)
      .when(!is_head, |this| {
        this.when(self.row_selectable, |this| {
          this.on_click(cx.listener(move |table, _, _window, cx| {
            table.set_selected_row(row_ix, cx);
          }))
        })
      })
  }

  fn render_sort_icon(
    &self, col_ix: usize, col_group: &ColGroup, _: &mut Window, cx: &mut Context<Self>,
  ) -> Option<impl IntoElement> {
    if !self.sortable {
      return None;
    }

    let sort = col_group.column.sort?;

    let (icon, is_on) = match sort {
      ColumnSort::Ascending => (IconName::TextSortAscending, true),
      ColumnSort::Descending => (IconName::TextSortDescending, true),
      ColumnSort::Default => (IconName::ChevronUpDown, false),
    };

    Some(
      Button::new(("icon-sort", col_ix))
        .flat()
        .small()
        .tab_stop(false)
        .selected(is_on)
        .icon(Icon::new(icon))
        .on_click(cx.listener(move |table, _, window, cx| table.perform_sort(col_ix, window, cx))),
    )
  }

  /// Render the column header.
  /// The children must be one by one items.
  /// Because the horizontal scroll handle will use the child_item_bounds to
  /// calculate the item position for itself's `scroll_to_item` method.
  fn render_th(&mut self, col_ix: usize, window: &mut Window, cx: &mut Context<Self>) -> Div {
    let entity_id = cx.entity_id();
    let col_group = self.col_groups.get(col_ix).expect("BUG: invalid col index");

    let movable = self.col_movable && col_group.column.movable;
    let align = col_group.column.align;
    let has_sort_icon = self.sortable && col_group.column.sort.is_some();
    let name = col_group.column.name.clone();
    let th_label = self
      .delegate
      .render_th(col_ix, window, cx)
      .flex_1()
      .label_flex_1()
      .when(has_sort_icon, |this| {
        this.children(self.render_sort_icon(col_ix, col_group, window, cx))
      });

    h_flex()
      .h_full()
      .child(
        self
          .render_cell(None, col_ix, window, cx)
          .id(("col-header", col_ix))
          .on_click(cx.listener(move |this, _, window, cx| {
            this.on_col_head_click(col_ix, window, cx);
          }))
          .child(
            h_flex()
              .size_full()
              .items_center()
              .map(|this| match align {
                gpui::TextAlign::Right => this.justify_end(),
                gpui::TextAlign::Center => this.justify_center(),
                gpui::TextAlign::Left => this.justify_start(),
              })
              .child(th_label),
          )
          .when(movable, |this| {
            this
              .on_drag(
                DragColumn {
                  entity_id,
                  col_ix,
                  name,
                  width: col_group.current_width(),
                },
                |drag, _, _, cx| {
                  cx.stop_propagation();
                  cx.new(|_| drag.clone())
                },
              )
              .drag_over::<DragColumn>(|this, _, _, cx| {
                this
                  .rounded_l_none()
                  .border_l_2()
                  .border_r_0()
                  .border_color(cx.theme().drag_border)
              })
              .on_drop(cx.listener(move |table, drag: &DragColumn, window, cx| {
                // If the drag col is not the same as the drop col, then swap the cols.
                if drag.entity_id != cx.entity_id() {
                  return;
                }

                table.move_column(drag.col_ix, col_ix, window, cx);
              }))
          }),
      )
      // resize handle
      .child(self.render_resize_handle(col_ix, window, cx))
      // to save the bounds of this col.
      .on_prepaint({
        let view = cx.entity().clone();
        move |bounds, _, cx| view.update(cx, |r, _| r.col_groups[col_ix].bounds = bounds)
      })
  }

  fn render_table_header(
    &mut self, left_columns_count: usize, window: &mut Window, cx: &mut Context<Self>,
  ) -> impl IntoElement {
    let view = cx.entity().clone();
    let horizontal_scroll_handle = self.horizontal_scroll_handle.clone();

    // Reset fixed head columns bounds, if no fixed columns are present
    if left_columns_count == 0 {
      self.fixed_head_cols_bounds = Bounds::default();
    }

    let mut header = self.delegate_mut().render_header(window, cx);
    let style = header.style().clone();

    header
      .w_full()
      .h(self.options.size.table_row_height())
      .flex_shrink_0()
      .border_b_1()
      .border_color(cx.theme().border)
      .text_color(cx.theme().table_head_foreground())
      .refine_style(&style)
      .when(self.cell_selectable, |this| {
        this.child(self.render_row_selector_cell(0, true, cx))
      })
      .when(left_columns_count > 0, |this| {
        let view = view.clone();
        // Render left fixed columns
        this.child(
          h_flex()
            .relative()
            .h_full()
            .bg(cx.theme().table_head())
            .children(
              self
                .col_groups
                .clone()
                .into_iter()
                .filter(|col| col.column.fixed == Some(ColumnFixed::Left))
                .enumerate()
                .map(|(col_ix, _)| self.render_th(col_ix, window, cx)),
            )
            .child(
              // Fixed columns border
              div()
                .absolute()
                .top_0()
                .right_0()
                .bottom_0()
                .w_0()
                .flex_shrink_0()
                .border_r_1()
                .border_color(cx.theme().border),
            )
            .on_prepaint(move |bounds, _, cx| {
              view.update(cx, |r, _| r.fixed_head_cols_bounds = bounds)
            }),
        )
      })
      .child(
        // Columns
        h_flex()
          .id("table-head")
          .size_full()
          .overflow_x_scroll()
          .relative()
          .track_scroll(&horizontal_scroll_handle)
          .bg(cx.theme().table_head())
          .child(
            h_flex()
              .relative()
              .children(
                self
                  .col_groups
                  .clone()
                  .into_iter()
                  .skip(left_columns_count)
                  .enumerate()
                  .map(|(col_ix, _)| self.render_th(left_columns_count + col_ix, window, cx)),
              )
              .child(self.delegate.render_last_empty_col(window, cx)),
          ),
      )
  }

  #[allow(clippy::too_many_arguments)]
  fn render_table_row(
    &mut self, row_ix: usize, rows_count: usize, left_columns_count: usize,
    col_sizes: Rc<Vec<gpui::Size<Pixels>>>, columns_count: usize, _is_filled: bool,
    window: &mut Window, cx: &mut Context<Self>,
  ) -> Stateful<Div> {
    let horizontal_scroll_handle = self.horizontal_scroll_handle.clone();
    let is_stripe_row = self.options.stripe && !row_ix.is_multiple_of(2);
    let is_selected = self.selected_row == Some(row_ix);
    let view = cx.entity().clone();
    let row_height = self.options.size.table_row_height();

    if row_ix < rows_count {
      let mut tr = self.delegate.render_tr(row_ix, window, cx);
      let style = tr.style().clone();

      tr.w_full()
        .h(row_height)
        .when(is_stripe_row, |this| this.bg(cx.theme().table_even()))
        .refine_style(&style)
        .hover(|this| {
          if is_selected {
            this
          } else {
            this.bg(cx.theme().table_hover())
          }
        })
        .when(self.cell_selectable, |this| {
          this.child(self.render_row_selector_cell(row_ix, false, cx))
        })
        .when(left_columns_count > 0, |this| {
          // Left fixed columns
          this.child(
            h_flex()
              .relative()
              .h_full()
              .children({
                let mut items = Vec::with_capacity(left_columns_count);

                (0..left_columns_count).for_each(|col_ix| {
                  let is_cell_selected =
                    self.selected_cell == Some((row_ix, col_ix)) && self.selection_mode.is_cell();

                  items.push(
                    self
                      .render_col_wrap(Some(row_ix), col_ix, window, cx)
                      .child(
                        self
                          .render_cell(Some(row_ix), col_ix, window, cx)
                          .id(("table-cell", ((row_ix as u64) << 32) | col_ix as u64))
                          .relative()
                          .child(self.measure_render_td(row_ix, col_ix, window, cx))
                          .when(is_cell_selected, |this| {
                            this.child(div().absolute().inset_0().bg(cx.theme().table_active()))
                          })
                          .when(self.cell_selectable, |this| {
                            this
                              .on_click(cx.listener(move |table, e, window, cx| {
                                table.on_cell_click(e, row_ix, col_ix, window, cx);
                              }))
                              .on_mouse_down(
                                MouseButton::Right,
                                cx.listener(move |table, e, window, cx| {
                                  table.on_cell_right_click(e, row_ix, col_ix, window, cx);
                                }),
                              )
                          }),
                      ),
                  );
                });
                items
              })
              .child(
                // Fixed columns border
                div()
                  .absolute()
                  .top_0()
                  .right_0()
                  .bottom_0()
                  .w_0()
                  .flex_shrink_0()
                  .border_r_1()
                  .border_color(cx.theme().border),
              ),
          )
        })
        .child(
          h_flex()
            .flex_1()
            .h_full()
            .overflow_hidden()
            .relative()
            .child(
              crate::h_virtual_list(view, row_ix, col_sizes, {
                move |table, visible_range: Range<usize>, window, cx| {
                  table.update_visible_range_if_need(
                    visible_range.clone(),
                    Axis::Horizontal,
                    window,
                    cx,
                  );

                  let mut items = Vec::with_capacity(visible_range.end - visible_range.start);

                  visible_range.for_each(|col_ix| {
                    let col_ix = col_ix + left_columns_count;
                    let is_cell_selected = table.selected_cell == Some((row_ix, col_ix))
                      && table.selection_mode.is_cell();

                    let el = table
                      .render_col_wrap(Some(row_ix), col_ix, window, cx)
                      .child(
                        table
                          .render_cell(Some(row_ix), col_ix, window, cx)
                          .id(("table-cell", ((row_ix as u64) << 32) | col_ix as u64))
                          .relative()
                          .child(table.measure_render_td(row_ix, col_ix, window, cx))
                          .when(is_cell_selected, |this| {
                            this.child(div().absolute().inset_0().bg(cx.theme().table_active()))
                          })
                          .when(table.cell_selectable, |this| {
                            this
                              .on_click(cx.listener(move |table, e, window, cx| {
                                cx.stop_propagation();
                                table.on_cell_click(e, row_ix, col_ix, window, cx);
                              }))
                              .on_mouse_down(
                                MouseButton::Right,
                                cx.listener(move |table, e, window, cx| {
                                  table.on_cell_right_click(e, row_ix, col_ix, window, cx);
                                }),
                              )
                          }),
                      );

                    items.push(el);
                  });

                  items
                }
              })
              .with_scroll_handle(&self.horizontal_scroll_handle),
            )
            .child(self.delegate.render_last_empty_col(window, cx)),
        )
        // Row selected style
        // Note: Don't show row selection if a cell is selected
        .when_some(self.selected_row, |this, _| {
          this.when(is_selected && self.selection_mode.is_row(), |this| {
            this.child(div().absolute().inset_0().bg(cx.theme().table_active()))
          })
        })
        .on_mouse_down(
          MouseButton::Right,
          cx.listener(move |this, e, window, cx| {
            this.on_row_right_click(e, Some(row_ix), window, cx);
          }),
        )
        .on_click(cx.listener(move |this, e, window, cx| {
          this.on_row_left_click(e, row_ix, window, cx);
        }))
    } else {
      // Render fake rows to fill the rest table space
      self
        .delegate
        .render_tr(row_ix, window, cx)
        .w_full()
        .h(row_height)
        .when(is_stripe_row, |this| this.bg(cx.theme().table_even()))
        .when(self.cell_selectable, |this| {
          // Render empty row selector cell for fake rows
          this.child(
            div()
              .w(px(40.))
              .h_full()
              .flex_shrink_0()
              .component_size(self.options.size),
          )
        })
        .children((0..columns_count).map(|col_ix| {
          h_flex()
            .left(horizontal_scroll_handle.offset().x)
            .child(self.render_cell(None, col_ix, window, cx))
        }))
        .child(self.delegate.render_last_empty_col(window, cx))
    }
  }

  /// Calculate the extra rows needed to fill the table empty space when
  /// `stripe` is true.
  fn calculate_extra_rows_needed(
    &self, total_height: Pixels, actual_height: Pixels, row_height: Pixels,
  ) -> usize {
    let mut extra_rows_needed = 0;

    let remaining_height = total_height - actual_height;
    if remaining_height > px(0.) {
      extra_rows_needed = (remaining_height / row_height).floor() as usize;
    }

    extra_rows_needed
  }

  #[inline]
  fn measure_render_td(
    &mut self, row_ix: usize, col_ix: usize, window: &mut Window, cx: &mut Context<Self>,
  ) -> impl IntoElement {
    self
      .delegate
      .render_td(row_ix, col_ix, window, cx)
      .into_any_element()
  }

  fn measure(&mut self, _window: &mut Window, _cx: &mut Context<Self>) {
    self._measure.clear();
  }

  fn render_vertical_scrollbar(
    &mut self, _: &mut Window, _: &mut Context<Self>,
  ) -> Option<impl IntoElement> {
    Some(
      div()
        .occlude()
        .absolute()
        .top(self.options.size.table_row_height())
        .right_0()
        .bottom_0()
        .w(Scrollbar::width())
        .child(Scrollbar::vertical(&self.vertical_scroll_handle).max_fps(60)),
    )
  }

  fn render_horizontal_scrollbar(
    &mut self, _: &mut Window, _: &mut Context<Self>,
  ) -> impl IntoElement {
    div()
      .occlude()
      .absolute()
      .left(self.fixed_head_cols_bounds.size.width)
      .right_0()
      .bottom_0()
      .h(Scrollbar::width())
      .child(Scrollbar::horizontal(&self.horizontal_scroll_handle))
  }
}

impl<D> Focusable for TableState<D>
where
  D: TableDelegate,
{
  fn focus_handle(&self, _cx: &gpui::App) -> FocusHandle {
    self.focus_handle.clone()
  }
}
impl<D> EventEmitter<TableEvent> for TableState<D> where D: TableDelegate {}

impl<D> Render for TableState<D>
where
  D: TableDelegate,
{
  fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
    self.measure(window, cx);
    self.apply_auto_detect_col_widths(window, cx);

    // Horizontal header/body share one handle; keep y locked to avoid transient
    // vertical drift when scrolling table content.
    let mut horizontal_offset = self.horizontal_scroll_handle.offset();
    if horizontal_offset.y != px(0.) {
      horizontal_offset.y = px(0.);
      self.horizontal_scroll_handle.set_offset(horizontal_offset);
    }

    let columns_count = self.delegate.columns_count(cx);
    let left_columns_count = self
      .col_groups
      .iter()
      .filter(|col| self.col_fixed && col.column.fixed == Some(ColumnFixed::Left))
      .count();
    let rows_count = self.delegate.rows_count(cx);
    let loading = self.delegate.loading(cx);
    let bordered = self.options.bordered;

    let row_height = self.options.size.table_row_height();
    let total_height = self
      .vertical_scroll_handle
      .0
      .borrow()
      .base_handle
      .bounds()
      .size
      .height;
    let actual_height = row_height * rows_count as f32;
    let extra_rows_count =
      self.calculate_extra_rows_needed(total_height, actual_height, row_height);
    let render_rows_count = if self.options.stripe {
      rows_count + extra_rows_count
    } else {
      rows_count
    };
    let bottom_gap = self.options.bottom_gap;
    let render_rows_count = if bottom_gap.is_some() {
      render_rows_count + 1
    } else {
      render_rows_count
    };
    let has_right_click_target = self.right_clicked_row.is_some()
      || self.right_clicked_cell.is_some()
      || self.right_clicked_blank;
    let is_filled = total_height > Pixels::ZERO && total_height <= actual_height;

    let loading_view = if loading {
      Some(
        self
          .delegate
          .render_loading(self.options.size, window, cx)
          .into_any_element(),
      )
    } else {
      None
    };

    let empty_view = if rows_count == 0 {
      Some(
        div()
          .size_full()
          .child(self.delegate.render_empty(window, cx))
          .into_any_element(),
      )
    } else {
      None
    };

    let inner_table = v_flex()
      .id("table-inner")
      .size_full()
      .overflow_hidden()
      .on_mouse_down(
        MouseButton::Right,
        cx.listener(|this, e, window, cx| {
          this.on_blank_right_click(e, window, cx);
        }),
      )
      .child(self.render_table_header(left_columns_count, window, cx))
      .context_menu({
        let view = cx.entity().clone();
        move |menu, window: &mut Window, cx: &mut Context<PopupMenu>| {
          let (
            right_clicked_row,
            right_clicked_cell,
            right_clicked_blank,
            blank_context_menu_builder,
          ) = {
            let state = view.read(cx);
            (
              state.right_clicked_row,
              state.right_clicked_cell,
              state.right_clicked_blank,
              state.blank_context_menu_builder.clone(),
            )
          };

          if let Some((row_ix, col_ix)) = right_clicked_cell {
            view.update(cx, |state, cx| {
              state
                .delegate_mut()
                .cell_context_menu(row_ix, col_ix, menu, window, cx)
            })
          } else if let Some(row_ix) = right_clicked_row {
            view.update(cx, |state, cx| {
              state.delegate_mut().context_menu(row_ix, menu, window, cx)
            })
          } else if right_clicked_blank {
            if let Some(builder) = blank_context_menu_builder {
              view.update(cx, |_, cx| builder(menu, window, cx))
            } else {
              menu
            }
          } else {
            menu
          }
        }
      })
      .map(|this| {
        if rows_count == 0 {
          this.children(empty_view)
        } else {
          this.child(
            uniform_list(
              "table-uniform-list",
              render_rows_count,
              cx.processor(move |table, visible_range: Range<usize>, window, cx| {
                let col_sizes: Rc<Vec<gpui::Size<Pixels>>> = Rc::new(
                  table
                    .col_groups
                    .iter()
                    .skip(left_columns_count)
                    .map(|col| col.bounds.size)
                    .collect(),
                );

                table.load_more_if_need(rows_count, visible_range.end, window, cx);
                table.update_visible_range_if_need(
                  visible_range.clone(),
                  Axis::Vertical,
                  window,
                  cx,
                );

                if visible_range.end > rows_count {
                  table.scroll_to_row(
                    std::cmp::min(visible_range.start, rows_count.saturating_sub(1)),
                    cx,
                  );
                }

                let mut items =
                  Vec::with_capacity(visible_range.end.saturating_sub(visible_range.start));

                visible_range.for_each(|row_ix| {
                  // Render bottom gap placeholder
                  if row_ix >= rows_count + extra_rows_count {
                    if let Some(gap) = bottom_gap {
                      items.push(div().h(gap).into_any_element());
                    }
                    return;
                  }

                  items.push(
                    table
                      .render_table_row(
                        row_ix,
                        rows_count,
                        left_columns_count,
                        col_sizes.clone(),
                        columns_count,
                        is_filled,
                        window,
                        cx,
                      )
                      .into_any_element(),
                  );
                });

                items
              }),
            )
            .flex_grow()
            .size_full()
            .with_sizing_behavior(ListSizingBehavior::Auto)
            .track_scroll(self.vertical_scroll_handle.clone())
            .into_any_element(),
          )
        }
      });

    div()
      .id("table")
      .key_context("Table")
      .track_focus(&self.focus_handle)
      .on_action(cx.listener(Self::action_cancel))
      .on_action(cx.listener(Self::action_select_next))
      .on_action(cx.listener(Self::action_select_prev))
      .on_action(cx.listener(Self::action_select_next_col))
      .on_action(cx.listener(Self::action_select_prev_col))
      .on_action(cx.listener(Self::action_select_first_column))
      .on_action(cx.listener(Self::action_select_last_column))
      .on_action(cx.listener(Self::action_select_page_up))
      .on_action(cx.listener(Self::action_select_page_down))
      .size_full()
      .bg(cx.theme().table_bg())
      .when(bordered, |this| {
        this
          .rounded(cx.theme().radius)
          .border_1()
          .border_color(cx.theme().border)
      })
      .children(loading_view)
      .when(!loading, |this| {
        this
          .child(inner_table)
          .child(ScrollableMask::new(
            Axis::Horizontal,
            &self.horizontal_scroll_handle,
          ))
          .when(has_right_click_target, |this| {
            this.on_mouse_down_out(cx.listener(|this, e, window, cx| {
              this.on_row_right_click(e, None, window, cx);
              cx.notify();
            }))
          })
      })
      .on_prepaint({
        let state = cx.entity();
        move |bounds, _, cx| state.update(cx, |state, _| state.bounds = bounds)
      })
      .when(!window.is_inspector_picking(cx), |this| {
        this.child(
          div()
            .absolute()
            .top_0()
            .size_full()
            .when(self.options.scrollbar_visible.bottom, |this| {
              this.child(self.render_horizontal_scrollbar(window, cx))
            })
            .when(
              self.options.scrollbar_visible.right && rows_count > 0,
              |this| this.children(self.render_vertical_scrollbar(window, cx)),
            ),
        )
      })
  }
}