/**
 * WordPress dependencies
 */
import { useState } from '@safe-wordpress/element';
import { TabPanel } from '@safe-wordpress/components';
import { _x } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import { SocialMediaSidebar, ReferenceEditor } from '@nelio-content/edit-post';
import { getPremiumComponent, PremiumDialog } from '@nelio-content/components';
import { SocialMessageEditor } from '@nelio-content/social-message-editor';
import { TaskEditor } from '@nelio-content/task-editor';

/**
 * Internal dependencies
 */
import { ToolsSidebar } from './tools-sidebar';
import './style.scss';

export const Layout = (): JSX.Element => {
	const [ activeTab, setActiveTab ] = useState( 'tools' );
	const FutureActionEditor = getPremiumComponent(
		'post-page/future-action-editor',
		'null'
	);

	return (
		<>
			<TabPanel
				className="nelio-content-elementor-editor__tab-panel"
				activeClass="nelio-content-elementor-editor__tab--is-active"
				orientation="horizontal"
				initialTabName={ activeTab }
				onSelect={ setActiveTab }
				tabs={ [
					{
						name: 'tools',
						title: _x( 'Editorial Tools', 'text', 'nelio-content' ),
						className: 'nelio-content-elementor-editor__tab',
					},
					{
						name: 'social',
						title: _x( 'Social Media', 'text', 'nelio-content' ),
						className: 'nelio-content-elementor-editor__tab',
					},
				] }
			>
				{ ( { name: tab } ) => (
					<>
						{ 'tools' === tab && <ToolsSidebar /> }
						{ 'social' === tab && <SocialMediaSidebar /> }
					</>
				) }
			</TabPanel>

			<ReferenceEditor />
			<SocialMessageEditor />
			<TaskEditor />
			<FutureActionEditor />

			<PremiumDialog />
		</>
	);
};