/**
 * The shell every card on the page shares: tabs (or the title) top left, the
 * metric top right, the rows, and a quiet centred Details at the foot. The
 * cards sit two to a row at equal height, so the foot is pushed to the bottom.
 */
import { __ } from '@wordpress/i18n';
import { useUi } from './ui-context';

export default function CardShell( { title, tabs, end, onDetails, children } ) {
	const { Button, Card, FilterTabs } = useUi();

	return (
		<Card className="sa-card" padded={ false }>
			<div className="sa-card__head">
				{ tabs && tabs.items.length > 1 ? (
					<FilterTabs aria-label={ title } items={ tabs.items } value={ tabs.value } onChange={ tabs.onChange } />
				) : (
					<h2 className="sa-card__title">{ title }</h2>
				) }
				{ end && <div className="sa-card__end">{ end }</div> }
			</div>
			<div className="sa-card__body">{ children }</div>
			{ onDetails && (
				<div className="sa-card__foot">
					<Button variant="ghost" size="sm" onClick={ onDetails }>
						{ __( 'Details', 'saddle-analytics' ) }
					</Button>
				</div>
			) }
		</Card>
	);
}

/** The metric switch top right: Visitors ⇄ Page views, shared by the four breakdown cards. */
export function MetricSwitch( { metric, onChange } ) {
	const { Button, icons } = useUi();
	const label = 'pageviews' === metric ? __( 'Page views', 'saddle-analytics' ) : __( 'Visitors', 'saddle-analytics' );
	return (
		<Button
			variant="ghost"
			size="sm"
			className="sa-metric"
			title={ __( 'Switch between visitors and page views', 'saddle-analytics' ) }
			onClick={ () => onChange( 'pageviews' === metric ? 'visitors' : 'pageviews' ) }
		>
			{ label }
			<icons.ArrowLeftRight size={ 14 } />
		</Button>
	);
}

/** A static metric name top right, for cards with one measure. */
export function MetricName( { children } ) {
	return <span className="sa-metric sa-metric--static">{ children }</span>;
}