/**
 * WordPress dependencies
 */
import { TabPanel } from '@wordpress/components';
import { useMemo, memo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import HTMLTab from './html-tab';
import { StyledMessageTab, StyledRawMessage } from './styles';

const getTabs = ( email ) => {
	const tabs = [];

	if ( email.headers[ 'content-type' ]?.includes( 'text/html' ) ) {
		tabs.push( {
			name: 'html',
			title: __( 'HTML', 'LION' ),
			email,
		} );
	}

	tabs.push( {
		name: 'text',
		title: __( 'Plain Text', 'LION' ),
		email,
	} );

	return tabs;
};

function renderTab( tab ) {
	if ( tab.name === 'html' ) {
		return <HTMLTab email={ tab.email } />;
	}

	return (
		<StyledMessageTab variant="info">
			<StyledRawMessage>{ tab.email.message.trim() }</StyledRawMessage>
		</StyledMessageTab>
	);
}

function Message( { email } ) {
	const tabs = useMemo( () => getTabs( email ), [ email ] );

	return <TabPanel tabs={ tabs }>{ renderTab }</TabPanel>;
}

export default memo( Message );