import {
	createElement,
	useEffect,
	useState,
	Fragment,
} from '@wordpress/element'

import classnames from 'classnames'
import { __, sprintf } from 'ct-i18n'
import ListPicker from './ListPicker'
import { Select } from 'blocksy-options'

import useProExtensionInFree from '../../../../../static/js/dashboard/helpers/useProExtensionInFree'

const freeProviders = ['mailchimp', 'demo']

const EditCredentials = ({ extension, onCredentialsValidated }) => {
	const [provider, setProvider] = useState(extension.data.provider)

	const [apiKey, setApiKey] = useState(extension.data.api_key)
	const [apiUrl, setApiUrl] = useState(extension.data.api_url)
	const [listId, setListId] = useState(extension.data.list_id)
	const [hasList, setHasList] = useState(false)
	const [isLoading, setIsLoading] = useState(false)

	const { isPro, showNotice, content } = useProExtensionInFree(extension, {
		strategy: 'pro',
	})

	useEffect(() => {
		if (
			extension.data &&
			!freeProviders.includes(extension.data.provider) &&
			!isPro
		) {
			setProvider(freeProviders[0])
		}
	}, [])

	const attemptToSaveCredentials = async () => {
		const body = new FormData()

		body.append('provider', provider)
		body.append('api_key', apiKey)
		body.append('api_url', apiUrl)
		body.append('list_id', listId)

		body.append(
			'action',
			'blocksy_ext_newsletter_subscribe_maybe_save_credentials'
		)

		body.append('nonce', ctDashboardLocalizations.dashboard_actions_nonce)

		setIsLoading(true)

		try {
			const response = await fetch(ctDashboardLocalizations.ajax_url, {
				method: 'POST',
				body,
			})

			if (response.status === 200) {
				const body = await response.json()

				if (body.success) {
					if (body.data.result !== 'api_key_invalid') {
						onCredentialsValidated()
					}
				}
			}
		} catch (e) {}

		await new Promise((r) => setTimeout(() => r(), 1000))

		setIsLoading(false)
	}

	const providerMap = {
		mailerlite: 'mailerlite-new',
		convertkit: 'convertkit-new',
	}

	const transformedProvider =
		Object.keys(providerMap).find((p) => provider.includes(p)) || provider

	const value = providerMap[transformedProvider] || provider

	return (
		<div
			className={classnames(
				'ct-extension-options ct-newsletter-subscribe-options'
			)}>
			<h4>{__('Connect Newsletter Provider', 'blocksy-companion')}</h4>

			<div
				className="ct-newsletter-credentials"
				data-columns={
					provider.indexOf('mailerlite') > -1 ||
					provider === 'activecampaign' ||
					provider.indexOf('convertkit') > -1
						? 4
						: ['mailpoet', 'fluentcrm'].includes(provider)
						? 2
						: 3
				}>
				<section>
					<label>{__('Provider', 'blocksy-companion')}</label>
					<Select
						onChange={(copy) => {
							if (!isPro && !freeProviders.includes(copy)) {
								setProvider(copy)
								setTimeout(() => {
									setProvider(freeProviders[0])
								})
								showNotice()
								return
							}

							setProvider(copy)
						}}
						option={{
							placeholder: __(
								'Pick Mailing Service',
								'blocksy-companion'
							),
							choices: extension.data.providers,
						}}
						value={value}
					/>
				</section>

				{provider.indexOf('activecampaign') > -1 && (
					<section>
						<label>{__('API URL', 'blocksy-companion')}</label>

						<div className="ct-option-input">
							<input
								type="text"
								onChange={({ target: { value } }) =>
									setApiUrl(value)
								}
								value={apiUrl || ''}
							/>
						</div>
					</section>
				)}

				{provider.indexOf('mailerlite') > -1 && (
					<section>
						<label>{__('API Version', 'blocksy-companion')}</label>
						<Select
							onChange={(copy) => {
								setProvider(
									copy === 'new'
										? 'mailerlite-new'
										: 'mailerlite'
								)
							}}
							option={{
								placeholder: __(
									'Pick Mailing Service',
									'blocksy-companion'
								),
								choices: [
									{
										key: 'new',
										value: 'New',
									},

									{
										key: 'classic',
										value: 'Classic',
									},
								],
							}}
							value={
								provider === 'mailerlite-new'
									? 'new'
									: 'classic'
							}
						/>
					</section>
				)}

				{provider.indexOf('convertkit') > -1 && (
					<section>
						<label>{__('API Version', 'blocksy-companion')}</label>
						<Select
							onChange={(copy) => {
								setProvider(
									copy === 'new'
										? 'convertkit-new'
										: 'convertkit'
								)
							}}
							option={{
								placeholder: __(
									'Pick Mailing Service',
									'blocksy-companion'
								),
								choices: [
									{
										key: 'new',
										value: 'New (v4)',
									},

									{
										key: 'classic',
										value: 'Classic (v3)',
									},
								],
							}}
							value={
								provider === 'convertkit-new'
									? 'new'
									: 'classic'
							}
						/>
					</section>
				)}

				{(freeProviders.includes(provider) ||
					ctDashboardLocalizations.plugin_data.is_pro) && (
					<Fragment>
						{!['mailpoet', 'fluentcrm'].includes(provider) ? (
							<section>
								<label>
									{__('API Key', 'blocksy-companion')}
								</label>

								<div className="ct-option-input">
									<input
										type="text"
										onChange={({ target: { value } }) =>
											setApiKey(value)
										}
										value={apiKey || ''}
									/>
								</div>
							</section>
						) : null}
						<section>
							<label>{__('List ID', 'blocksy-companion')}</label>

							<ListPicker
								listId={listId}
								onChange={(id) => setListId(id)}
								provider={provider}
								apiUrl={apiUrl}
								apiKey={apiKey}
								onListsLoading={(listsLength) =>
									setHasList(!!listsLength)
								}
							/>
						</section>
					</Fragment>
				)}
			</div>

			{provider === 'mailchimp' && (
				<span
					className="ct-option-description"
					dangerouslySetInnerHTML={{
						__html: sprintf(
							__(
								'More information on how to generate an API key for Mailchimp can be found %shere%s.',
								'blocksy-companion'
							),

							'<a target="_blank" href="https://mailchimp.com/help/about-api-keys/">',
							'</a>'
						),
					}}
				/>
			)}

			{ctDashboardLocalizations.plugin_data.is_pro &&
				provider.indexOf('mailerlite') > -1 && (
					<span
						className="ct-option-description"
						dangerouslySetInnerHTML={{
							__html: sprintf(
								__(
									'More information on how to generate an API key for Mailerlite can be found %shere%s. Please note that it is required at least one group to be created in your account for the integration to work. More info on how to create a group %shere%s.',
									'blocksy-companion'
								),

								'<a target="_blank" href="https://www.mailerlite.com/help/where-to-find-the-mailerlite-api-key-and-documentation">',
								'</a>',
								'<a target="_blank" href="https://www.mailerlite.com/help/how-to-create-and-use-groups">',
								'</a>'
							),
						}}
					/>
				)}

			{provider.indexOf('demo') > -1 && (
				<span
					className="ct-option-description"
					dangerouslySetInnerHTML={{
						__html: __(
							'This provider is used only for testing purposes. It doesnt register any real subscribers.',
							'blocksy-companion'
						),
					}}
				/>
			)}

			{ctDashboardLocalizations.plugin_data.is_pro &&
				provider === 'klaviyo' && (
					<span
						className="ct-option-description"
						dangerouslySetInnerHTML={{
							__html: sprintf(
								__(
									'More information on how to generate an API key for Klaviyo can be found %shere%s.',
									'blocksy-companion'
								),

								'<a target="_blank" href="https://developers.klaviyo.com/en/reference/api_overview">',
								'</a>'
							),
						}}
					/>
				)}

			{ctDashboardLocalizations.plugin_data.is_pro &&
				provider === 'brevo' && (
					<span
						className="ct-option-description"
						dangerouslySetInnerHTML={{
							__html: sprintf(
								__(
									'More information on how to generate an API key for Brevo can be found %shere%s.',
									'blocksy-companion'
								),

								'<a target="_blank" href="https://help.brevo.com/hc/en-us/articles/209467485-Create-and-manage-your-API-keys">',
								'</a>'
							),
						}}
					/>
				)}

			{ctDashboardLocalizations.plugin_data.is_pro &&
				provider.indexOf('convertkit') > -1 && (
					<span
						className="ct-option-description"
						dangerouslySetInnerHTML={{
							__html: sprintf(
								__(
									'More information on how to generate an API key for Kit (ConvertKit) can be found %shere%s.',
									'blocksy-companion'
								),

								'<a target="_blank" href="https://developers.kit.com/welcome#api-basics">',
								'</a>'
							),
						}}
					/>
				)}

			{ctDashboardLocalizations.plugin_data.is_pro &&
				provider === 'activecampaign' && (
					<span
						className="ct-option-description"
						dangerouslySetInnerHTML={{
							__html: sprintf(
								__(
									'More information on how to generate an API key for ActiveCampaign can be found %shere%s.',
									'blocksy-companion'
								),

								'<a target="_blank" href="https://developers.activecampaign.com/reference/overview">',
								'</a>'
							),
						}}
					/>
				)}

			{ctDashboardLocalizations.plugin_data.is_pro &&
				provider === 'campaignmonitor' && (
					<span
						className="ct-option-description"
						dangerouslySetInnerHTML={{
							__html: sprintf(
								__(
									'More information on how to generate an API key for Campaign Monitor can be found %shere%s.',
									'blocksy-companion'
								),

								'<a target="_blank" href="https://help.campaignmonitor.com/api-keys">',
								'</a>'
							),
						}}
					/>
				)}

			{ctDashboardLocalizations.plugin_data.is_pro &&
				provider === 'emailoctopus' && (
					<span
						className="ct-option-description"
						dangerouslySetInnerHTML={{
							__html: sprintf(
								__(
									'More information on how to generate an API key for EmailOctopus can be found %shere%s.',
									'blocksy-companion'
								),

								'<a target="_blank" href="https://emailoctopus.com/api-documentation/v2">',
								'</a>'
							),
						}}
					/>
				)}

			{ctDashboardLocalizations.plugin_data.is_pro &&
				provider === 'mailpoet' && (
					<span
						className="ct-option-description"
						dangerouslySetInnerHTML={{
							__html: sprintf(
								__(
									'More information on how to create a list in MailPoet can be found %shere%s.',
									'blocksy-companion'
								),

								'<a target="_blank" href="https://kb.mailpoet.com/article/282-create-a-list">',
								'</a>'
							),
						}}
					/>
				)}

			{ctDashboardLocalizations.plugin_data.is_pro &&
				provider === 'fluentcrm' && (
					<span
						className="ct-option-description"
						dangerouslySetInnerHTML={{
							__html: sprintf(
								__(
									'More information on how to create a list in fluentcrm can be found %shere%s.',
									'blocksy-companion'
								),

								'<a target="_blank" href="https://kb.fluentcrm.com/article/282-create-a-list">',
								'</a>'
							),
						}}
					/>
				)}

			<button
				className="ct-button-primary"
				disabled={
					(!apiKey &&
						!['mailpoet', 'fluentcrm'].includes(provider)) ||
					!listId ||
					!hasList ||
					isLoading ||
					(!apiUrl && provider === 'activecampaign')
				}
				onClick={() => attemptToSaveCredentials()}>
				{isLoading
					? __('Loading...', 'blocksy-companion')
					: __('Save Settings', 'blocksy-companion')}
			</button>

			{content}
		</div>
	)
}

export default EditCredentials
<svg width="65" height="64" viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44 16.375L34.125 26.25L39.875 32L49.75 22.125C50.25 21.625 50.4167 20.9167 50.25 20C50.0833 19 49.5833 18.125 48.75 17.375C48 16.5417 47.1667 16.0417 46.25 15.875C45.4167 15.7083 44.6667 15.875 44 16.375ZM45 1C44.0833 0.416667 38.5833 4.125 28.5 12.125C23.4167 16.125 18.4583 20.2083 13.625 24.375L10.625 22.625C8.375 21.375 6.45833 20.4167 4.875 19.75C2.625 18.75 1.29167 18.4583 0.875 18.875C0.208333 19.375 2.125 22.2083 6.625 27.375C8.875 29.9583 11.2083 32.4583 13.625 34.875L22.25 26.25C28.75 19.75 33.9583 14.375 37.875 10.125C43.2917 4.29167 45.6667 1.25 45 1ZM62.625 30.75C61.7917 29.9167 60.875 29.4167 59.875 29.25C58.9583 29.0833 58.25 29.25 57.75 29.75L47.875 39.625L53.625 45.5L63.5 35.25C64 34.9167 64.1667 34.2917 64 33.375C63.8333 32.375 63.375 31.5 62.625 30.75ZM25.125 27.5C24.125 28.5833 23.25 30.4583 22.5 33.125C21.9167 35.4583 21.625 37.625 21.625 39.625V51.875L17.75 55.625C16.8333 56.625 16.375 57.7917 16.375 59.125C16.375 60.375 16.8333 61.5 17.75 62.5C18.75 63.4167 19.875 63.875 21.125 63.875C22.375 63.875 23.5 63.375 24.5 62.375L28.375 58.5H40.5C42.5833 58.5 44.75 58.2083 47 57.625C49.5 56.9583 51.2917 56.0833 52.375 55L56.125 52.5L27.75 24L25.125 27.5Z" fill="#999999"/>
</svg>