import { __ } from '@wordpress/i18n';
import { PanelBody, TextControl, Button, ButtonGroup } from '@wordpress/components';
import { useState, useEffect } from '@wordpress/element';
import { getResponsivePlaceholder } from '../../controls/responsiveValueUtils';
import ResponsiveInheritedNotice from '../../controls/ResponsiveInheritedNotice';
import UnitValueControl from '../../controls/UnitValueControl';

export default function FlexLayoutHover({ activeDevice, flexDirection__hover, flexWrap__hover, columnGap__hover, rowGap__hover, flexGrow__hover, flexShrink__hover, flexBasis__hover, order__hover, updateDeviceAttribute }) {
  // State to track the selected button for Flex Direction (single selection)
  const [selectedFlexDirection, setSelectedFlexDirection] = useState(
    flexDirection__hover[activeDevice] || ''
  );

  // State to track the selected button for Flex Wrap (single selection)
  const [selectedFlexWrap, setSelectedFlexWrap] = useState(
    flexWrap__hover[activeDevice] || ''
  );

  // Sync local state with props when flexDirection or flexWrap changes
  useEffect(() => {
    setSelectedFlexDirection(flexDirection__hover[activeDevice] || '');
    setSelectedFlexWrap(flexWrap__hover[activeDevice] || '');
  }, [flexDirection__hover, flexWrap__hover, activeDevice]);

  // Flex Direction options
  const flexDirectionOptions = [
    { value: 'row', label: __('Row', 'axcelersblocks') },
    { value: 'column', label: __('Column', 'axcelersblocks') },
    { value: 'row-reverse', label: __('Row Reverse', 'axcelersblocks') },
    { value: 'column-reverse', label: __('Column Reverse', 'axcelersblocks') },
  ];

  // Flex Wrap options
  const flexWrapOptions = [
    { value: 'nowrap', label: __('No Wrap', 'axcelersblocks') },
    { value: 'wrap', label: __('Wrap', 'axcelersblocks') },
    { value: 'wrap-reverse', label: __('Wrap Reverse', 'axcelersblocks') },
  ];

  // Toggle function for Flex Direction (single selection)
  const toggleFlexDirection = (value) => {
    const newValue = selectedFlexDirection === value ? '' : value;
    setSelectedFlexDirection(newValue);
    updateDeviceAttribute('flexDirection__hover', newValue);
  };

  // Toggle function for Flex Wrap (single selection)
  const toggleFlexWrap = (value) => {
    const newValue = selectedFlexWrap === value ? '' : value;
    setSelectedFlexWrap(newValue);
    updateDeviceAttribute('flexWrap__hover', newValue);
  };

  return (
    <PanelBody
      className="flex-layout-controls"
      title={__('Flex Layout (Hover)', 'axcelersblocks')}
      initialOpen={false}
    >
      {/* Flex Direction */}
      <div className="flex-direction-control">
        <label className="components-base-control__label">{__('Flex Direction', 'axcelersblocks')}</label>
        <ButtonGroup className="flex-direction-options">
          {flexDirectionOptions.map((option) => (
            <Button
              key={option.value}
              isPressed={selectedFlexDirection === option.value}
              onClick={() => toggleFlexDirection(option.value)}
              aria-label={option.label}
              variant={selectedFlexDirection === option.value ? 'primary' : 'secondary'}
            >
              {option.label}
            </Button>
          ))}
        </ButtonGroup>
				<ResponsiveInheritedNotice
					values={ flexDirection__hover }
					activeDevice={ activeDevice }
					options={ flexDirectionOptions }
				/>
      </div>

      {/* Flex Wrap */}
      <div className="flex-wrap-control">
        <label className="components-base-control__label">{__('Flex Wrap', 'axcelersblocks')}</label>
        <ButtonGroup className="flex-wrap-options">
          {flexWrapOptions.map((option) => (
            <Button
              key={option.value}
              isPressed={selectedFlexWrap === option.value}
              onClick={() => toggleFlexWrap(option.value)}
              aria-label={option.label}
              variant={selectedFlexWrap === option.value ? 'primary' : 'secondary'}
            >
              {option.label}
            </Button>
          ))}
        </ButtonGroup>
				<ResponsiveInheritedNotice
					values={ flexWrap__hover }
					activeDevice={ activeDevice }
					options={ flexWrapOptions }
				/>
      </div>

      {/* Column Gap and Row Gap */}
      <div className="gap-controls">
        {/* Column Gap */}
        <UnitValueControl
          label={__('Column Gap', 'axcelersblocks')}
          value={columnGap__hover[activeDevice] || ''}
          onChange={(value) => updateDeviceAttribute('columnGap__hover', value)}
          placeholder={getResponsivePlaceholder({ values: columnGap__hover, activeDevice, fallback: 'e.g., 0.5em' })}
          preset="gap"
        />

        {/* Row Gap */}
        <UnitValueControl
          label={__('Row Gap', 'axcelersblocks')}
          value={rowGap__hover[activeDevice] || ''}
          onChange={(value) => updateDeviceAttribute('rowGap__hover', value)}
          placeholder={getResponsivePlaceholder({ values: rowGap__hover, activeDevice, fallback: 'e.g., 0.5em' })}
          preset="gap"
        />
      </div>

      <div className="grow-shrink-controls">
        {/* Flex Grow */}
        <TextControl
          label={__('Flex Grow', 'axcelersblocks')}
          value={flexGrow__hover[activeDevice] || ''}
          onChange={(value) => updateDeviceAttribute('flexGrow__hover', value)}
          placeholder={getResponsivePlaceholder({ values: flexGrow__hover, activeDevice, fallback: 'e.g., 1' })}
        />

        {/* Flex Shrink */}
        <TextControl
          label={__('Flex Shrink', 'axcelersblocks')}
          value={flexShrink__hover[activeDevice] || ''}
          onChange={(value) => updateDeviceAttribute('flexShrink__hover', value)}
          placeholder={getResponsivePlaceholder({ values: flexShrink__hover, activeDevice, fallback: 'e.g., 1' })}
        />
      </div>

      {/* Flex Basis */}
      <UnitValueControl
        label={__('Flex Basis', 'axcelersblocks')}
        value={flexBasis__hover[activeDevice] || ''}
        onChange={(value) => updateDeviceAttribute('flexBasis__hover', value)}
        placeholder={getResponsivePlaceholder({ values: flexBasis__hover, activeDevice, fallback: 'e.g., auto, 100px' })}
        preset="flexBasis"
      />

      {/* Order */}
      <TextControl
        label={__('Order', 'axcelersblocks')}
        value={order__hover[activeDevice] || ''}
        onChange={(value) => updateDeviceAttribute('order__hover', value)}
        placeholder={getResponsivePlaceholder({ values: order__hover, activeDevice, fallback: 'e.g., 0, 1, -1' })}
      />
    </PanelBody>
  );
}
