/**
 * Container Block Border Panel
 *
 */

import { __ } from '@wordpress/i18n';
import { PanelBody, RangeControl, BaseControl, Button, ButtonGroup, ColorPalette } from '@wordpress/components';
import { BorderNoneIcon, BorderSolidIcon, BorderDashedIcon, BorderDottedIcon, NormalStateIcon, HoverStateIcon } from '../../../components/constants/Icons';
import DecimalNumberInput from '../../../components/DecimalNumberInput';
import defaultColors from '../../../components/constants/DefaultColorsPalette';
import ResponsiveSyncControl from '../../../responsive-controls/ResponsiveSyncControl';
import { usePanelBodyClass } from '../../../components/PanelIndicator';
import ResetButton from '../../../components/ResetButton';

export default function BorderPanel( { attributes, setAttributes, isHovered, handleHoverClick } ) {
	const {
		borderStyle, borderColor, borderOpacity,
		hoverBorderColor, hoverBorderOpacity,
	} = attributes;

	// Use the custom hook to handle the panel class update
	usePanelBodyClass( attributes, [
		'borderStyle', 'borderColor', 'borderOpacity',
		'borderTopWidthDesktop', 'borderRightWidthDesktop', 'borderBottomWidthDesktop', 'borderLeftWidthDesktop',
		'borderTopWidthTablet', 'borderRightWidthTablet', 'borderBottomWidthTablet', 'borderLeftWidthTablet',
		'borderTopWidthMobile', 'borderRightWidthMobile', 'borderBottomWidthMobile', 'borderLeftWidthMobile',
		'hoverBorderTopWidthDesktop', 'hoverBorderRightWidthDesktop', 'hoverBorderBottomWidthDesktop', 'hoverBorderLeftWidthDesktop',
		'hoverBorderTopWidthTablet', 'hoverBorderRightWidthTablet', 'hoverBorderBottomWidthTablet', 'hoverBorderLeftWidthTablet',
		'hoverBorderTopWidthMobile', 'hoverBorderRightWidthMobile', 'hoverBorderBottomWidthMobile', 'hoverBorderLeftWidthMobile',
		'hoverBorderColor', 'hoverBorderOpacity'
	], 'desktop', __( 'Border', 'smart-social-media-buttons' ) );

	const resetBorderStyle = () => setAttributes( {
		borderStyle: 'none', borderColor: '#000000', borderOpacity: 1,

		borderTopWidthDesktop: 1, borderRightWidthDesktop: 1, borderBottomWidthDesktop: 1, borderLeftWidthDesktop: 1,
		borderTopWidthTablet: 1, borderRightWidthTablet: 1, borderBottomWidthTablet: 1, borderLeftWidthTablet: 1,
		borderTopWidthMobile: 1, borderRightWidthMobile: 1, borderBottomWidthMobile: 1, borderLeftWidthMobile: 1,

		hoverBorderTopWidthDesktop: 1, hoverBorderRightWidthDesktop: 1, hoverBorderBottomWidthDesktop: 1, hoverBorderLeftWidthDesktop: 1,
		hoverBorderTopWidthTablet: 1, hoverBorderRightWidthTablet: 1, hoverBorderBottomWidthTablet: 1, hoverBorderLeftWidthTablet: 1,
		hoverBorderTopWidthMobile: 1, hoverBorderRightWidthMobile: 1, hoverBorderBottomWidthMobile: 1, hoverBorderLeftWidthMobile: 1,

		hoverBorderColor: '#000000', hoverBorderOpacity: 1
	} );
	const resetBorderColor = () => setAttributes( { borderColor: '#000000' } );
	const resetBorderColorOpacity = () => setAttributes( { borderOpacity: 1 } );

	const resetHoverBorderColor = () => setAttributes( { hoverBorderColor: '#000000' } );
	const resetHoverBorderColorOpacity = () => setAttributes( { hoverBorderOpacity: 1 } );

	return (
		<>
			<PanelBody title = { __( 'Border', 'smart-social-media-buttons' ) } initialOpen = { false }>
				{/* Border style */}
				<BaseControl className="ssmb-border-style-control ssmb-border-setting" label = { __( 'Border Style', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
					<div className="ssmb-control-wrapper">
						<ButtonGroup className="ssmb-border-style" style = { { flexGrow: 1 } }>
							<Button
								className="border-none"
								icon = { <BorderNoneIcon /> }
								label = { __( 'Border None', 'smart-social-media-buttons' ) }
								isPressed = { borderStyle === 'none' }
								onClick = { () => setAttributes( { borderStyle: 'none' } ) }
							/>
							<Button
								className="border-solid"
								icon = { <BorderSolidIcon /> }
								label = { __( 'Border Solid', 'smart-social-media-buttons' ) }
								isPressed = { borderStyle === 'solid' }
								onClick = { () => setAttributes( { borderStyle: 'solid' } ) }
							/>
							<Button
								className="border-dashed"
								icon = { <BorderDashedIcon /> }
								label = { __( 'Border Dashed', 'smart-social-media-buttons' ) }
								isPressed = { borderStyle === 'dashed' }
								onClick = { () => setAttributes( { borderStyle: 'dashed' } ) }
							/>
							<Button
								className="border-dotted"
								icon = { <BorderDottedIcon />}
								label = { __( 'Border Dotted', 'smart-social-media-buttons' ) }
								isPressed = { borderStyle === 'dotted' }
								onClick = { () => setAttributes( { borderStyle: 'dotted' } ) }
							/>
						</ButtonGroup>
						<ResetButton
							currentAttributes = { attributes }
							attributeKeys = { [
								'borderStyle', 'borderColor', 'borderOpacity',
								'borderTopWidthDesktop', 'borderRightWidthDesktop', 'borderBottomWidthDesktop', 'borderLeftWidthDesktop',
								'borderTopWidthTablet', 'borderRightWidthTablet', 'borderBottomWidthTablet', 'borderLeftWidthTablet',
								'borderTopWidthMobile', 'borderRightWidthMobile', 'borderBottomWidthMobile', 'borderLeftWidthMobile',
								'hoverBorderTopWidthDesktop', 'hoverBorderRightWidthDesktop', 'hoverBorderBottomWidthDesktop', 'hoverBorderLeftWidthDesktop',
								'hoverBorderTopWidthTablet', 'hoverBorderRightWidthTablet', 'hoverBorderBottomWidthTablet', 'hoverBorderLeftWidthTablet',
								'hoverBorderTopWidthMobile', 'hoverBorderRightWidthMobile', 'hoverBorderBottomWidthMobile', 'hoverBorderLeftWidthMobile',
								'hoverBorderColor', 'hoverBorderOpacity'
							] }
							setAttributes = { setAttributes }
							onClick = { resetBorderStyle}
							label = { __( 'Reset Border Style', 'smart-social-media-buttons' ) }
							ResetComponent = { ResetButton }
							panelTitle = { __( 'Border', 'smart-social-media-buttons' ) }
							blockType = 'smart-social-media-buttons/main'
						/>
					</div>
				</BaseControl>

				{/* Borders width controls - only show if border style is not 'none' */}
				{ borderStyle !== 'none' && (
					<>
						<ButtonGroup className="ssmb-toggle-state-controls">
							<Button
								icon = { <NormalStateIcon />}
								variant = { !isHovered ? 'primary' : 'secondary' }
								onClick = { () => handleHoverClick( false ) }
							>
								{ __( 'Normal', 'smart-social-media-buttons' ) }
							</Button>
							<Button
								icon = { <HoverStateIcon />}
								variant = { isHovered ? 'primary' : 'secondary' }
								onClick = {() => handleHoverClick( true )}
							>
								{ __( 'Hover', 'smart-social-media-buttons' ) }
							</Button>
						</ButtonGroup>

						{isHovered ? (
							<>
								{/* HOVER MODE */}
								<ResponsiveSyncControl
									attributes = { attributes }
									setAttributes = { setAttributes }
									label = { __( 'Hover Border Width', 'smart-social-media-buttons' ) }
									attributeKeys = { {
										top: { desktop: 'hoverBorderTopWidthDesktop', tablet: 'hoverBorderTopWidthTablet', mobile: 'hoverBorderTopWidthMobile' },
										right: { desktop: 'hoverBorderRightWidthDesktop', tablet: 'hoverBorderRightWidthTablet', mobile: 'hoverBorderRightWidthMobile' },
										bottom: { desktop: 'hoverBorderBottomWidthDesktop', tablet: 'hoverBorderBottomWidthTablet', mobile: 'hoverBorderBottomWidthMobile' },
										left: { desktop: 'hoverBorderLeftWidthDesktop', tablet: 'hoverBorderLeftWidthTablet', mobile: 'hoverBorderLeftWidthMobile' },
									} }
									minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
									maxValues = { { desktop: 10, tablet: 10, mobile: 10 } }
									syncKey = "hoverBorderWidthSync"
									defaultValue = { 1 }
									ResetComponent = { ResetButton }
									panelTitle = { __( 'Border', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>

								{/* Border color */}
								<BaseControl className="ssmb-color-palette-control" label = { __( 'Hover Border Color', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
									<div className="ssmb-control-wrapper">
										<ColorPalette
											colors = { defaultColors }
											value = { hoverBorderColor }
											onChange = { ( newColor ) => setAttributes( { hoverBorderColor: newColor } ) }
											clearable
										/>
										<ResetButton
											currentAttributes = { attributes }
											attributeKeys = { ['hoverBorderColor'] }
											setAttributes = { setAttributes }
											onClick = { resetHoverBorderColor }
											label = { __( 'Reset Border Left', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Border', 'smart-social-media-buttons' ) }
											blockType = 'smart-social-media-buttons/main'
										/>
									</div>
								</BaseControl>

								<BaseControl className="ssmb-color-opacity-control" label = { __( 'Hover Border Opacity', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
									<div className="ssmb-control-wrapper">
										<RangeControl
											value = { hoverBorderOpacity }
											onChange = { ( newOpacity ) => setAttributes( { hoverBorderOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											__nextHasNoMarginBottom = { true }
										/>
										<DecimalNumberInput
											value = { hoverBorderOpacity }
											onChange = { ( newOpacity ) => setAttributes( { hoverBorderOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											className="ssmb-input-control"
											style = { { width: '64px' } }
										/>
										<ResetButton
											currentAttributes = { attributes }
											attributeKeys = { ['hoverBorderOpacity'] }
											setAttributes = { setAttributes }
											onClick = { resetHoverBorderColorOpacity }
											label = { __( 'Reset Border Opacity', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Border', 'smart-social-media-buttons' ) }
											blockType = 'smart-social-media-buttons/main'
										/>
									</div>
								</BaseControl>
							</>
						) : (
							<>
								{/* NORMAL MODE */}
								<ResponsiveSyncControl
									attributes = { attributes }
									setAttributes = { setAttributes }
									label = { __( 'Border Width', 'smart-social-media-buttons' ) }
									attributeKeys = { {
										top: { desktop: 'borderTopWidthDesktop', tablet: 'borderTopWidthTablet', mobile: 'borderTopWidthMobile' },
										right: { desktop: 'borderRightWidthDesktop', tablet: 'borderRightWidthTablet', mobile: 'borderRightWidthMobile' },
										bottom: { desktop: 'borderBottomWidthDesktop', tablet: 'borderBottomWidthTablet', mobile: 'borderBottomWidthMobile' },
										left: { desktop: 'borderLeftWidthDesktop', tablet: 'borderLeftWidthTablet', mobile: 'borderLeftWidthMobile' },
									} }
									minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
									maxValues = { { desktop: 10, tablet: 10, mobile: 10 } }
									syncKey = "borderWidthSync"
									defaultValue = { 1 }
									panelTitle = { __( 'Border', 'smart-social-media-buttons' ) }
									ResetComponent = { ResetButton }
								/>

								{/* Border color */}
								<BaseControl className="ssmb-color-palette-control" label = { __( 'Border Color', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
									<div className="ssmb-control-wrapper">
										<ColorPalette
											colors = { defaultColors }
											value = { borderColor }
											onChange = { ( newColor ) => setAttributes( { borderColor: newColor } ) }
											clearable
										/>
										<ResetButton
											currentAttributes = { attributes }
											attributeKeys = { ['borderColor'] }
											setAttributes = { setAttributes }
											onClick = { resetBorderColor }
											label = { __( 'Reset Border Left', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Border', 'smart-social-media-buttons' ) }
											blockType = 'smart-social-media-buttons/main'
										/>
									</div>
								</BaseControl>

								<BaseControl className="ssmb-color-opacity-control" label = { __( 'Border Opacity', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
									<div className="ssmb-control-wrapper">
										<RangeControl
											value = { borderOpacity }
											onChange = { ( newOpacity ) => setAttributes( { borderOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											__nextHasNoMarginBottom = { true }
										/>
										<DecimalNumberInput
											value = { borderOpacity }
											onChange = { ( newOpacity ) => setAttributes( { borderOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											className="ssmb-input-control"
											style = { { width: '64px' } }
										/>
										<ResetButton
											currentAttributes = { attributes }
											attributeKeys = { ['borderOpacity'] }
											setAttributes = { setAttributes }
											onClick = { resetBorderColorOpacity }
											label = { __( 'Reset Border Opacity', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Border', 'smart-social-media-buttons' ) }
											blockType = 'smart-social-media-buttons/main'
										/>
									</div>
								</BaseControl>
							</>
						)}
					</>
				)}
			</PanelBody>
		</>
	);
}
