import { React, PropTypes, classnames } from '@gravityforms/libraries';
// import Checkbox from '../../elements/Checkbox';
// import Button from '../../elements/Button';
import GridCell from './GridCell';
import { getColumnStyle, getModules } from './utils';

const { forwardRef } = React;

// const ASC = 'ASC';
// const DESC = 'DESC';
//
// const getSortData = ( key ) => {
// 	// First time sorting.
// 	if ( '' === sortBy && '' === sortOrder ) {
// 		return {
// 			sortBy: key,
// 			sortOrder: DESC,
// 		};
// 	}
//
// 	// Already sorted by the same key.
// 	if ( key === sortBy ) {
// 		// If sort order is blank or ascending, switch to descending.
// 		if ( [ '', ASC ].includes( sortOrder ) ) {
// 			return {
// 				sortBy: key,
// 				sortOrder: DESC,
// 			};
// 		}
// 		return {
// 			sortBy: key,
// 			sortOrder: ASC,
// 		};
// 	}
//
// 	// Already sorted by a different key.
// 	return {
// 		sortBy: key,
// 		sortOrder: DESC,
// 	};
// };
//
// const handleSort = ( key ) => {
// 	if ( ! key ) {
// 		return;
// 	}
//
// 	if ( useAjax ) {
// 		if ( isLoading ) {
// 			return;
// 		}
//
// 		const sortData = getSortData( key );
// 		setSortBy( sortData.sortBy );
// 		setSortOrder( sortData.sortOrder );
//
// 		const requestData = {
// 			currentPage: 0,
// 			searchTerm: currentSearchTerm,
// 			...sortData,
// 		};
// 		setIsLoading( true );
// 		sortHandler( requestData )
// 			.then( () => {
// 				setSelectedRows( [] );
// 				setSelectedAllRowsOnAllPages( false );
// 				setCurrentPage( requestData.currentPage );
// 				setIsLoading( false );
// 			} )
// 			.catch( ( error ) => {
// 				// handle error.
// 				setIsLoading( false );
// 				console.info( error );
// 			} );
// 	} else {
// 		// handle local sort.
// 	}
// };

/**
 * @module GridColumns
 * @description Renders the grid columns based on the passed data.
 *
 * @since 4.3.0
 *
 * @param {object}              props                     Component props.
 * @param {Array}               props.columns             Array of column data.
 * @param {object}              props.columnRowAttributes Custom attributes for the column row.
 * @param {string|Array|object} props.columnRowClasses    Custom classes for the column row.
 * @param {object}              props.columnStyleProps    Custom styles for the columns.
 * @param {boolean}             props.equalGrid           Whether the grid should be equal.
 * @param {string}              props.gridId              The ID of the grid.
 * @param {string}              props.location            The location of the grid.
 * @param {Array}               props.modules             The modules for the data grid.
 * @param {boolean}             props.showColumns         Whether to show columns.
 * @param {boolean}             props.showColumnsInFooter Whether to show columns in the footer.
 * @param {object}              ref                       The ref to the component.
 *
 * @return {JSX.Element} The GridColumns component.
 */
const GridColumns = forwardRef( ( props, ref ) => {
	const {
		columns = [],
		columnRowAttributes = {},
		columnRowClasses = [],
		columnStyleProps = {},
		equalGrid = false,
		gridId = '',
		location = 'header',
		modules = [],
		showColumns = true,
		showColumnsInFooter = true,
	} = props;

	if ( ! showColumns || ( location === 'footer' && ! showColumnsInFooter ) ) {
		return null;
	}

	const { BulkActions } = getModules( modules, [ 'BulkActions' ] );

	const columnRowProps = {
		className: classnames( {
			'gform-data-grid__column-row': true,
			[ `gform-data-grid__column-row--${ location }` ]: location,
		}, columnRowClasses ),
		...columnRowAttributes,
	};

	return (
		<div { ...columnRowProps } ref={ ref }>
			{ BulkActions && <BulkActions.BulkSelect { ...props } /> }
			{ columns.map( ( column, index ) => {
				let content = null;
				// if ( sortable && column.sortable && column.component === 'Text' ) {
				// 	let icon;
				// 	if ( column.key === sortBy && ASC === sortOrder ) {
				// 		icon = 'arrow-sm-up';
				// 	} else if ( column.key === sortBy && DESC === sortOrder ) {
				// 		icon = 'arrow-sm-down';
				// 	}
				//
				// 	content = (
				// 		<Button
				// 			customClasses={ [ 'gform-data-grid__column-sort-button', `gform-data-grid__column-sort-button--${ column.key }` ] }
				// 			icon={ icon }
				// 			iconPosition="trailing"
				// 			iconPrefix={ sortIconPrefix }
				// 			label={ column?.props?.content }
				// 			onClick={ () => handleSort( column.key ) }
				// 			type="unstyled"
				// 		/>
				// 	);
				// } else {
				content = <GridCell data={ column } />;
				// }

				return (
					<div
						key={ `${ gridId }-gform-data-grid__column--column-${ index }-${ location }` }
						className={ `gform-data-grid__column gform-data-grid__column-${ index }` }
						style={ getColumnStyle( columnStyleProps[ column.key ], equalGrid ) }
					>
						{ content }
					</div>
				);
			} ) }
		</div>
	);
} );

GridColumns.propTypes = {
	columns: PropTypes.array,
	columnRowAttributes: PropTypes.object,
	columnRowClasses: PropTypes.array,
	columnStyleProps: PropTypes.object,
	equalGrid: PropTypes.bool,
	gridId: PropTypes.string,
	location: PropTypes.oneOf( [ 'header', 'footer' ] ),
	modules: PropTypes.array,
	showColumns: PropTypes.bool,
	showColumnsInFooter: PropTypes.bool,
};

GridColumns.displayName = 'GridColumns';

export default GridColumns;
