/**
 * 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';

/**
 * Import styles
 */
import './styles.scss';

/**
 * SettingsForm component
 *
 * @return {JSX} 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 = {};
