wp.blocks.registerBlockType(
	'spiro/box',
	{
		title: 'Spiro Box',
		icon: 'tablet',
		category: 'layout',

		attributes: {
			headline: {
				type: 'string',
			},
			color: {
				type: 'string',
			},
			boxurl: {
				type: 'string',
			},
			content: {
				type: 'string',
			}
		},

		edit: function(props) {
			return wp.element.createElement(
				'div',
				{
					className: 'box box-' + props.attributes.color
				},
				[
					// Headline
					wp.element.createElement(
						'h3',
						{
							style:
								{
									display: 'flex',
								},
						},
						[
							wp.element.createElement(
								'span',
								{},
								'Headline: '
							),
							wp.element.createElement(
								wp.editor.RichText,
								{
									key: 'editable',
									tagName: 'span',
									style: {
										display: 'inline-block',
										minWidth: '100px',
										border: '1px dashed gray'
									},
									onChange: function(data) {
										props.setAttributes({headline: data});
									},
									value: props.attributes.headline
								}
							),
						]
					),

					// Color
					wp.element.createElement(
						'div',
						{
							style:
								{
									display: 'flex',
								}
						},
						[
							wp.element.createElement(
								'span',
								{},
								'Color:'
							),
							// White
							wp.element.createElement(
								'label',
								{},
								[
									wp.element.createElement(
										'input',
										{
											style: {marginLeft: '2em'},
											type: 'radio',
											name: props.id + '_color',
											onChange: function(data) {
												props.setAttributes({color: 'white'});
											},
										}
									),
									wp.element.createElement('span', {}, 'White'),
								]
							),

							// Gold
							wp.element.createElement(
								'label',
								{},
								[
									wp.element.createElement(
										'input',
										{
											style: {marginLeft: '2em'},
											type: 'radio',
											name: props.id + '_color',
											onChange: function(data) {
												props.setAttributes({color: 'gold'});
											},
										}
									),
									wp.element.createElement('span', {}, 'Gold'),
								]
							),

							// Blue
							wp.element.createElement(
								'label',
								{},
								[
									wp.element.createElement(
										'input',
										{
											style: {marginLeft: '2em'},
											type: 'radio',
											name: props.id + '_color',
											onChange: function(data) {
												props.setAttributes({color: 'blue'});
											},
										}
									),
									wp.element.createElement('span', {}, 'Blue'),
								]
							),
						]
					),

					// URL
					wp.element.createElement(
						'label',
						{
							style: {
								display: 'flex',
							}
						},
						wp.element.createElement(
							'span',
							{},
							'URL:'
						),
						wp.element.createElement(
							wp.editor.RichText,
							{
								key: 'editable',
								tagName: 'p',
								style: {
									minWidth: '100px',
									border: '1px dashed gray'
								},
								onChange: function(data) {
									props.setAttributes({boxurl: data});
									window.console.log('new url: ', data);
									window.console.log('url: ', props.attributes.boxurl);
								},
								value: props.attributes.boxurl
							}
						),
					),

					// Text
					wp.element.createElement(
						'label',
						{
							style:
								{
									display: 'flex',
								}
						},
						[
							'Text:',
							wp.element.createElement(
								wp.editor.RichText,
								{
									key: 'editable',
									tagName: 'p',
									style: {
										minWidth: '100px',
										border: '1px dashed gray'
									},
									onChange: function(data) {
										props.setAttributes({content: data});
									},
									value: props.attributes.content
								}
							)
						]
					),
				]
			)
				;
		},

		save: function(props) {
			return wp.element.createElement(
				'div',
				{
					className: 'box box-' + props.attributes.color
				},
				wp.element.createElement(
					'a',
					{
						href: props.attributes.boxurl,
					},
					[
						wp.element.createElement(
							'h3',
							{},
							props.attributes.headline
						),
						wp.element.createElement(
							'p',
							{},
							props.attributes.content
						)
					]
				)
			)
		}
	}
);