/** @format */
/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { ToggleControl } from '@wordpress/components';
import { Component } from '@wordpress/element';

/**
 * Internal dependencies
 */
import {
	Card,
	EllipsisMenu,
	MenuItem,
	MenuTitle,
	SummaryList,
	SummaryNumber,
} from '@woocommerce/components';
import './style.scss';

class StorePerformance extends Component {
	constructor() {
		super( ...arguments );
		this.state = {
			showCustomers: true,
			showProducts: true,
			showOrders: true,
		};

		this.toggle = this.toggle.bind( this );
	}

	toggle( type ) {
		return () => {
			this.setState( state => ( { [ type ]: ! state[ type ] } ) );
		};
	}

	renderMenu() {
		return (
			<EllipsisMenu label={ __( 'Choose which analytics to display', 'wc-admin' ) }>
				<MenuTitle>{ __( 'Display Stats:', 'wc-admin' ) }</MenuTitle>
				<MenuItem onInvoke={ this.toggle( 'showCustomers' ) }>
					<ToggleControl
						label={ __( 'Show Customers', 'wc-admin' ) }
						checked={ this.state.showCustomers }
						onChange={ this.toggle( 'showCustomers' ) }
					/>
				</MenuItem>
				<MenuItem onInvoke={ this.toggle( 'showProducts' ) }>
					<ToggleControl
						label={ __( 'Show Products', 'wc-admin' ) }
						checked={ this.state.showProducts }
						onChange={ this.toggle( 'showProducts' ) }
					/>
				</MenuItem>
				<MenuItem onInvoke={ this.toggle( 'showOrders' ) }>
					<ToggleControl
						label={ __( 'Show Orders', 'wc-admin' ) }
						checked={ this.state.showOrders }
						onChange={ this.toggle( 'showOrders' ) }
					/>
				</MenuItem>
			</EllipsisMenu>
		);
	}

	render() {
		const totalOrders = 10;
		const totalProducts = 1000;
		const { showCustomers, showProducts, showOrders } = this.state;

		return (
			<Card
				title={ __( 'Store Performance', 'wc-admin' ) }
				menu={ this.renderMenu() }
				className="woocommerce-dashboard__store-performance"
			>
				<SummaryList>
					{ showCustomers && (
						<SummaryNumber
							label={ __( 'New Customers', 'wc-admin' ) }
							value={ '2' }
							prevLabel={ __( 'Previous Week:', 'wc-admin' ) }
							prevValue={ 3 }
							delta={ -33 }
						/>
					) }
					{ showProducts && (
						<SummaryNumber
							label={ __( 'Total Products', 'wc-admin' ) }
							value={ totalProducts }
							prevLabel={ __( 'Previous Week:', 'wc-admin' ) }
							prevValue={ totalProducts }
							delta={ 0 }
						/>
					) }
					{ showOrders && (
						<SummaryNumber
							label={ __( 'Total Orders', 'wc-admin' ) }
							value={ totalOrders }
							prevLabel={ __( 'Previous Week:', 'wc-admin' ) }
							prevValue={ totalOrders }
							delta={ 0 }
						/>
					) }
				</SummaryList>
			</Card>
		);
	}
}

export default StorePerformance;