1import React from 'react'
2import PropTypes from 'prop-types'
3import {connect} from 'react-redux'
4import classnames from 'classnames'
5import {columns, defaultColumnNames} from './FlowColumns'
6
7import {setSort} from '../../ducks/flows'
8
9FlowTableHead.propTypes = {
10    setSort: PropTypes.func.isRequired,
11    sortDesc: PropTypes.bool.isRequired,
12    sortColumn: PropTypes.string,
13    displayColumnNames: PropTypes.array,
14}
15
16export function getDisplayColumns(displayColumnNames) {
17    if (typeof displayColumnNames == "undefined") {
18        return Object.values(columns)
19    }
20    return displayColumnNames.map(x => columns[x]).concat([columns.quickactions]);
21}
22
23export function FlowTableHead({sortColumn, sortDesc, setSort, displayColumnNames}) {
24    const sortType = sortDesc ? 'sort-desc' : 'sort-asc'
25
26    const displayColumns = getDisplayColumns(displayColumnNames)
27
28    return (
29        <tr>
30            {displayColumns.map(Column => (
31                <th className={classnames(Column.headerClass, sortColumn === Column.name && sortType)}
32                    key={Column.name}
33                    onClick={() => setSort(Column.name, Column.name !== sortColumn ? false : !sortDesc)}>
34                    {Column.headerName}
35                </th>
36            ))}
37        </tr>
38    )
39}
40
41export default connect(
42    state => ({
43        sortDesc: state.flows.sort.desc,
44        sortColumn: state.flows.sort.column,
45        displayColumnNames: state.options["web_columns"] ? state.options["web_columns"].value : defaultColumnNames,
46    }),
47    {
48        setSort
49    }
50)(FlowTableHead)
51