/**
 * AnalyticsDashboardWidgetTopAcquisitionSources component.
 *
 * Site Kit by Google, Copyright 2019 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 { map } from 'lodash';

/**
 * WordPress dependencies
 */
import { __, sprintf } from '@wordpress/i18n';
import { Fragment } from '@wordpress/element';

/**
 * Internal dependencies
 */
import Data from 'googlesitekit-data';
import {
	getTimeInSeconds,
	numberFormat,
} from '../../../util';
import { getCurrentDateRange } from '../../../util/date-range';
import withData from '../../../components/higherorder/withdata';
import { TYPE_MODULES } from '../../../components/data';
import { getDataTableFromData, TableOverflowContainer } from '../../../components/data-table';
import PreviewTable from '../../../components/preview-table';
import MiniChart from '../../../components/mini-chart';
import { trafficSourcesReportDataDefaults, isDataZeroForReporting } from '../util';
import { STORE_NAME as CORE_USER } from '../../../googlesitekit/datastore/user/constants';
const { useSelect } = Data;

function AnalyticsDashboardWidgetTopAcquisitionSources( { data } ) {
	const dateRange = useSelect( ( select ) => {
		const store = select( CORE_USER );
		return store ? store.getDateRange() : undefined;
	} );

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

	const currentRange = getCurrentDateRange( dateRange );
	const headers = [
		{
			title: __( 'Medium', 'google-site-kit' ),
			tooltip: __( 'Medium refers to where your traffic originated from', 'google-site-kit' ),
		},
		{
			title: __( 'Users', 'google-site-kit' ),
			tooltip: __( 'Number of users that originated from that traffic', 'google-site-kit' ),
		},
		{
			title: __( 'New Users', 'google-site-kit' ),
			/* translators: %s: date range */
			tooltip: sprintf( __( 'Number of new users to visit your page over last %s', 'google-site-kit' ), currentRange ),
		},
		{
			title: __( 'Sessions', 'google-site-kit' ),
			/* translators: %s: date range */
			tooltip: sprintf( __( 'Number of sessions users had on your website over last %s', 'google-site-kit' ), currentRange ),
		},
		{
			title: __( 'Percentage', 'google-site-kit' ),
			tooltip: __( 'Percentage of sessions', 'google-site-kit' ),
		},
	];
	const totalSessions = data[ 0 ].data.totals[ 0 ].values[ 0 ];

	const dataMapped = map( data[ 0 ].data.rows, ( row, i ) => {
		const percent = ( row.metrics[ 0 ].values[ 0 ] / totalSessions * 100 );

		// Exclude sources below 1%.
		if ( 1 > percent ) {
			return false;
		}

		return [
			row.dimensions[ 0 ],
			numberFormat( row.metrics[ 0 ].values[ 0 ] ),
			numberFormat( row.metrics[ 0 ].values[ 1 ] ),
			numberFormat( row.metrics[ 0 ].values[ 2 ] ),
			<Fragment key={ 'minichart-analytics-top-as-' + i }><div className="googlesitekit-table__body-item-chart-wrap">{ `${ percent.toFixed( 2 ) }%` } <MiniChart percent={ percent.toFixed( 1 ) } index={ i } /></div></Fragment>,
		];
	} );

	const options = {
		hideHeader: false,
		chartsEnabled: false,
	};

	const dataTable = getDataTableFromData( dataMapped, headers, options );

	return (
		<div className="googlesitekit-details-widget">
			<TableOverflowContainer>
				{ dataTable }
			</TableOverflowContainer>
		</div>
	);
}

export default withData(
	AnalyticsDashboardWidgetTopAcquisitionSources,
	[
		{
			type: TYPE_MODULES,
			identifier: 'analytics',
			datapoint: 'report',
			data: {
				...trafficSourcesReportDataDefaults,
				url: global._googlesitekitLegacyData.permaLink,
			},
			priority: 1,
			maxAge: getTimeInSeconds( 'day' ),
			context: [ 'Single', 'Dashboard' ],
		},
	],
	<PreviewTable
		rows={ 4 }
		rowHeight={ 50 }
	/>,
	{},
	isDataZeroForReporting
);

@@ -1724,26 +1724,8 @@
 ) =%3E
- %7B%0A%09%09const store =
  sel
@@ -1744,63 +1744,23 @@
 ER )
-;%0A%09%09return store ? store.getDateRange() : undefined;%0A%09%7D
+.getDateRange()
  );%0A

Simplify dateRange selection in the Analytics widget.