/**
 * Hotspot editor modal.
 */
import { __, sprintf } from '@wordpress/i18n';
import {
	Modal,
	Segmented,
	Input,
	Select,
	Slider,
	Button,
	Form,
	Typography,
} from 'antd';

import { pickImage } from '../../api';

const TYPE_OPTIONS = [
	{ value: 'info', label: __( 'Info', 'vistour-virtual-tour-builder' ) },
	{
		value: 'navigation',
		label: __( 'Navigate', 'vistour-virtual-tour-builder' ),
	},
	{ value: 'link', label: __( 'Link', 'vistour-virtual-tour-builder' ) },
	{
		value: 'media',
		label: __( 'Media', 'vistour-virtual-tour-builder' ),
	},
];

const HotspotModal = ( {
	hotspot,
	scenes,
	sceneIndex,
	onChange,
	onRemove,
	onClose,
} ) => {
	if ( ! hotspot ) {
		return null;
	}

	const set = ( changes ) => onChange( { ...hotspot, ...changes } );

	return (
		<Modal
			open
			title={ __( 'Edit hotspot', 'vistour-virtual-tour-builder' ) }
			onCancel={ onClose }
			footer={ [
				<Button key="remove" danger onClick={ onRemove }>
					{ __(
						'Remove hotspot',
						'vistour-virtual-tour-builder'
					) }
				</Button>,
				<Button key="done" type="primary" onClick={ onClose }>
					{ __( 'Done', 'vistour-virtual-tour-builder' ) }
				</Button>,
			] }
		>
			<Form layout="vertical">
				<Form.Item
					label={ __( 'Type', 'vistour-virtual-tour-builder' ) }
				>
					<Segmented
						block
						value={ hotspot.type }
						options={ TYPE_OPTIONS }
						onChange={ ( type ) => set( { type } ) }
					/>
				</Form.Item>

				<Form.Item
					label={ __( 'Title', 'vistour-virtual-tour-builder' ) }
				>
					<Input
						value={ hotspot.title }
						onChange={ ( event ) =>
							set( { title: event.target.value } )
						}
					/>
				</Form.Item>

				{ 'info' === hotspot.type && (
					<Form.Item
						label={ __(
							'Content',
							'vistour-virtual-tour-builder'
						) }
					>
						<Input.TextArea
							rows={ 3 }
							value={ hotspot.content }
							onChange={ ( event ) =>
								set( { content: event.target.value } )
							}
						/>
					</Form.Item>
				) }

				{ 'navigation' === hotspot.type && (
					<Form.Item
						label={ __(
							'Target scene',
							'vistour-virtual-tour-builder'
						) }
					>
						<Select
							value={ hotspot.target_scene }
							onChange={ ( targetScene ) =>
								set( { target_scene: targetScene } )
							}
							options={ scenes.map( ( scene, index ) => ( {
								value: index,
								disabled: index === sceneIndex,
								label:
									scene.title ||
									sprintf(
										/* translators: %d: scene number. */
										__(
											'Scene %d',
											'vistour-virtual-tour-builder'
										),
										index + 1
									),
							} ) ) }
						/>
					</Form.Item>
				) }

				{ 'link' === hotspot.type && (
					<Form.Item
						label={ __(
							'URL',
							'vistour-virtual-tour-builder'
						) }
					>
						<Input
							type="url"
							placeholder="https://"
							value={ hotspot.url }
							onChange={ ( event ) =>
								set( { url: event.target.value } )
							}
						/>
					</Form.Item>
				) }

				{ 'media' === hotspot.type && (
					<Form.Item
						label={ __(
							'Media',
							'vistour-virtual-tour-builder'
						) }
					>
						<Button
							onClick={ async () => {
								const attachment = await pickImage(
									__(
										'Select media',
										'vistour-virtual-tour-builder'
									)
								);
								set( {
									media_id: attachment.id,
									media_url: attachment.url,
								} );
							} }
						>
							{ hotspot.media_id
								? __(
										'Change media',
										'vistour-virtual-tour-builder'
								  )
								: __(
										'Select media',
										'vistour-virtual-tour-builder'
								  ) }
						</Button>
					</Form.Item>
				) }

				<Typography.Text type="secondary">
					{ __(
						'Position — click the preview to move this hotspot, or fine-tune below.',
						'vistour-virtual-tour-builder'
					) }
				</Typography.Text>
				<Form.Item
					label={ sprintf(
						/* translators: %s: yaw degrees. */
						__( 'Yaw %s°', 'vistour-virtual-tour-builder' ),
						hotspot.yaw
					) }
				>
					<Slider
						min={ -180 }
						max={ 180 }
						value={ hotspot.yaw }
						onChange={ ( yaw ) => set( { yaw } ) }
					/>
				</Form.Item>
				<Form.Item
					label={ sprintf(
						/* translators: %s: pitch degrees. */
						__( 'Pitch %s°', 'vistour-virtual-tour-builder' ),
						hotspot.pitch
					) }
				>
					<Slider
						min={ -90 }
						max={ 90 }
						value={ hotspot.pitch }
						onChange={ ( pitch ) => set( { pitch } ) }
					/>
				</Form.Item>
			</Form>
		</Modal>
	);
};

export default HotspotModal;
