/**
 * External dependencies
 */
import { SettingsContainer } from '@teydeastudio/components/src/settings-container/index.js';
import { SettingsSidebar } from '@teydeastudio/components/src/settings-sidebar/index.js';

/**
 * WordPress dependencies
 */
import { Panel, PanelBody } from '@wordpress/components';
import { createInterpolateElement, Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import { RecommendedPluginsTable } from './component-recommended-plugins-table.js';

/**
 * SettingsForm component
 *
 * @return {Element} SettingsForm component.
 */
export const SettingsForm = () => {
	// Product.
	const product = {
		key: 'careers',
		type: 'theme',
	};

	// Get the recommended plugins list.
	const { recommendedPlugins, pageTitle } = window.teydeaStudio[ product.key ].settingsPage;

	/**
	 * Render the component
	 */
	return (
		<SettingsContainer product={ product } pageTitle={ pageTitle } width="wide" actions={ <Fragment /> }>
			<div className="careers-settings-container">
				<Panel>
					<PanelBody>
						<h2>{ __( 'About the "Careers" WordPress theme', 'careers' ) }</h2>
						<p>
							{ createInterpolateElement(
								__(
									'"Careers" is a WordPress theme for careers websites, recruitment agencies, hiring/people departments. It\'s a theme designed for career-focused websites, explicitly built for the <a>Hiring Center</a> plugin.',
									'careers',
								),
								{
									a: (
										<a // eslint-disable-line jsx-a11y/anchor-has-content
											href="https://wordpress.org/plugins/hiring-center/"
											target="_blank"
											rel="noopener noreferrer"
										/>
									),
								},
							) }
						</p>
						<p>
							{ __(
								'As a full-site-editing theme, it allows you to customize the website to a large extent, change colors and fonts, spacings, and page composition. It comes with 15+ custom patterns and 9 templates, ready to use out of the box.',
								'careers',
							) }
						</p>
						<h2>{ __( 'Recommended plugins', 'careers' ) }</h2>
						{ <RecommendedPluginsTable recommendedPlugins={ recommendedPlugins } /> }
						<h2>{ __( 'Theme demo', 'careers' ) }</h2>
						<p>
							{ createInterpolateElement(
								__(
									"We created a demo page that showcase our vision and suggested setup for this theme - you can <link1>preview it here</link1>. The data dump file is <link2>available for download</link2> if you want to setup a site that is similar to the demo site - simply upload the data dump file using the <link3>WordPress Importer</link3> tool and you'll get most of the things set up for you automatically.",
									'careers',
								),
								{
									link1: (
										<a // eslint-disable-line jsx-a11y/anchor-has-content
											href="https://demo.teydeastudio.com/careers/"
											target="_blank"
											rel="noopener noreferrer"
										/>
									),
									link2: (
										<a // eslint-disable-line jsx-a11y/anchor-has-content
											href="https://demo.teydeastudio.com/dumps/careers.WordPress.2024-10-11.xml"
											target="_blank"
											rel="noopener noreferrer"
										/>
									),
									link3: (
										<a // eslint-disable-line jsx-a11y/anchor-has-content
											href="https://developer.wordpress.org/advanced-administration/wordpress/import/#wordpress"
											target="_blank"
											rel="noopener noreferrer"
										/>
									),
								},
							) }
						</p>
						<h2>{ __( 'About the theme author', 'careers' ) }</h2>
						<p>
							{ createInterpolateElement(
								__(
									'This theme is created and maintained by <strong>Teydea Studio</strong>, a WordPress-focused software engineering studio. We create themes and plugins for WordPress - <a>visit our website</a> to find out more!',
									'careers',
								),
								{
									a: (
										<a // eslint-disable-line jsx-a11y/anchor-has-content
											href="https://teydeastudio.com/?utm_source=Careers"
											target="_blank"
											rel="noopener noreferrer"
										/>
									),
									strong: <strong />,
								},
							) }
						</p>
					</PanelBody>
				</Panel>
			</div>
			<SettingsSidebar product={ product } />
		</SettingsContainer>
	);
};

/**
 * Props validation
 */
SettingsForm.propTypes = {};
