/**
 * External dependencies
 */
import { getQuery, getNewPath } from '@woocommerce/navigation';
import { Button } from '@wordpress/components';
import { Icon, chevronLeft } from '@wordpress/icons';
import { useEffect } from '@wordpress/element';

/**
 * Internal dependencies
 */
import { Tabs } from './tabs';
import { SectionNav } from './section-nav';
import { Content } from './content';
import { possiblyRenderSettingsSlots } from './settings-slots';
import { registerTaxSettingsConflictErrorFill } from './conflict-error-slotfill';
import { registerPaymentsSettingsBannerFill } from '../payments/payments-settings-banner-slotfill';
import { registerSiteVisibilitySlotFill } from '../launch-your-store';
import { useFullScreen } from '~/utils';
import './style.scss';

const Settings = ( { params } ) => {
	useFullScreen( [ 'woocommerce-settings' ] );
	const settingsData = window.wcSettings?.admin?.settingsPages;
	const { section } = getQuery();

	// Be sure to render Settings slots when the params change.
	useEffect( () => {
		possiblyRenderSettingsSlots();
	}, [ params.page, section ] );

	// Register the slot fills for the settings page just once.
	useEffect( () => {
		registerTaxSettingsConflictErrorFill();
		registerPaymentsSettingsBannerFill();
		registerSiteVisibilitySlotFill();
	}, [] );

	if ( ! settingsData ) {
		return <div>Error getting data</div>;
	}

	const sections = settingsData[ params.page ]?.sections;
	const title = settingsData[ params.page ]?.label;
	const contentData =
		Array.isArray( sections ) && sections.length === 0
			? {}
			: sections[ section || '' ];

	return (
		<>
			<div className="woocommerce-settings-layout">
				<div className="woocommerce-settings-layout-navigation">
					<Button href={ getNewPath( {}, '/', {} ) }>
						<Icon icon={ chevronLeft } />
						Settings
					</Button>
					<Tabs data={ settingsData } page={ params.page } />
				</div>
				<div className="woocommerce-settings-layout-content">
					<div className="woocommerce-settings-layout-title">
						<h1>{ title }</h1>
					</div>
					<SectionNav
						data={ settingsData[ params.page ] }
						section={ section }
					>
						<div className="woocommerce-settings-layout-main">
							<Content data={ contentData } />
						</div>
					</SectionNav>
				</div>
			</div>
		</>
	);
};

export default Settings;