import React from 'react'
import PropTypes from 'prop-types'

import Tooltip from 'react-uikit/tooltip'
import Icon from 'react-uikit/icon'

import styles from './styles.scss'
import BEMModule from 'utils/bem'
const bem = new BEMModule(styles)

const TradeTableCell = ({content, cell, onSort}) => {
    const helpIconClassNames = bem.classNames('c-trade-table-head__help')
    const sortIconClassNames = bem.classNames('c-trade-table-head__sort')
    const tooltipClassNames = bem.classNames('c-trade-table-head__tooltip')
    const labelClassNames = bem.classNames('c-trade-table-head__label', {
        active: Boolean(cell.sort),
        clickable: cell.isSortable,
    })
    const handleSort = () => cell.isSortable && onSort && onSort(cell)

    const SortIcon = () => {
        if (!cell.sort) {
            return null
        }
        return cell.sort === 'ASC' ? (
            <Icon name="sort" className={sortIconClassNames} />
        ) : (
            <Icon name="sort" className={sortIconClassNames} />
        )
    }

    return (
        <th
            data-tip=""
            data-for={cell.value}
            className={labelClassNames}
            onClick={handleSort}
        >
            <SortIcon />
            &nbsp;
            {cell.label}&nbsp;
            {content && (
                <React.Fragment>
                    <Icon name="tab-support" className={helpIconClassNames} />
                    <Tooltip id={cell.value} className={tooltipClassNames}>
                        <p>{content.definition}</p>
                    </Tooltip>
                </React.Fragment>
            )}
        </th>
    )
}

TradeTableCell.propTypes = {
    cell: PropTypes.shape({
        isSortable: PropTypes.bool,
        label: PropTypes.string,
        sort: PropTypes.oneOf(['ASC', 'DESC']),
        value: PropTypes.string,
    }),
    content: PropTypes.object,
    onSort: PropTypes.func,
}

const TradeTableHead = ({
    className,
    content,
    tableHead,
    totalNumber,
    onSort,
}) => {
    const rootClassNames = bem.classNames('c-trade-table-head', className)
    const totalNumberClassNames = bem.classNames(
        'c-trade-table-head__total-number'
    )

    return (
        <thead className={rootClassNames}>
            <tr>
                <th>Sort by</th>
                {tableHead.map((cell) => (
                    <TradeTableCell
                        key={cell.value}
                        cell={cell}
                        onSort={onSort}
                        content={content[cell.value]}
                    />
                ))}
                <th className={totalNumberClassNames}>
                    <span>{totalNumber}</span>
                    &ensp;results
                </th>
            </tr>
        </thead>
    )
}

TradeTableHead.propTypes = {
    className: PropTypes.string,
    content: PropTypes.object,
    tableHead: PropTypes.arrayOf(
        PropTypes.shape({
            value: PropTypes.string,
            label: PropTypes.string,
            sort: PropTypes.oneOf(['ASC', 'DESC']),
        })
    ),
    totalNumber: PropTypes.number,
    onSort: PropTypes.func,
}

TradeTableHead.defaultProps = {
    totalNumber: '––',
}

export default TradeTableHead