import { getValueUnit, formatUnit } from '@components/DesignPanel/Helpers';

// Formatter for converting positions to options
export const getSpacingModifiers = (controlId: string) => {
  let spacingModifiers = {
    t: '',
    r: '',
    b: '',
    l: '',
    x: '',
    y: '',
    a: '',
  } as any;

  if (controlId === 'padding') {
    spacingModifiers = {
      t: 'pt',
      r: 'pr',
      b: 'pb',
      l: 'pl',
      x: 'px',
      y: 'py',
      a: 'pa',
    };
  } else if (controlId === 'margin') {
    spacingModifiers = {
      t: 'mt',
      r: 'mr',
      b: 'mb',
      l: 'ml',
      x: 'mx',
      y: 'my',
      a: 'ma',
    };
  } else if (controlId === 'transform') {
    spacingModifiers = {
      t: 'tt',
      r: 'tr',
      b: 'tb',
      l: 'tl',
      x: false,
      y: false,
      a: false,
    };
  }
  return spacingModifiers;
};

export const spaceValuesToOptions = (spaceValues: any, controlId: string) => {
  const spacingModifiers = getSpacingModifiers(controlId);

  const { top, right, bottom, left } = spaceValues;

  const options = [];

  // Check if all sides are equal and the 'a' modifier exists
  if (
    spacingModifiers.a &&
    top.value === right.value &&
    right.value === bottom.value &&
    bottom.value === left.value
  ) {
    options.push({
      id: spacingModifiers.a,
      value: formatUnit(top.value, top.unit, 'px'),
    });
    return options;
  }

  // Check if horizontal sides (left and right) are equal and the 'x' modifier exists
  if (spacingModifiers.x && left.value === right.value) {
    options.push({
      id: spacingModifiers.x,
      value: formatUnit(left.value, left.unit, 'px'),
    });
  } else {
    // Otherwise, use individual left and right modifiers
    options.push({
      id: spacingModifiers.l,
      value: formatUnit(left.value, left.unit, 'px'),
    });
    options.push({
      id: spacingModifiers.r,
      value: formatUnit(right.value, right.unit, 'px'),
    });
  }

  // Check if vertical sides (top and bottom) are equal and the 'y' modifier exists
  if (spacingModifiers.y && top.value === bottom.value) {
    options.push({
      id: spacingModifiers.y,
      value: formatUnit(top.value, top.unit, 'px'),
    });
  } else {
    // Otherwise, use individual top and bottom modifiers
    options.push({
      id: spacingModifiers.t,
      value: formatUnit(top.value, top.unit, 'px'),
    });
    options.push({
      id: spacingModifiers.b,
      value: formatUnit(bottom.value, bottom.unit, 'px'),
    });
  }

  return options;
};

export const optionsToSpaceValues = (options: any, controlId: string) => {
  // Get the spacing modifiers based on the controlId
  const spacingModifiers = getSpacingModifiers(controlId);

  // Initialize the spaceValues object with default values
  const spaceValues = {
    top: { value: '', unit: 'arbitrary' },
    right: { value: '', unit: 'arbitrary' },
    bottom: { value: '', unit: 'arbitrary' },
    left: { value: '', unit: 'arbitrary' },
  };

  options.forEach(({ id, value }: any) => {
    const { foundUnit, foundValue } = getValueUnit(value);

    const setValues = (positions: string[]) => {
      if (foundValue !== '') {
        positions.forEach((pos) => {
          spaceValues[pos as keyof typeof spaceValues].value = foundValue;
          spaceValues[pos as keyof typeof spaceValues].unit = foundUnit;
        });
      }
    };
    // Check the id against spacingModifiers and update the corresponding positions
    if (id === spacingModifiers.a) {
      setValues(['top', 'right', 'bottom', 'left']);
    } else if (id === spacingModifiers.x) {
      setValues(['left', 'right']);
    } else if (id === spacingModifiers.y) {
      setValues(['top', 'bottom']);
    } else if (id === spacingModifiers.t) {
      setValues(['top']);
    } else if (id === spacingModifiers.r) {
      setValues(['right']);
    } else if (id === spacingModifiers.b) {
      setValues(['bottom']);
    } else if (id === spacingModifiers.l) {
      setValues(['left']);
    }
  });
  return spaceValues;
};