import React from 'react';
import { __ } from '@wordpress/i18n';
import {
	PanelBody,
	ColorPalette,
	RangeControl,
	TabPanel,
} from '@wordpress/components';
import ButtonStyleSVGButton from './ButtonStyleSVGButton';

const ButtonStyle = ({ slideSettings, onSettingsChange }) => {
	const tabs = [
		{ name: 'pc', title: 'PC', className: 'tab-pc' },
		{ name: 'sp', title: 'SP', className: 'tab-sp' },
	];

	const navigationPositions = [
		{ label: 'Default', value: 'position01' },
		{ label: 'Slide Centered', value: 'position02' },
		{ label: 'Slide Outside', value: 'position03' },
		{ label: 'Slide Outside', value: 'position04' },
		{ label: 'Slide Outside', value: 'position05' },
		{ label: 'Slide Outside', value: 'position06' },
		{ label: 'Slide Outside', value: 'position07' },
		{ label: 'Slide Outside', value: 'position08' },
		{ label: 'Slide Outside', value: 'position09' },
		{ label: 'Slide Outside', value: 'position10' },
		{ label: 'Slide Outside', value: 'position11' },
		{ label: 'Slide Centered', value: 'position12' },
		{ label: 'Slide Outside', value: 'position13' },
		{ label: 'Slide Outside', value: 'position14' },
		{ label: 'Slide Outside', value: 'position15' },
		{ label: 'Slide Outside', value: 'position16' },
		{ label: 'Slide Outside', value: 'position17' },
		{ label: 'Slide Outside', value: 'position18' },
		{ label: 'Slide Outside', value: 'position19' },
		{ label: 'Slide Outside', value: 'position20' },
		{ label: 'Slide Outside', value: 'position21' },
	];

	const ButtonStyleControls = ({ deviceType }) => {
		const deviceSettings = slideSettings[deviceType] || {};

		return (
			<>
				<ButtonStyleSVGButton
					value={deviceSettings.navigationPosition || 'position01'}
					options={navigationPositions}
					onChange={(value) => {
						onSettingsChange(
							{ navigationPosition: value },
							deviceType
						);
					}}
				/>

				<RangeControl
					label={__('Navigation Size', 'team-members')}
					value={deviceSettings.navigationSize || 44}
					onChange={(value) =>
						onSettingsChange({ navigationSize: value }, deviceType)
					}
					min={20}
					max={160}
					step={1}
				/>

				<ColorPalette
					label={__('Button Background Color', 'team-members')}
					value={deviceSettings.navigationColor || '#000000'}
					onChange={(color) =>
						onSettingsChange({ navigationColor: color }, deviceType)
					}
				/>
			</>
		);
	};

	return (
		<PanelBody
			title={__('Navigation Settings', 'team-members')}
			initialOpen={false}
		>
			<TabPanel
				className="my-tab-panel"
				activeClass="active-tab"
				tabs={tabs}
			>
				{(tab) => <ButtonStyleControls deviceType={tab.name} />}
			</TabPanel>
		</PanelBody>
	);
};

export default ButtonStyle;
