import { useState } from 'react';
import { __, sprintf } from '@wordpress/i18n';
import { useBoundStore } from '../../store/store';
import type {
	PrepareImportFileResponse,
	GetImportFileResponse,
} from '../../typings/types';

const { gp_conditional_pricing_form_settings_strings: strings } = window;

interface CSVImportFormProps {}

export function CSVImportForm(props: CSVImportFormProps) {
	const [file, setFile] = useState<File | null>(null);
	const [prepareImportButtonDisabled, setPrepareImportButtonDisabled] =
		useState(true);
	const {
		setFilePath,
		setDisambiguation,
		setFileContents,
		setActiveView,
		addBanner,
	} = useBoundStore();

	const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
		const fileObj = event.target.files ? event.target.files[0] : null;
		setFile(fileObj);
		setPrepareImportButtonDisabled(!Boolean(fileObj));
	};

	const handlePricingFileSubmit = async (
		event: React.MouseEvent<HTMLButtonElement>
	) => {
		event.preventDefault();

		if (!file) {
			return;
		}

		const errorMessage = __(
			'Failed to prepare import file.',
			'gp-conditional-pricing'
		);

		try {
			const formData = new FormData();
			formData.append('file', file);
			formData.append('action', 'gwcp_get_import_disambiguation');
			formData.append('_ajax_nonce', strings.nonce);
			formData.append('form_id', strings.form_id);

			const fileUploadResp: PrepareImportFileResponse = await jQuery.ajax(
				{
					url: strings.ajax_url,
					type: 'POST',
					data: formData,
					processData: false,
					contentType: false,
				}
			);

			if (!fileUploadResp.success) {
				throw new Error(errorMessage);
			}

			const fileContentsResp: GetImportFileResponse = await jQuery.get(
				strings.ajax_url,
				{
					action: 'gwcp_get_import_file_contents',
					_ajax_nonce: strings.nonce,
					// TODO: should there be a gaurd in place so that you can't view files from other users?
					file_path: fileUploadResp.data.file_path,
				}
			);

			if (!fileContentsResp.success) {
				throw new Error(errorMessage);
			}

			setDisambiguation(fileUploadResp.data.disambiguation);
			setFilePath(fileUploadResp.data.file_path);
			setFileContents(fileContentsResp.data.file_contents);
			setActiveView('importer.field-mappings-form');
		} catch (err) {
			addBanner(errorMessage, 'error');

			// eslint-disable-next-line no-console
			console.error(err);
		}
	};

	return (
		<div>
			<form
				id="gpcp-importer"
				name="gpcp-importer"
				action=""
				method="post"
				encType="multipart/form-data"
				className="gform-settings-panel gform-settings-panel--with-title gform-settings-panel--full"
			>
				<legend className="gform-settings-panel__title gform-settings-panel__title--header">
					{__(
						'Conditional Pricing Importer',
						'gp-conditional-pricing'
					)}
				</legend>

				<div className="gform-settings-panel__content">
					<div className="gwcp-choose-import-file-message-grey-background">
						<p
							className="instructions"
							dangerouslySetInnerHTML={{
								__html: sprintf(
									/* translators: %s: the url of a sample csv file */
									__(
										'Select a CSV file to import. Use <a href="%s">this file</a> as starting point for configuring your own import files.',
										'gp-conditional-pricing'
									),
									strings.sample_csv_url
								),
							}}
						/>
					</div>
					<div>
						<label
							className="gform-settings-label gwcp-import-file-input-label"
							htmlFor="gpcp-import-file"
						>
							{__('Import File', 'gp-conditional-pricing')}
							<span className="required">
								{__('(Required)', 'gp-conditional-pricing')}
							</span>
						</label>
						<input
							type="file"
							id="gpcp-import-file-input"
							name="gpcp-import-file"
							accept=".csv"
							onChange={handleFileChange}
						/>
					</div>
				</div>
			</form>
			<div className="gwcp-import-file-form-buttons">
				<button
					type="submit"
					id="gwcp-pricing-level-prepare-import-confirm"
					className="primary button large"
					disabled={prepareImportButtonDisabled}
					onClick={handlePricingFileSubmit}
				>
					{__('Prepare Import', 'gp-conditional-pricing')}&nbsp;→
				</button>

				<button
					type="button"
					id="gwcp-pricing-level-prepare-import-cancel"
					className="submitdelete deletion"
					onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
						setActiveView('pricing-rules')
					}
				>
					{__('Cancel', 'gp-conditional-pricing')}
				</button>
			</div>
		</div>
	);
}