import { ColCell, DataCell, PivotSheet, RowCell, S2Event } from '@antv/s2';

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

s2.on(S2Event.DATA_CELL_BRUSH_SELECTION, (cells: DataCell[]) => {
  // 此事件默认打开，配置 options: { interaction: { brushSelection : { dataCell: true } } } 开启数值单元格刷选
  console.log('刷选的单元格', cells)
})

s2.on(S2Event.ROW_BRUSH_SELECTION, (cells: RowCell[]) => {
  // 此事件默认关闭，配置 options: { interaction: { brushSelection : { rowCell: true } } } 开启行头单元格刷选
  console.log('刷选的行头单元格：', cells)
})

s2.on(S2Event.COL_BRUSH_SELECTION, (cells: ColCell[]) => {
  // 此事件默认关闭，配置 options: { interaction: { brushSelection : { colCell: true } } } 开启列头单元格刷选
  console.log('刷选的列头单元格：', cells)
})

s2.on(S2Event.COL_CELL_HOVER, (event) => {
  ...
})

s2.on(S2Event.GLOBAL_KEYBOARD_DOWN, (event) => {
  ...
})

import { S2Event, SpreadSheet } from '@antv/s2'
import { SheetComponent } from '@antv/s2-react';

function App() {
  const s2Ref = React.useRef<SpreadSheet>();

  const onSheetMounted = () => {
    s2Ref.current?.on(S2Event.DATA_CELL_CLICK, (event) => {
      console.log('onDataCellClick: ', event)
    })
  }

  return <SheetComponent ref={s2Ref} onMounted={onSheetMounted}/>
}

import { SheetComponent } from '@antv/s2-react';

const onDataCellClick = () => {}

<SheetComponent onDataCellClick={onDataCellClick} />

import { SheetComponent } from '@antv/s2-vue';

const onDataCellClick = () => {}

<SheetComponent @dataCellClick={onDataCellClick} />

const s2Options = {
  interaction: {
    eventListenerOptions: {
      capture: true,
    }
  }
}

// 等价于
window.addEventListener('mouseup', () => {}, {
  capture: true,
})

window.addEventListener('mouseup', () => {}, true)

const s2Options = {
  interaction: {
    ...
  }
}

const s2Options = {
  interaction: {
    selectedCellsSpotlight: true, // 默认 false
  }
};

const s2Options = {
  interaction: {
    hoverHighlight: false // 默认 true
    // 等同于
    // hoverHighlight: {
    //   rowHeader = false, // 高亮悬停格子所在行头
    //   colHeader = false, // 高亮悬停格子所在列头
    //   currentRow = false, // 高亮悬停格子所在行
    //   currentCol = false, // 高亮悬停格子所在列
    // },
  }
};

// selectedCellHighlight 的类型为  boolean | { rowHeader: boolean, colHeader: boolean, rowCells: boolean, colCells: boolean }
// 当 selectedCellHighlight 为 boolean 时
const s2Options = {
  interaction: {
    selectedCellHighlight: true // 默认 false， 当 selectedCellsSpotlight 为 true 时，会高亮 rowHeader 和 colHeader （兼容未拓展类型前的设计）
  }
};

// 同时还可以分别配置 selectedCellHighlight 中 header 和 cells 的高亮
const s2Options = {
  interaction: {
    selectedCellHighlight: {
      rowHeader: true,  // 选中单元格时，高亮行头
      colHeader: true,  // 选中单元格时，高亮列头
      currentRow: true,  // 选中单元格时，高亮当前行
      currentCol: true,  // 选中单元格时，高亮当前列
    },
  },
};

const s2Options = {
  interaction: {
    hoverFocus: false // 默认 true
  }
};

const s2Options = {
  interaction: {
    brushSelection: false
    // 等同于：
    // brushSelection:  {
    //   row: false,
    //   col: false,
    //   data: false,
    // }
  }
};

const s2Options = {
  interaction: {
    brushSelection:  {
      rowCell: true // 默认 false
    }
  }
};

const s2Options = {
  interaction: {
    brushSelection:  {
      colCell: true // 默认 false
    }
  }
};

const s2Options = {
  interaction: {
    multiSelection: false, // 默认 true
    rangeSelection: false // 默认 true
  }
};

const s2Options = {
  interaction: {
    selectedCellMove: false // 默认 true
  }
};

const s2DataConfig = {
  fields: {
    columns: ['fieldA', 'fieldB']
  }
}

const s2Options = {
  interaction: {
    // 默认隐藏
    hiddenColumns: ['fieldA']
  },
  // 关闭手动隐藏
  tooltip: {
    operation: {
      hiddenColumns: false
    }
  }
};

s2.on(S2Event.GLOBAL_RESET, () => {
  console.log('重置')
})

const s2Options = {
  interaction: {
    autoResetSheetStyle: false
  }
};

const s2Options = {
  interaction: {
    autoResetSheetStyle: (event, spreadsheet) => {
      if (event?.target instanceof HTMLElement) {
        return !document
          .querySelector('.container')
          ?.contains(event?.target);
      }

      return true;
    },
  }
};

import { InterceptType } from '@antv/s2'

// 添加拦截
s2.interaction.addIntercepts([InterceptType.HOVER, InterceptType.CLICK]);

// 移除拦截
s2.interaction.removeIntercepts([InterceptType.HOVER, InterceptType.CLICK]);

const s2 = new PivotSheet()

s2.interaction.selectAll()
s2.interaction.selectCell()
s2.interaction.highlightCell()
s2.interaction.changeCell()