import { __ } from '@wordpress/i18n';
import { createPortal } from 'react-dom';
import { useState } from '@wordpress/element';

import {
	hasSettingsTabs,
	SettingsTabsRenderer,
} from 'growthstack/slotfills/settings';

import LianaAutomationTab from './components/LianaAutomationTab';
import LianaMailerTab from './components/LianaMailerTab';
import Tabs from './../shared/Tabs';
import Tab from './../shared/Tab';
import useNotice from './../shared/useNotice';
import { getConnectionStatus } from './utils';

type SettingsProps = {
	cookieConsentPluginActive: boolean;
	formsPageUrl: string;
	lianaAutomationChannels: object[];
	lianaAutomationConnected: boolean;
	lianaAutomationEndpoint: string;
	lianaAutomationSettings: LianaAutomationSettings;
	lianaMailerConnected: boolean;
	lianaMailerEndpoint: string;
	lianaMailerSettings: LianaAPISettings;
	migrationEndpoint: string;
	migrationStatus: string;
};

export default function Settings( props: SettingsProps ) {
	const {
		cookieConsentPluginActive,
		formsPageUrl,
		lianaAutomationChannels,
		lianaAutomationConnected,
		lianaAutomationEndpoint,
		lianaAutomationSettings,
		lianaMailerConnected,
		lianaMailerEndpoint,
		lianaMailerSettings,
		migrationEndpoint,
	} = props;

	const { showNotice } = useNotice();

	const [ migrationStatus, setMigrationStatus ] = useState(
		props.migrationStatus
	);
	const [ mailerSettings, setMailerSettings ] =
		useState( lianaMailerSettings );
	const [ mailerConnected, setMailerConnected ] =
		useState( lianaMailerConnected );
	const [ automationChannels, setAutomationChannels ] = useState(
		lianaAutomationChannels
	);
	const [ automationSettings, setAutomationSettings ] = useState(
		lianaAutomationSettings
	);
	const [ automationConnected, setAutomationConnected ] = useState(
		lianaAutomationConnected
	);

	const tabHeadersTarget =
		typeof window !== 'undefined'
			? document.querySelector( '.js-growthstack-view-tabs' )
			: null;

	const automationStatus = getConnectionStatus( {
		connected: automationConnected,
		settings: automationSettings.api,
	} );

	const mailerStatus = getConnectionStatus( {
		connected: mailerConnected,
		settings: mailerSettings,
	} );

	const [ licenseStatus, setLicenseStatus ] = useState( 'empty' );

	return (
		<>
			<Tabs
				renderTabHeaders={ ( headers ) =>
					tabHeadersTarget
						? createPortal( headers, tabHeadersTarget )
						: null
				}
				urlKey="tab"
			>
				{ hasSettingsTabs() && (
					<Tab
						label={ __( 'GrowthStack', 'liana-with-growthstack' ) }
						slug="settings"
						status={ licenseStatus }
					>
						<SettingsTabsRenderer
							showNotice={ showNotice }
							setStatusIndicator={ setLicenseStatus }
						/>
					</Tab>
				) }
				<Tab
					label={ __( 'LianaAutomation', 'liana-with-growthstack' ) }
					slug="settings-liana-automation"
					status={ automationStatus }
				>
					<LianaAutomationTab
						channels={ automationChannels }
						connected={ automationConnected }
						cookieConsentPluginActive={ cookieConsentPluginActive }
						formsPageUrl={ formsPageUrl }
						migrationEndpoint={ migrationEndpoint }
						migrationStatus={ migrationStatus }
						restEndpoint={ lianaAutomationEndpoint }
						setChannels={ setAutomationChannels }
						setConnected={ setAutomationConnected }
						setMigrationStatus={ setMigrationStatus }
						setSettings={ setAutomationSettings }
						settings={ automationSettings }
					/>
				</Tab>
				<Tab
					label={ __( 'LianaMailer', 'liana-with-growthstack' ) }
					slug="settings-liana-mailer"
					status={ mailerStatus }
				>
					<LianaMailerTab
						connected={ mailerConnected }
						formsPageUrl={ formsPageUrl }
						migrationEndpoint={ migrationEndpoint }
						migrationStatus={ migrationStatus }
						restEndpoint={ lianaMailerEndpoint }
						setConnected={ setMailerConnected }
						setMigrationStatus={ setMigrationStatus }
						setSettings={ setMailerSettings }
						settings={ mailerSettings }
					/>
				</Tab>
			</Tabs>
		</>
	);
}