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

const dimensions = {
  width: { value: '', unit: 'arbitrary' },
  minwidth: { value: '', unit: 'arbitrary' },
  maxwidth: { value: '', unit: 'arbitrary' },
  height: { value: '', unit: 'arbitrary' },
  minheight: { value: '', unit: 'arbitrary' },
  maxheight: { value: '', unit: 'arbitrary' },
};

export const optionsToDimensions = (options: any) => {
  options.forEach((option: any) => {
    const { foundUnit, foundValue } = getValueUnit(option.value);
    dimensions[option.id] = {
      value: foundValue,
      unit: foundUnit,
    };
  });

  return dimensions;
};

export const dimensionsToOptions = (values: any) => {
  const options = Object.keys(values).map((key) => ({
    id: key,
    value: formatUnit(values[key].value, values[key].unit, 'px'),
  }));

  return options;
};

export default {
  optionsToDimensions,
  dimensionsToOptions,
};