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 Position({
  activeDevice,
  position, inset, overflowX, overflowY, zIndex,
  setAttributes,
}) {
  const updateDeviceAttribute = (attribute, value) => {
    setAttributes({
      [attribute]: {
        ...(attribute === 'inset' ? inset : (attribute === 'position' ? position :
          attribute === 'overflowX' ? overflowX : attribute === 'overflowY' ? overflowY : zIndex)),
        [activeDevice]: value,
      },
    });
  };

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

  const resetPosition = () => {
    setAttributes({
      position:  { ...position,  [activeDevice]: '' },
      inset:     { ...inset,     [activeDevice]: { top:'', right:'', bottom:'', left:'' } },
      overflowX: { ...overflowX, [activeDevice]: '' },
      overflowY: { ...overflowY, [activeDevice]: '' },
      zIndex:    { ...zIndex,    [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,
    activeDevice,
    options: positionOptions,
    inheritedLabel: __('Inherited', 'axcelersblocks'),
  });
  const overflowXOptions = getResponsiveSelectOptions({
    values: overflowX,
    activeDevice,
    options: overflowOptions,
    inheritedLabel: __('Inherited', 'axcelersblocks'),
  });
  const overflowYOptions = getResponsiveSelectOptions({
    values: overflowY,
    activeDevice,
    options: overflowOptions,
    inheritedLabel: __('Inherited', 'axcelersblocks'),
  });

  return (
    <>
      <SelectControl
        label={__('Position', 'axcelersblocks')}
        value={position[activeDevice] || ''}
        options={positionSelectOptions}
        onChange={(value) => updateDeviceAttribute('position', 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[activeDevice]?.top || ''}
            onChange={(v) => updateInset('top', v)}
            placeholder={getResponsivePlaceholder({
              values: inset,
              activeDevice,
              selector: (value) => value?.top || '',
              fallback: 'e.g., 10px, 5%, auto',
            })}
            preset="inset"
          />
          <UnitValueControl
            label={__('Right', 'axcelersblocks')}
            value={inset[activeDevice]?.right || ''}
            onChange={(v) => updateInset('right', v)}
            placeholder={getResponsivePlaceholder({
              values: inset,
              activeDevice,
              selector: (value) => value?.right || '',
              fallback: 'e.g., 10px, 5%, auto',
            })}
            preset="inset"
          />
          <UnitValueControl
            label={__('Bottom', 'axcelersblocks')}
            value={inset[activeDevice]?.bottom || ''}
            onChange={(v) => updateInset('bottom', v)}
            placeholder={getResponsivePlaceholder({
              values: inset,
              activeDevice,
              selector: (value) => value?.bottom || '',
              fallback: 'e.g., 10px, 5%, auto',
            })}
            preset="inset"
          />
          <UnitValueControl
            label={__('Left', 'axcelersblocks')}
            value={inset[activeDevice]?.left || ''}
            onChange={(v) => updateInset('left', v)}
            placeholder={getResponsivePlaceholder({
              values: inset,
              activeDevice,
              selector: (value) => value?.left || '',
              fallback: 'e.g., 10px, 5%, auto',
            })}
            preset="inset"
          />
        </div>
      </div>

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

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

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