// import formatTrendValue from utils
import { formatTrendValue } from './utils';

export default function AnalysisTrend( props: AnalysisTrendProps ) {
	let {
		value,
		notation = 'compact',
		direction = 'neutral',
		value2 = null,
		notation2 = null,
		direction2 = 'neutral',
		relation = 'scale',
	} = props;

	if ( notation2 === null ) {
		notation2 = notation;
	}

	let prefix = '';
	if ( direction === 'up' ) {
		prefix = '+';
	}
	if ( direction === 'down' ) {
		prefix = '-';
	}
	const formattedValue = `${ prefix }${ formatTrendValue(
		value,
		notation
	) }`;

	let formattedValue2: string | null = null;
	if ( value2 !== null ) {
		let prefix2 = '';
		if ( direction2 === 'up' ) {
			prefix2 = '+';
		}
		if ( direction2 === 'down' ) {
			prefix2 = '-';
		}
		formattedValue2 = `${ prefix2 }${ formatTrendValue(
			value2,
			notation2
		) }`;
		if ( relation === 'parenthesis' ) {
			formattedValue2 = `(${ formattedValue2 })`;
		}
	}

	const isValuesTheSame =
		value === value2 && direction === direction2 && notation === notation2;

	return (
		<span
			className={ `gs-analysis-trend gs-analysis-trend-${ direction }` }
		>
			<span className="gs-analysis-trend__value">{ formattedValue }</span>
			{ direction === 'up' && (
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 24 24"
					fill="currentColor"
				>
					<path
						fillRule="evenodd"
						d="M6.7 6a1 1 0 0 0-.6.5v1c.2.2.3.4.6.4l4 .1h3.9l-4.2 4.2A206 206 0 0 0 6 16.6v.9l.6.5.7-.1 4.4-4.3L16 9.4v8l.1.1a1 1 0 0 0 1.8 0V6.6a1 1 0 0 0-.5-.5l-.2-.1H6.7"
					/>
				</svg>
			) }
			{ direction === 'down' && (
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 24 24"
					fill="currentColor"
				>
					<path
						fillRule="evenodd"
						d="M6.7 6a1 1 0 0 0-.6.5v.9l4.3 4.4 4.2 4.2h-3.9c-4.1 0-4 0-4.3.2l-.3.3v1c.2.2.3.4.6.4l5.3.1h5.4c.3-.2.4-.4.5-.6V6.5a1 1 0 0 0-1.8 0v4.2l-.1 3.9-4.2-4.2A33.1 33.1 0 0 0 7.3 6a1 1 0 0 0-.6 0"
					/>
				</svg>
			) }
			{ value2 !== null && ! isValuesTheSame && relation === 'scale' && (
				<span className="gs-analysis-trend__separator"> - </span>
			) }
			{ value2 !== null && ! isValuesTheSame && (
				<span className="gs-analysis-trend__value">
					{ formattedValue2 }
				</span>
			) }
		</span>
	);
}