/**
 * DashboardPopularPagesWidget 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.
 */

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

/**
 * Internal dependencies
 */
import Data from 'googlesitekit-data';
import { DATE_RANGE_OFFSET, STORE_NAME } from '../../datastore/constants';
import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
import whenActive from '../../../../util/when-active';
import PreviewTable from '../../../../components/PreviewTable';
import SourceLink from '../../../../components/SourceLink';
import { isZeroReport } from '../../util';
import TableOverflowContainer from '../../../../components/TableOverflowContainer';
import { generateDateRangeArgs } from '../../util/report-date-range-args';
import ReportTable from '../../../../components/ReportTable';
import DetailsPermaLinks from '../../../../components/DetailsPermaLinks';
import { numFmt } from '../../../../util';

const { useSelect } = Data;

function DashboardPopularPagesWidget( { Widget, WidgetReportZero, WidgetReportError } ) {
	const {
		data,
		error,
		loading,
		analyticsMainURL,
	} = useSelect( ( select ) => {
		const store = select( STORE_NAME );

		const { startDate, endDate, compareStartDate, compareEndDate } = select( CORE_USER ).getDateRangeDates( { offsetDays: DATE_RANGE_OFFSET } );
		const args = {
			startDate,
			endDate,
			dimensions: [
				'ga:pageTitle',
				'ga:pagePath',
			],
			metrics: [
				{
					expression: 'ga:pageviews',
					alias: 'Pageviews',
				},
			],
			orderby: [
				{
					fieldName: 'ga:pageviews',
					sortOrder: 'DESCENDING',
				},
			],
			limit: 10,
		};

		return {
			analyticsMainURL: store.getServiceReportURL(
				'content-pages',
				generateDateRangeArgs( { startDate, endDate, compareStartDate, compareEndDate } ),
			),
			data: store.getReport( args ),
			error: store.getErrorForSelector( 'getReport', [ args ] ),
			loading: ! store.hasFinishedResolution( 'getReport', [ args ] ),
		};
	} );

	const Footer = () => (
		<SourceLink
			className="googlesitekit-data-block__source"
			name={ _x( 'Analytics', 'Service name', 'google-site-kit' ) }
			href={ analyticsMainURL }
			external
		/>
	);

	if ( loading ) {
		return (
			<Widget
				noPadding
				Footer={ () => (
					<SourceLink
						className="googlesitekit-data-block__source"
						name={ _x( 'Analytics', 'Service name', 'google-site-kit' ) }
						href={ analyticsMainURL }
						external
					/>
				) }
			>
				<PreviewTable padding />
			</Widget>
		);
	}

	if ( error ) {
		return (
			<Widget Footer={ Footer } >
				<WidgetReportError moduleSlug="analytics" error={ error } />
			</Widget>
		);
	}

	if ( isZeroReport( data ) ) {
		return (
			<Widget Footer={ Footer } >
				<WidgetReportZero moduleSlug="analytics" />
			</Widget>
		);
	}

	return (
		<Widget noPadding Footer={ Footer } >
			<TableOverflowContainer>
				<ReportTable
					rows={ data[ 0 ].data.rows }
					columns={ tableColumns }
				/>
			</TableOverflowContainer>
		</Widget>
	);
}

const tableColumns = [
	{
		title: __( 'Most popular content', 'google-site-kit' ),
		primary: true,
		Component: ( { row } ) => {
			const [ title, path ] = row.dimensions;
			return <DetailsPermaLinks title={ title } path={ path } />;
		},
	},
	{
		title: __( 'Views', 'google-site-kit' ),
		field: 'metrics.0.values.0',
		Component: ( { fieldValue } ) => numFmt( fieldValue, { style: 'decimal' } ),
	},
];

export default whenActive( { moduleName: 'analytics' } )( DashboardPopularPagesWidget );

@@ -2811,21 +2811,17 @@
 %09%3CWidget
-%0A%09%09%09%09
+ 
 noPaddin
@@ -2825,232 +2825,26 @@
 ding
-%0A%09%09%09%09Footer=%7B () =%3E (%0A%09%09%09%09%09%3CSourceLink%0A%09%09%09%09%09%09className=%22googlesitekit-data-block__source%22%0A%09%09%09%09%09%09name=%7B _x( 'Analytics', 'Service name', 'google-site-kit' ) %7D%0A%09%09%09%09%09%09href=%7B analyticsMainURL %7D%0A%09%09%09%09%09%09external%0A%09%09%09%09%09/%3E%0A%09%09%09%09) %7D%0A%09%09%09
+ Footer=%7B Footer %7D
 %3E%0A%09%09
@@ -2939,33 +2939,32 @@
 ooter=%7B Footer %7D
- 
 %3E%0A%09%09%09%09%3CWidgetRep
@@ -3102,25 +3102,24 @@
 r=%7B Footer %7D
- 
 %3E%0A%09%09%09%09%3CWidge
@@ -3188,16 +3188,16 @@
 eturn (%0A
+
 %09%09%3CWidge
@@ -3225,17 +3225,16 @@
 Footer %7D
- 
 %3E%0A%09%09%09%3CTa

Correct typo (CR feedback).