/* eslint-disable jsx-a11y/label-has-associated-control -- inputs are nested inside their labels. */
/**
 * Builder card "When the stream is down" (in the Station section): loop a standby file, or just
 * show a message, while the live stream is unreachable (config.fallback; player side:
 * player/features/fallback.tsx).
 */
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { ToggleControl, RangeControl } from '@wordpress/components';
import Si from '../components/Si';
import {
	registerBuilderSection,
	type BuilderSectionProps,
} from '../../player/extensions';

function FallbackSection( { config, update }: BuilderSectionProps ) {
	const f: any = ( config as any ).fallback || {};
	const set = ( patch: Record< string, unknown > ) =>
		update( { fallback: { ...f, ...patch } } );
	const [ mode, setMode ] = useState< 'track' | 'message' >(
		f.enabled && ! f.url ? 'message' : 'track'
	);
	const pick = () => {
		const frame = ( window as any ).wp.media( {
			title: __( 'Choose a standby track', 'streamsera' ),
			multiple: false,
			library: { type: 'audio' },
			button: { text: __( 'Use this file', 'streamsera' ) },
		} );
		frame.on( 'select', () => {
			const att = frame.state().get( 'selection' ).first().toJSON();
			set( { id: att.id, url: att.url } );
		} );
		frame.open();
	};
	const chooseMode = ( m: 'track' | 'message' ) => {
		setMode( m );
		if ( m === 'message' && f.url ) {
			set( { id: 0, url: '' } );
		}
	};
	return (
		<section className="ss-bx-card">
			<div className="ss-bx-card__head">
				<span className="ss-bx-card__icon">
					<Si name="alert" size={ 15 } stroke={ 1.9 } />
				</span>
				<div className="ss-bx-card__text">
					<strong>
						{ __( 'When the stream is down', 'streamsera' ) }
					</strong>
					<span>
						{ __(
							'What listeners get if no station answers.',
							'streamsera'
						) }
					</span>
				</div>
				<div className="ss-bx-card__right">
					<ToggleControl
						checked={ !! f.enabled }
						onChange={ ( v ) => set( { enabled: v } ) }
						__nextHasNoMarginBottom
						label=""
					/>
				</div>
			</div>
			{ f.enabled ? (
				<div className="ss-bx-card__body">
					<div className="ss-bx-segctl" role="radiogroup">
						{ (
							[
								[
									'track',
									__( 'Loop a standby track', 'streamsera' ),
									'note',
								],
								[
									'message',
									__( 'Message only', 'streamsera' ),
									'msg',
								],
							] as [ 'track' | 'message', string, string ][]
						 ).map( ( [ v, label, icon ] ) => (
							<button
								key={ v }
								type="button"
								role="radio"
								aria-checked={ mode === v }
								className={ mode === v ? 'is-on' : '' }
								onClick={ () => chooseMode( v ) }
							>
								<Si name={ icon } size={ 14 } />
								{ label }
							</button>
						) ) }
					</div>
					{ mode === 'track' ? (
						<div className="ss-bx-file">
							<Si name="note" size={ 15 } />
							<span>
								{ f.url
									? f.url.split( '/' ).pop()
									: __( 'No file chosen yet', 'streamsera' ) }
							</span>
							{ f.url ? (
								<button
									type="button"
									className="ss-bx-link is-mute"
									onClick={ () => set( { id: 0, url: '' } ) }
								>
									{ __( 'Remove', 'streamsera' ) }
								</button>
							) : null }
							<button
								type="button"
								className="ss-bx-btn ss-bx-btn--sm"
								onClick={ pick }
							>
								{ f.url
									? __( 'Change', 'streamsera' )
									: __( 'Choose file', 'streamsera' ) }
							</button>
						</div>
					) : null }
					<label className="ss-bx-field">
						<span>{ __( 'Message', 'streamsera' ) }</span>
						<input
							type="text"
							value={ f.message || '' }
							onChange={ ( e ) =>
								set( { message: e.target.value } )
							}
							placeholder={
								mode === 'track'
									? __(
											'We’ll be right back — enjoy some music meanwhile',
											'streamsera'
									  )
									: __(
											'We’re off air right now. Back soon!',
											'streamsera'
									  )
							}
						/>
					</label>
					<div className="ss-bx-field">
						<span>
							{ __(
								'Check the live stream again every',
								'streamsera'
							) }
						</span>
						<RangeControl
							value={ Number( f.retryAfter || 30 ) }
							min={ 10 }
							max={ 600 }
							step={ 10 }
							onChange={ ( v ) => set( { retryAfter: v } ) }
							__nextHasNoMarginBottom
							label={ __( 'Seconds', 'streamsera' ) }
							hideLabelFromVision
							help={ __( 'seconds', 'streamsera' ) }
						/>
					</div>
				</div>
			) : null }
		</section>
	);
}

registerBuilderSection( {
	id: 'fallback',
	attachTo: 'station',
	group: 'source',
	label: __( 'When the stream is down', 'streamsera' ),
	icon: 'warn',
	order: 70,
	Component: FallbackSection,
} );