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

import Button from 'react-uikit/button'
import Icon from 'react-uikit/icon'

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

class HeadingItem extends React.Component {
    state = {
        isAscending: this.props.isDefaultAscending,
    }

    updateSortingCriteria = () => {
        this.props.sortData &&
            this.props.sortData({
                sortBy: this.props.columnName,
                sortDirection: this.state.isAscending ? 'asc' : 'desc',
            })
    }

    sortData = () => {
        const {columnName, sortedColumn} = this.props

        // If another column was being sorted previously update sort with initial sorting direction
        if (columnName !== sortedColumn) {
            this.updateSortingCriteria()
            return
        }

        // otherwise update the sort direction and request the new paginated data
        this.setState(
            (state) => ({
                isAscending: !state.isAscending,
            }),
            this.updateSortingCriteria
        )
    }

    render() {
        const {
            align,
            className,
            columnName,
            isMobile,
            isSortable,
            sortedColumn,
            style,
            title,
        } = this.props

        const listHeaderItemClassNames = bem.classNames(
            'c-list-header__item',
            className,
            {
                [`${align}`]: align,
                active: columnName === sortedColumn,
                [`not-mobile`]: !isMobile,
            }
        )

        // If the column is sortable render a button
        if (isSortable) {
            return (
                <Button
                    className={listHeaderItemClassNames}
                    onClick={this.sortData}
                >
                    {title}&nbsp;
                    <Icon name="sort" style={{width: '1rem'}} />
                </Button>
            )
        }

        // otherwise render a paragraph tag
        return (
            <p className={listHeaderItemClassNames} style={style}>
                {title}
            </p>
        )
    }
}

HeadingItem.defaultProps = {
    align: 'left',
    isDefaultAscending: false,
    isSortable: false,
    title: '',
}

HeadingItem.propTypes = {
    /**
     * Control over horizontal alignment of the heading item.
     */
    align: PropTypes.oneOf(['left', 'center', 'right']),

    /**
     * Custom style classname
     */
    className: PropTypes.string,

    /**
     * String value equal to one of the enum values which the data can be sorted by.
     */
    columnName: PropTypes.string,

    /**
     * Boolean to establish direction of sort on first click of new column to be sorted.
     */
    isDefaultAscending: PropTypes.bool,

    /**
     * Boolean that enables the heading on mobile.
     */
    isMobile: PropTypes.bool,

    /**
     * Boolean that switches between rendering a button or p tag as the column heading.
     */
    isSortable: PropTypes.bool,

    /**
     * Function that propagates the name of the column and its direction to be sorted.
     */
    sortData: PropTypes.func,

    /**
     * The current column that is being sorted.
     */
    sortedColumn: PropTypes.string,

    /**
     * The current column that is being sorted.
     */
    style: PropTypes.object,

    /**
     * The text to be rendered in the button or p tag.
     */
    title: PropTypes.string,
}

export default HeadingItem