//import 'whatwg-fetch';

const {__, setLocaleData} = wp.i18n;
const {registerBlockType} = wp.blocks;
const {Fragment} = wp.element;
const {PanelBody, Autocomplete} = wp.components;
const {InspectorControls, AlignmentToolbar} = wp.editor;

import DownloadButton from './components/DownloadButton';
import DownloadInput from './components/DownloadInput';
import VersionInput from './components/VersionInput';
import TemplateInput from './components/TemplateInput';

import React from 'react';
import Select from 'react-select';

//setLocaleData( window.gutenberg_dlm_blocks.localeData, 'download-monitor' );

registerBlockType( 'download-monitor/download-button', {
	title: __( 'Download Button', 'download-monitor' ),
	icon: 'download',
	keywords: [__( 'download', 'download-monitor' ), 'download monitor', __( 'file', 'download-monitor' )],
	category: 'common',
	attributes: {
		download_id: {
			type: 'number',
			default: 0
		},
		version_id: {
			type: 'number',
			default: 0
		},
		template: {
			type: 'string',
			default: 'settings'
		},
		custom_template: {
			type: 'string',
			default: ''
		},
		autop: {
			type: 'number',
			default: 0
		},
	}
	,
	edit: ( props ) => {
		const {attributes: { download_id, version_id, template, custom_template, autop}, setAttributes, className} = props;

		const valueFromId = (opts, id) => opts.find(o => o.value === id);
		let autoPOptions = [{ value: 0, label: 'No'},{ value: 1, label: 'Yes'}];

		return (
			<Fragment>
				<InspectorControls>
					<PanelBody title={__( 'Download Information', 'download-monitor' )}>
						<div className="components-base-control">
							<span className="components-base-control__label">{__( 'Download', 'download-monitor' )}</span>
							<DownloadInput onChange={(v)=> setAttributes( {download_id: v} )} selectedDownloadId={download_id} />
						</div>

						<div className="components-base-control">
							<span className="components-base-control__label">{__( 'Version', 'download-monitor' )}</span>
							<VersionInput onChange={(v)=> setAttributes( {version_id: v} )} selectedVersionId={version_id} downloadId={download_id} />
						</div>
					</PanelBody>

					<PanelBody title={__( 'Template', 'download-monitor' )}>
						<div className="components-base-control dlmGbEditorTemplateWrapper">
							<span className="components-base-control__label">{__( 'Template', 'download-monitor' )}</span>
							<TemplateInput onChange={( v ) => setAttributes( {template: v} )} selectedTemplate={template} templatesStr={dlmBlocks.templates} />
						</div>
						{ template === "custom" &&
						<div className="components-base-control">
							<span className="components-base-control__label">{__( 'Custom Template', 'download-monitor' )}</span>
							<input className="components-text-control__input" onChange={( e ) => setAttributes( {custom_template: e.target.value} ) } value={custom_template} />
						</div>
						}
						<div className="components-base-control dlmGbEditorTemplateWrapper">
							<span className="components-base-control__label">{__( 'Wrap in paragraph tag (<p>)?', 'download-monitor' )}</span>
							<Select
								value={valueFromId( autoPOptions, autop )}
								onChange={(selectedOption) => { setAttributes({autop: selectedOption.value}) }}
								options={autoPOptions}
								isSearchable="false"
							 />
						</div>
					</PanelBody>
				</InspectorControls>
				<DownloadButton download_id={download_id} version_id={version_id} template={template} custom_template={custom_template} />
			</Fragment>
		);
	},
	save: ( props ) => {
		return null;
	},
} );