import { __ } from '@wordpress/i18n';
import { TextControl, SelectControl, Button } from '@wordpress/components';
import { getResponsivePlaceholder, getResponsiveSelectOptions } from '../../controls/responsiveValueUtils';
import UnitValueControl from '../../controls/UnitValueControl';

export default function PositionHover({
  activeDevice,
  position__hover, inset__hover, overflowX__hover, overflowY__hover, zIndex__hover,
  setAttributes,
}) {
  const updateDeviceAttribute = (attribute, value) => {
    const map = attribute === 'inset__hover' ? inset__hover :
                attribute === 'position__hover' ? position__hover :
                attribute === 'overflowX__hover' ? overflowX__hover :
                attribute === 'overflowY__hover' ? overflowY__hover : zIndex__hover;

    setAttributes({
      [attribute]: {
        ...map,
        [activeDevice]: value,
      },
    });
  };

  const updateInset = (side, value) => {
    const next = { ...(inset__hover[activeDevice] || { top:'', right:'', bottom:'', left:'' }), [side]: value };
    updateDeviceAttribute('inset__hover', next);
  };

  const resetPositionHover = () => {
    setAttributes({
      position__hover:  { ...position__hover,  [activeDevice]: '' },
      inset__hover:     { ...inset__hover,     [activeDevice]: { top:'', right:'', bottom:'', left:'' } },
      overflowX__hover: { ...overflowX__hover, [activeDevice]: '' },
      overflowY__hover: { ...overflowY__hover, [activeDevice]: '' },
      zIndex__hover:    { ...zIndex__hover,    [activeDevice]: '' },
    });
  };

  const positionOptions = [
    { label: __('Default', 'axcelersblocks'), value: '' },
    { label: __('Static', 'axcelersblocks'), value: 'static' },
    { label: __('Relative', 'axcelersblocks'), value: 'relative' },
    { label: __('Absolute', 'axcelersblocks'), value: 'absolute' },
    { label: __('Fixed', 'axcelersblocks'), value: 'fixed' },
    { label: __('Sticky', 'axcelersblocks'), value: 'sticky' },
  ];

  const overflowOptions = [
    { label: __('Default', 'axcelersblocks'), value: '' },
    { label: __('Visible', 'axcelersblocks'), value: 'visible' },
    { label: __('Hidden', 'axcelersblocks'), value: 'hidden' },
    { label: __('Scroll', 'axcelersblocks'), value: 'scroll' },
    { label: __('Auto', 'axcelersblocks'), value: 'auto' },
    { label: __('Clip', 'axcelersblocks'), value: 'clip' },
  ];
  const positionSelectOptions = getResponsiveSelectOptions({
    values: position__hover,
    activeDevice,
    options: positionOptions,
    inheritedLabel: __('Inherited', 'axcelersblocks'),
  });
  const overflowXOptions = getResponsiveSelectOptions({
    values: overflowX__hover,
    activeDevice,
    options: overflowOptions,
    inheritedLabel: __('Inherited', 'axcelersblocks'),
  });
  const overflowYOptions = getResponsiveSelectOptions({
    values: overflowY__hover,
    activeDevice,
    options: overflowOptions,
    inheritedLabel: __('Inherited', 'axcelersblocks'),
  });

  return (
    <>
      <SelectControl
        label={__('Position (Hover)', 'axcelersblocks')}
        value={position__hover[activeDevice] || ''}
        options={positionSelectOptions}
        onChange={(value) => updateDeviceAttribute('position__hover', value)}
      />

      <div className="position-control__inset">
        <strong>{__('Inset', 'axcelersblocks')}</strong>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', columnGap:8, marginTop:8 }}>
          <UnitValueControl
            label={__('Top', 'axcelersblocks')}
            value={inset__hover[activeDevice]?.top || ''}
            onChange={(v) => updateInset('top', v)}
            placeholder={getResponsivePlaceholder({
              values: inset__hover,
              activeDevice,
              selector: (value) => value?.top || '',
              fallback: 'e.g., 10px, 5%, auto',
            })}
            preset="inset"
          />
          <UnitValueControl
            label={__('Right', 'axcelersblocks')}
            value={inset__hover[activeDevice]?.right || ''}
            onChange={(v) => updateInset('right', v)}
            placeholder={getResponsivePlaceholder({
              values: inset__hover,
              activeDevice,
              selector: (value) => value?.right || '',
              fallback: 'e.g., 10px, 5%, auto',
            })}
            preset="inset"
          />
          <UnitValueControl
            label={__('Bottom', 'axcelersblocks')}
            value={inset__hover[activeDevice]?.bottom || ''}
            onChange={(v) => updateInset('bottom', v)}
            placeholder={getResponsivePlaceholder({
              values: inset__hover,
              activeDevice,
              selector: (value) => value?.bottom || '',
              fallback: 'e.g., 10px, 5%, auto',
            })}
            preset="inset"
          />
          <UnitValueControl
            label={__('Left', 'axcelersblocks')}
            value={inset__hover[activeDevice]?.left || ''}
            onChange={(v) => updateInset('left', v)}
            placeholder={getResponsivePlaceholder({
              values: inset__hover,
              activeDevice,
              selector: (value) => value?.left || '',
              fallback: 'e.g., 10px, 5%, auto',
            })}
            preset="inset"
          />
        </div>
      </div>

      <SelectControl
        label={__('Overflow-X', 'axcelersblocks')}
        value={overflowX__hover[activeDevice] || ''}
        options={overflowXOptions}
        onChange={(value) => updateDeviceAttribute('overflowX__hover', value)}
      />
      <SelectControl
        label={__('Overflow-Y', 'axcelersblocks')}
        value={overflowY__hover[activeDevice] || ''}
        options={overflowYOptions}
        onChange={(value) => updateDeviceAttribute('overflowY__hover', value)}
      />

      <TextControl
        label={__('Z-Index', 'axcelersblocks')}
        value={zIndex__hover[activeDevice] || ''}
        onChange={(value) => updateDeviceAttribute('zIndex__hover', value)}
        placeholder={getResponsivePlaceholder({
          values: zIndex__hover,
          activeDevice,
          fallback: 'e.g., 10, -1',
        })}
      />

      <Button className="reset-btn" onClick={resetPositionHover}>
        {__('Reset', 'axcelersblocks')}
      </Button>
    </>
  );
}
