import { cloneDeep } from 'lodash';

import { Dimension, type PageDSL6, type PageDSL7, type WidgetProps6, type WidgetProps7 } from '../../../types/index.js';

const SLIDEOUT_DEFAULT_COLUMNS = 80;

export const migrateToDimensions = (oldPage: PageDSL6): PageDSL7 => {
  return migrateWidget(oldPage) as PageDSL7;
};

const migrateWidget = (oldWidget: WidgetProps6): WidgetProps7 => {
  // Don't clone children for performance reasons
  const { children: oldChildren, ..._widget } = Object.freeze(oldWidget);
  const newWidget = cloneDeep(_widget) as unknown as WidgetProps7;

  // Fix existing bug where slideout widgets get created with position and size values that are the
  // same as the button widget that it gets created with. Previously these incorrect values in the DSL caused no issues
  // because they were ignored, but now require these values to be correct for section widgets to function
  if (newWidget.type === 'SLIDEOUT_WIDGET') {
    newWidget.topRow = 0;
    newWidget.bottomRow = 0;
    newWidget.leftColumn = 0;
    newWidget.rightColumn = 0;
    newWidget.snapColumns = SLIDEOUT_DEFAULT_COLUMNS;
  }

  if (newWidget.type === 'CANVAS_WIDGET') {
    newWidget.layout = 'FIXED_GRID';
  }

  if (newWidget.snapColumns !== undefined) {
    newWidget.gridColumns = newWidget.snapColumns as number;
  }
  delete newWidget.snapRows;
  delete newWidget.snapColumns;

  // Map leftColumn, rightColumn, topRow, bottomRow to left, top, width, height
  if (oldWidget.leftColumn !== undefined) {
    newWidget.left = Dimension.gridUnit(oldWidget.leftColumn);
  } else {
    newWidget.left = Dimension.gridUnit(0);
  }

  if (oldWidget.topRow !== undefined) {
    newWidget.top = Dimension.gridUnit(oldWidget.topRow);
  } else {
    newWidget.top = Dimension.gridUnit(0);
  }

  if (oldWidget.rightColumn !== undefined && oldWidget.leftColumn !== undefined) {
    newWidget.width = Dimension.gridUnit(oldWidget.rightColumn - oldWidget.leftColumn);
  } else {
    newWidget.width = Dimension.gridUnit(0);
  }

  if (oldWidget.bottomRow !== undefined && oldWidget.topRow !== undefined) {
    newWidget.height = Dimension.gridUnit(oldWidget.bottomRow - oldWidget.topRow);
  } else {
    newWidget.height = Dimension.gridUnit(0);
  }
  delete newWidget.leftColumn;
  delete newWidget.rightColumn;
  delete newWidget.topRow;
  delete newWidget.bottomRow;

  // Map minHeight to minHeight
  if (oldWidget.minHeight !== undefined) {
    newWidget.minHeight = Dimension.px(oldWidget.minHeight);
  }

  const isContainer = oldWidget.type === 'CANVAS_WIDGET';
  if (isContainer && !oldWidget.noContainerOffset && !oldWidget.noPad) {
    newWidget.padding = {
      left: Dimension.px(16),
      right: Dimension.px(16),
      top: Dimension.px(12),
      bottom: Dimension.px(12)
    };
  } else {
    delete newWidget.padding;
  }
  delete newWidget.noContainerOffset;
  delete newWidget.noPad;

  delete newWidget.widgetLastChange;

  // Map children
  if (oldChildren) {
    newWidget.children = oldChildren.map((child) => migrateWidget(child));
  }

  return newWidget;
};