import {__, sprintf} from '@wordpress/i18n';
import {useMemo} from '@wordpress/element';
import '../../../../admin/assets/design/scss/_sortable_table_header.scss';
import {buildCompareLookup, computeDelta, getRowKey} from './compareMath';
import {formatBucketLabel} from './dateLabels';

const formatNumber = ( num ) => new Intl.NumberFormat( 'default' ).format( Math.round( num ) );
const formatPercent = ( num ) => `${num.toFixed( 2 )}%`;
/* translators: %s: difference between two rates, in percentage points. */
const formatPoints = ( num ) => sprintf( __( '%s pp', 'adpresso' ), num.toFixed( 2 ) );
const {dateFormat = 'F j, Y', rowLimit = 500} = window.adpressoAnalyticsData || {};

// Single source for header and cell order.
const METRIC_COLUMNS = [
	{key: 'impressions', label: __( 'Impressions', 'adpresso' ), format: formatNumber, formatDelta: formatNumber},
	{key: 'clicks', label: __( 'Clicks', 'adpresso' ), format: formatNumber, formatDelta: formatNumber},
	{key: 'ctr', label: __( 'CTR (%)', 'adpresso' ), format: formatPercent, formatDelta: formatPoints},
	{key: 'viewability', label: __( 'Active View Rate (%)', 'adpresso' ), format: formatPercent, formatDelta: formatPoints, pro: true},
	{key: 'impressions_av', label: __( 'Active View Impressions', 'adpresso' ), format: formatNumber, formatDelta: formatNumber, pro: true}
];

/**
 * A metric with its comparison value and the change (absolute, and in % when the comparison value isn't 0).
 */
export const CompareCell = ( {current, previous, format, formatDelta = format} ) => {
	const {delta, percent} = computeDelta( current, previous );
	const trend = delta > 0 ? 'is-positive' : (delta < 0 ? 'is-negative' : 'is-neutral');
	const sign = delta > 0 ? '+' : '';

	return (
		<div className="adpresso-compare-cell">
			<span className="adpresso-compare-cell__current">{format( current )}</span>
			<span className="adpresso-compare-cell__previous">
				<span className="screen-reader-text">{__( 'Comparison period:', 'adpresso' )} </span>
				{format( previous )}
				<span className={`adpresso-compare-cell__delta ${trend}`}>
					({sign}{formatDelta( delta )}{percent !== null && `, ${sign}${percent.toFixed( 1 )}%`})
				</span>
			</span>
		</div>
	);
};

const DataTable = ( {tableData, isPro, viewMode, sorting, onSort, compareData = null, onDrilldown, visibleColumns = {}, grouping = 'day'} ) => {
	const formatDate = ( date ) => formatBucketLabel( date, grouping, dateFormat );

	const showCol = ( key ) => visibleColumns[key] !== false;
	const columns = METRIC_COLUMNS.filter( col => (!col.pro || isPro) && showCol( col.key ) );
	const hasCompare = Array.isArray( compareData );

	const getVisibleColumnCount = () => 1 + columns.length;

	const SortableHeader = ( {label, columnKey} ) => {
		const isSorted = sorting.orderBy === columnKey;
		const newOrder = (isSorted && sorting.order === 'asc') ? 'desc' : 'asc';
		const ariaSort = isSorted ? (sorting.order === 'asc' ? 'ascending' : 'descending') : 'none';

		return (
			<th
				scope="col"
				className={`sortable ${isSorted ? 'sorted ' + sorting.order : ''}`}
				aria-sort={ariaSort}
				// onClick={() => onSort( {orderBy: columnKey, order: newOrder} )}
				onClick={( e ) => {
					e.preventDefault();
					onSort( {orderBy: columnKey, order: newOrder} );
				}}
			>
				<a href="#">
					<span>{label}</span>
				</a>
				<button
					type="button"
					className={`adpresso-th__sort ${isSorted ? `is-sorted ${sorting.order}` : ''}`}
					aria-label={sprintf( __( 'Sort by %s', 'adpresso' ), label )}
				>
						<span className="adpresso-th__chevrons">
							<span className="chev up"></span>
							<span className="chev down"></span>
						</span>
				</button>
			</th>
		);
	};

	const getFirstColumnHeader = () => {
		switch ( viewMode ) {
			case 'ads':
				return __( 'Ad', 'adpresso' );
			case 'groups':
				return __( 'Group', 'adpresso' );
			case 'placements':
				return __( 'Placement', 'adpresso' );
			case 'date':
			default:
				return __( 'Date', 'adpresso' );
		}
	};
	const renderFirstColumn = ( row ) => {
		let content;
		let drilldownParams = null;
		let rowId = 0;
		switch ( viewMode ) {
			case 'ads':
				content = row.name || __( '(No Title)', 'adpresso' );
				break;
			case 'groups':
				rowId = row.group_id;
				// ID 0: ads delivered outside a group.
				content = Number( rowId ) === 0 ? __( 'Without group', 'adpresso' ) : ( row.name || __( '(No Title)', 'adpresso' ) );
				drilldownParams = {
					viewMode: 'ads',
					filters:  {groups: [rowId]}
				};
				break;
			case 'placements':
				rowId = row.placement_id;
				// ID 0: ads delivered without a placement (shortcode, block, widget).
				content = Number( rowId ) === 0 ? __( 'Without placement', 'adpresso' ) : ( row.name || __( '(No Title)', 'adpresso' ) );
				// Define the action for the drilldown. Show ads filtered by this placement.
				drilldownParams = {
					viewMode: 'ads',
					filters:  {placements: [rowId]}
				};
				break;
			case 'date':
			default:
				return formatDate( row.date );
		}

		if ( false && drilldownParams ) {
			return (
				<a
					href="#"
					onClick={( e ) => {
						e.preventDefault();
						onDrilldown( drilldownParams );
					}}
					title={__( 'Show items', 'adpresso' )}
				>
					{content}
					<span className="adpresso-text adpresso-color-grey"> (ID: {rowId})</span>
				</a>
			);
		}

		return (
			<>
				{content}
				{row.ad_id && <span className="adpresso-text adpresso-color-grey"> (ID: {row.ad_id})</span>}
			</>
		);
	};

	const compareMap = useMemo(
		() => buildCompareLookup( tableData, compareData, viewMode ),
		[tableData, compareData, viewMode]
	);

	return (
		<table className="wp-list-table table-view-list adpresso-data-table">
			<thead>
			<tr>
				{viewMode === 'date' ? (
					<SortableHeader label={getFirstColumnHeader()} columnKey="date"/>
				) : (
					<SortableHeader label={getFirstColumnHeader()} columnKey="name"/>
				)}
				{columns.map( col => <SortableHeader key={col.key} label={col.label} columnKey={col.key}/> )}
			</tr>
			</thead>
			<tbody>
			{tableData.length === 0 && (
				<tr>
					<td colSpan={getVisibleColumnCount()} style={{textAlign: 'center'}}>
						{__( 'No data to display.', 'adpresso' )}
					</td>
				</tr>
			)}
			{tableData.map( ( row, index ) => {
				const rowKey = row[getRowKey( viewMode )];
				const lookupKey = viewMode === 'date' ? rowKey : String( rowKey );
				// Date rows past the end of a shorter compare range have no counterpart; entities without one had 0.
				const compareRow = hasCompare
					? (compareMap.get( lookupKey ) || (viewMode === 'date' ? null : {}))
					: null;

				return (
					<tr key={rowKey || index}>
						<td>
							{renderFirstColumn( row )}
							{compareRow && compareRow.date && (
								<span className="adpresso-compare-cell__previous">
									{/* translators: %s: the date of the comparison period. */}
									{sprintf( __( 'vs. %s', 'adpresso' ), formatDate( compareRow.date ) )}
								</span>
							)}
						</td>
						{columns.map( col => (
							<td key={col.key}>
								{compareRow
									? <CompareCell current={row[col.key] || 0} previous={compareRow[col.key] || 0} format={col.format} formatDelta={col.formatDelta}/>
									: col.format( row[col.key] || 0 )}
							</td>
						) )}
					</tr>
				);
			} )}
			</tbody>
			{viewMode !== 'date' && tableData.length >= rowLimit && (
				<tfoot>
				<tr>
					<td colSpan={getVisibleColumnCount()} className="adpresso-data-table__limit-notice">
						{/* translators: %d: maximum number of rows shown in the statistics table. */}
						{sprintf( __( 'Showing the first %d entries for the current sorting. Use the filters to narrow down the list.', 'adpresso' ), rowLimit )}
					</td>
				</tr>
				</tfoot>
			)}
		</table>
	);
};

export default DataTable;