/**
 * AnalyticsDashboardWidgetTopPagesTable component.
 *
 * Site Kit by Google, Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import classnames from 'classnames';
import PropTypes from 'prop-types';

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import Data from 'googlesitekit-data';
import { getTimeInSeconds, numFmt } from '../../../../util';
import withData from '../../../../components/higherorder/withData';
import { STORE_NAME, DATE_RANGE_OFFSET } from '../../datastore/constants';
import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
import { TYPE_MODULES } from '../../../../components/data';
import PreviewTable from '../../../../components/PreviewTable';
import { getTopPagesReportDataDefaults } from '../../util';
import TableOverflowContainer from '../../../../components/TableOverflowContainer';
import Link from '../../../../components/Link';
import { generateDateRangeArgs } from '../../util/report-date-range-args';
import ReportTable from '../../../../components/ReportTable';

const { useSelect } = Data;

const AnalyticsDashboardWidgetTopPagesTable = ( props ) => {
	const { data, colspan } = props;

	if ( ! data || ! data.length ) {
		return null;
	}

	if ( ! Array.isArray( data[ 0 ].data.rows ) ) {
		return null;
	}

	return (
		<div className={ classnames(
			'mdc-layout-grid__cell',
			`mdc-layout-grid__cell--span-${ colspan }`
		) }>
			<TableOverflowContainer>
				<ReportTable
					rows={ data[ 0 ].data.rows }
					columns={ tableColumns }
				/>
			</TableOverflowContainer>
		</div>

	);
};

const tableColumns = [
	{
		title: __( 'Title', 'google-site-kit' ),
		description: __( 'Page Title', 'google-site-kit' ),
		primary: true,
		Component: ( { row } ) => {
			const [ title, url ] = row.dimensions;
			const serviceURL = useSelect( ( select ) => {
				const dateRangeDates = select( CORE_USER ).getDateRangeDates( {
					offsetDays: DATE_RANGE_OFFSET,
				} );
				return select( STORE_NAME ).getServiceReportURL( 'content-drilldown', {
					'explorer-table.plotKeys': '[]',
					'_r.drilldown': `analytics.pagePath:${ url }`,
					...generateDateRangeArgs( dateRangeDates ),
				} );
			} );
			return (
				<Link
					href={ serviceURL }
					external
					inherit
				>
					{ title }
				</Link>
			);
		},
	},
	{
		title: __( 'Pageviews', 'google-site-kit' ),
		description: __( 'Pageviews', 'google-site-kit' ),
		Component: ( { row } ) => numFmt( row.metrics[ 0 ].values[ 0 ], { style: 'decimal' } ),
	},
	{
		title: __( 'Unique Pageviews', 'google-site-kit' ),
		description: __( 'Unique Pageviews', 'google-site-kit' ),
		className: 'hidden-on-mobile',
		Component: ( { row } ) => numFmt( row.metrics[ 0 ].values[ 1 ], { style: 'decimal' } ),
	},
	{
		title: __( 'Bounce Rate', 'google-site-kit' ),
		description: __( 'Bounce Rate', 'google-site-kit' ),
		className: 'hidden-on-mobile',
		Component: ( { row } ) => {
			const percent = Number( row.metrics[ 0 ].values[ 2 ] ) / 100;
			return numFmt( percent, '%' );
		},
	},
];

AnalyticsDashboardWidgetTopPagesTable.propTypes = {
	data: PropTypes.array,
	colspan: PropTypes.number,
};

AnalyticsDashboardWidgetTopPagesTable.defaultProps = {
	data: null,
	colspan: 12,
};

export default withData(
	AnalyticsDashboardWidgetTopPagesTable,
	[
		{
			type: TYPE_MODULES,
			identifier: 'analytics',
			datapoint: 'report',
			data: getTopPagesReportDataDefaults(),
			priority: 1,
			maxAge: getTimeInSeconds( 'day' ),
			context: [ 'Single', 'Dashboard' ],
		},
	],
	<PreviewTable padding />,
	{ createGrid: true }
);

@@ -946,16 +946,8 @@
 onds
-, numFmt
  %7D f
@@ -966,24 +966,24 @@
 ./../util';%0A
+
 import withD
@@ -1645,16 +1645,120 @@
 tTable';
+%0Aimport Num from '../../../../components/Num';%0Aimport Decimal from '../../../../components/Num/Decimal';
 %0A%0Aconst 
@@ -3119,94 +3119,104 @@
 ,%0A%09%09
-Component: ( %7B row %7D ) =%3E numFmt( row.metrics%5B 0 %5D.values%5B 0 %5D, %7B style: 'decimal' %7D )
+field: 'metrics.0.values.0',%0A%09%09Component: ( %7B fieldValue %7D ) =%3E %3CDecimal value=%7B fieldValue %7D /%3E
 ,%0A%09%7D
@@ -3373,94 +3373,104 @@
 ,%0A%09%09
-Component: ( %7B row %7D ) =%3E numFmt( row.metrics%5B 0 %5D.values%5B 1 %5D, %7B style: 'decimal' %7D )
+field: 'metrics.0.values.1',%0A%09%09Component: ( %7B fieldValue %7D ) =%3E %3CDecimal value=%7B fieldValue %7D /%3E
 ,%0A%09%7D
@@ -3617,138 +3617,130 @@
 ,%0A%09%09
-Component: ( %7B row %7D ) =%3E %7B%0A%09%09%09const percent = Number( row.metrics%5B 0 %5D.values%5B 2 %5D ) / 100;%0A%09%09%09return numFmt( percent, '%25' );%0A%09%09%7D
+field: 'metrics.0.values.2',%0A%09%09Component: ( %7B fieldValue %7D ) =%3E %3CNum value=%7B Number( fieldValue ) / 100 %7D shorthand=%22%25%22 /%3E
 ,%0A%09%7D

Refactor AnalyticsDashboardWidgetTopPagesTable with Num components.