import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { link, linkOff, rotateRight } from '@wordpress/icons';
import { getResponsivePlaceholder } from '../../controls/responsiveValueUtils';
import UnitValueControl from '../../controls/UnitValueControl';

export default function BorderRadius({ activeDevice, borderRadius, setAttributes }) {
  const deviceVal = borderRadius[activeDevice] || { value: '', corners: {}, isLinkActive: true };

  const updateDeviceAttribute = (value) => {
    setAttributes({
      borderRadius: {
        ...borderRadius,
        [activeDevice]: value,
      },
    });
  };

  const corners = ['top-left', 'top-right', 'bottom-right', 'bottom-left'];

  const reset = () => updateDeviceAttribute({ value: '', corners: {}, isLinkActive: true });
  const toggleLink = () => updateDeviceAttribute({ ...deviceVal, isLinkActive: !deviceVal.isLinkActive });
  const updateLinked = (value) => updateDeviceAttribute({ ...deviceVal, value });
  const updateCorner = (corner, value) =>
    updateDeviceAttribute({ ...deviceVal, corners: { ...(deviceVal.corners || {}), [corner]: value } });

  return (
    <div className="border-radius-control">
      <div className="border-radius-control-header">
        <h3>{__('Border Radius', 'axcelersblocks')}</h3>
        <div>
          <Button
            icon={deviceVal.isLinkActive ? link : linkOff}
            onClick={toggleLink}
            label={deviceVal.isLinkActive ? __('Unlink Corners', 'axcelersblocks') : __('Link Corners', 'axcelersblocks')}
          />
          <Button icon={rotateRight} onClick={reset} label={__('Reset', 'axcelersblocks')} showTooltip />
        </div>
      </div>

      {deviceVal.isLinkActive ? (
        <div className="border-radius-control-linked">
          <UnitValueControl
            label={__('All Corners', 'axcelersblocks')}
            value={deviceVal.value || ''}
            onChange={updateLinked}
            placeholder={getResponsivePlaceholder({
              values: borderRadius,
              activeDevice,
              selector: (value) => value?.value || '',
              fallback: 'e.g., 5px',
            })}
            preset="borderRadius"
          />
        </div>
      ) : (
        <div className="border-radius-control-unlinked">
          {corners.map((corner) => (
            <UnitValueControl
              key={corner}
              label={__(corner.split('-').map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(' '), 'axcelersblocks')}
              value={deviceVal.corners?.[corner] || ''}
              onChange={(value) => updateCorner(corner, value)}
              placeholder={getResponsivePlaceholder({
                values: borderRadius,
                activeDevice,
                selector: (value) => value?.corners?.[corner] || '',
                fallback: 'e.g., 5px',
              })}
              preset="borderRadius"
            />
          ))}
        </div>
      )}
    </div>
  );
}
