// @flow

// $FlowFixMe
import React, { forwardRef } from 'react';
import { connect } from 'react-redux';

import IdHeaderField from './IdHeaderField';
import ColumneHeader from './ColumnHeader';
import Flex from '../Flex';

import { setSelectedRows, setUpdatingRow } from '../../actions';
import {
	getVisibleColumns,
	getNestedVisibleColumns,
} from '../../reducers/mappings';
import { getIsShowingNestedColumns } from '../../reducers/nestedColumns';

type Props = {
	visibleColumns: string[],
	nestedVisibleColumns: string[],
	isShowingNestedColumns: boolean,
	headerRef: any,
};

const DataTableHeader = ({
	visibleColumns,
	isShowingNestedColumns,
	nestedVisibleColumns,
	headerRef,
}: Props) => {
	const mappingCols = isShowingNestedColumns
		? nestedVisibleColumns
		: visibleColumns;
	const columns = ['_id', ...mappingCols];

	if (columns.length >= 1) {
		return (
			<Flex
				wrap="nowrap"
				css={{
					zIndex: 100,
					position: 'relative',
					overflow: 'hidden',
				}}
				innerRef={headerRef}
			>
				{columns.map(
					col =>
						col === '_id' ? (
							<IdHeaderField key={col} />
						) : (
							<ColumneHeader col={col} key={col} />
						),
				)}
			</Flex>
		);
	}
	return null;
};

const mapStateToProps = state => ({
	visibleColumns: getVisibleColumns(state),
	nestedVisibleColumns: getNestedVisibleColumns(state),
	isShowingNestedColumns: getIsShowingNestedColumns(state),
});

const mapDispatchToProps = {
	onSelectedRows: setSelectedRows,
	onSetUpdatingRow: setUpdatingRow,
};

const DataTableContainer = connect(
	mapStateToProps,
	mapDispatchToProps,
)(DataTableHeader);

export default forwardRef((props, ref) => (
	<DataTableContainer {...props} headerRef={ref} />
));

@@ -154,25 +154,24 @@
 mport Column
-e
 Header from 
@@ -1126,17 +1126,16 @@
 %09%3CColumn
-e
 Header c

fix typo