import {
  TypographyControl, BackgroundControl, BorderControl, SpacingControls, EffectControl,
} from '../../../components/style-controls';
import { OutlineControls } from '../../../components/style-controls/Link/LinkStyleControls';

/**
 * Button :focus / :active controls — identical set to the heading/bodycopy
 * "Linked Focus / Linked Active" tabs: Typography, Background, Border, Outline,
 * Spacing, Effect.
 *
 * The shared controls only understand the `main` tab (base attribute names), so
 * we remap: each base key is fed from its __focus / __active variant, the
 * controls render in normal "main" mode, and writes route back to the suffixed
 * keys. The Outline control reads/writes `outline` + `outlineOffset` (→ outline__focus etc.).
 *
 * @param {object}   props.attributes
 * @param {Function} props.setAttributes
 * @param {'focus'|'active'} props.state
 */

// Same keys LinkStyleControls maps for the link focus/active tabs.
const BASE_KEYS = [
  'textColor', 'fontSize', 'fontWeight', 'fontStyle', 'textAlign', 'textTransform',
  'textDecoration', 'lineHeight', 'letterSpacing', 'fontFamily',
  'backgroundColor', 'backgroundLayers',
  'border', 'borderRadius',
  'outline', 'outlineOffset',
  'padding', 'margin',
  'effect',
];

export function ButtonStateControls({ attributes, setAttributes, state }) {
  const suffix = state === 'active' ? '__active' : '__focus';

  const mapped = {};
  BASE_KEYS.forEach((key) => {
    mapped[key] = attributes[`${key}${suffix}`];
  });

  const setMapped = (next) => {
    const out = {};
    Object.entries(next).forEach(([key, value]) => {
      out[`${key}${suffix}`] = value;
    });
    setAttributes(out);
  };

  const common = { attributes: mapped, setAttributes: setMapped, activeStyleTab: 'main' };

  return (
    <>
      <TypographyControl {...common} />
      <BackgroundControl {...common} />
      <BorderControl     {...common} />
      <OutlineControls   attributes={mapped} setAttributes={setMapped} />
      <SpacingControls   {...common} />
      <EffectControl     {...common} />
    </>
  );
}
