import { __ } from '@wordpress/i18n';
import {
	Dropdown,
	ColorPalette,
	GradientPicker,
	TabPanel,
	Button,
} from '@wordpress/components';

const PALETTE = [
	{ name: 'Indigo', color: '#3858e9' },
	{ name: 'Violet', color: '#8b5cf6' },
	{ name: 'Sky', color: '#0ea5e9' },
	{ name: 'Emerald', color: '#10b981' },
	{ name: 'Amber', color: '#f59e0b' },
	{ name: 'Rose', color: '#f43f5e' },
	{ name: 'Slate', color: '#475569' },
	{ name: 'Ink', color: '#0f172a' },
	{ name: 'White', color: '#ffffff' },
];

const GRADIENTS = [
	{ name: 'Indigo', gradient: 'linear-gradient(135deg, #3858e9 0%, #8b5cf6 100%)' },
	{ name: 'Sunset', gradient: 'linear-gradient(135deg, #f59e0b 0%, #f43f5e 100%)' },
	{ name: 'Ocean', gradient: 'linear-gradient(135deg, #0ea5e9 0%, #10b981 100%)' },
	{ name: 'Night', gradient: 'linear-gradient(135deg, #0f172a 0%, #475569 100%)' },
];

const isGradient = ( v ) => typeof v === 'string' && v.includes( 'gradient' );

/**
 * WP-native colour control (solid palette + optional gradient) in a popover.
 *
 * `colors` overrides the swatch set (e.g. a host's own scheme presets) so the
 * same control can present meaningful, brand/scheme-linked swatches in any
 * screen. `enableAlpha` can be turned off where storage is solid hex only
 * (e.g. sanitize_hex_color-backed settings), so the picker never emits an
 * rgba/8-digit value that would be silently dropped on save.
 */
const ColorControl = ( {
	label,
	value,
	onChange,
	gradient = false,
	colors = PALETTE,
	enableAlpha = true,
} ) => (
	<div className="cb-colorctl">
		<span className="components-base-control__label">{ label }</span>
		<Dropdown
			className="cb-colorctl__dd"
			contentClassName="cb-colorctl__popover"
			popoverProps={ { placement: 'left-start' } }
			renderToggle={ ( { isOpen, onToggle } ) => (
				<button
					type="button"
					className="cb-colorctl__swatch"
					onClick={ onToggle }
					aria-expanded={ isOpen }
				>
					<span className="cb-colorctl__chip" style={ { background: value || 'transparent' } } />
					<em>{ value ? ( isGradient( value ) ? __( 'Gradient', 'cliq-store-locator' ) : value ) : __( 'None', 'cliq-store-locator' ) }</em>
				</button>
			) }
			renderContent={ () => (
				<div className="cb-colorctl__body">
					{ gradient ? (
						<TabPanel
							tabs={ [
								{ name: 'solid', title: __( 'Solid', 'cliq-store-locator' ) },
								{ name: 'gradient', title: __( 'Gradient', 'cliq-store-locator' ) },
							] }
						>
							{ ( tab ) =>
								tab.name === 'solid' ? (
									<ColorPalette enableAlpha={ enableAlpha } colors={ colors } value={ isGradient( value ) ? undefined : value } onChange={ ( c ) => onChange( c ) } />
								) : (
									<GradientPicker gradients={ GRADIENTS } value={ isGradient( value ) ? value : undefined } onChange={ ( g ) => onChange( g ) } />
								)
							}
						</TabPanel>
					) : (
						<ColorPalette enableAlpha={ enableAlpha } colors={ colors } value={ value } onChange={ ( c ) => onChange( c ) } />
					) }
					<Button variant="tertiary" isDestructive className="cb-colorctl__clear" onClick={ () => onChange( undefined ) }>
						{ __( 'Clear', 'cliq-store-locator' ) }
					</Button>
				</div>
			) }
		/>
	</div>
);

export default ColorControl;
