import { cloneDeep, get, omit } from 'lodash';
import { describe, it, expect } from 'vitest';

import type { PageDSL7, WidgetProps7 } from '../../types/index.js';
import canvases from '../../utils/pageFixtures/v7/canvases.js';
import gridsAndForms from '../../utils/pageFixtures/v7/grids_and_forms.js';
import images from '../../utils/pageFixtures/v7/images.js';
import initialAppV7DSL from '../../utils/pageFixtures/v7/initial_app.js';
import nestedContainers from '../../utils/pageFixtures/v7/nested_containers.js';
import { migrate7to8 } from './v7to8.js';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const getWidgetNameToProperty = (widget: WidgetProps7, widgetTypes: string[], propertyNames: string[], obj: Record<string, any>) => {
  if (widgetTypes.includes(widget.type)) {
    propertyNames.forEach((propertyName) => {
      obj[widget.widgetName] = {
        ...obj[widget.widgetName],
        [propertyName]: widget[propertyName]
      };
    });
  }
  if (widget.children) {
    widget.children.forEach((child) => getWidgetNameToProperty(child, widgetTypes, propertyNames, obj));
  }
};

const defaultPadding = {
  bottom: {
    mode: 'px',
    value: 12
  },
  left: {
    mode: 'px',
    value: 16
  },
  right: {
    mode: 'px',
    value: 16
  },
  top: {
    mode: 'px',
    value: 12
  }
};

describe('version 7 to version 8', () => {
  it(`returns a new object`, () => {
    const originalInput = cloneDeep(initialAppV7DSL);
    const migrated = migrate7to8(originalInput as PageDSL7);
    expect(migrated).not.toStrictEqual(originalInput);
  });

  it('should migrate an initial app DSL', () => {
    const migrated = migrate7to8(cloneDeep(initialAppV7DSL) as PageDSL7);
    // app will be the mosty same, apart from the root containers padding + the version
    const migratedVersion = get(migrated, 'version');
    const initialVersion = get(initialAppV7DSL, 'version');
    expect(migratedVersion).toEqual(8);
    expect(initialVersion).toEqual(7);
    const migratedPadding = get(migrated, 'children[0].children[0].padding');
    const initialPadding = get(initialAppV7DSL, 'children[0].children[0].padding');
    expect(migratedPadding).toBeUndefined();
    expect(initialPadding).toEqual(defaultPadding);
    const restOfMigratedDsl = omit(migrated, ['version', 'children[0].children[0].padding']);
    const restOfInitialDsl = omit(initialAppV7DSL, ['version', 'children[0].children[0].padding']);
    expect(restOfMigratedDsl).toEqual(restOfInitialDsl);
  });

  it('should migrate container widgets background color styles', () => {
    const initialBackgrounds = {};
    const migratedBackgrounds = {};
    getWidgetNameToProperty(
      nestedContainers as WidgetProps7,
      ['CONTAINER_WIDGET', 'CANVAS_WIDGET'],
      ['backgroundColor'],
      initialBackgrounds
    );
    const migrated = migrate7to8(cloneDeep(nestedContainers) as PageDSL7);
    getWidgetNameToProperty(migrated as WidgetProps7, ['CONTAINER_WIDGET', 'CANVAS_WIDGET'], ['backgroundColor'], migratedBackgrounds);
    expect(initialBackgrounds).toEqual({
      Canvas1: { backgroundColor: 'none' },
      Container1: { backgroundColor: '#FFFFFF' },
      Canvas2: {},
      Container2: { backgroundColor: 'white' },
      Canvas3: {},
      Container3: { backgroundColor: '' },
      Canvas4: {},
      Container4: { backgroundColor: 'red' },
      Canvas5: {}
    });
    expect(migratedBackgrounds).toEqual({
      Canvas1: { backgroundColor: 'none' },
      Container1: { backgroundColor: undefined },
      Canvas2: { backgroundColor: 'none' },
      Container2: { backgroundColor: undefined },
      Canvas3: { backgroundColor: 'none' },
      Container3: { backgroundColor: 'none' },
      Canvas4: { backgroundColor: 'none' },
      Container4: { backgroundColor: 'red' },
      Canvas5: { backgroundColor: 'none' }
    });
  });

  it('should migrate grid and form widgets background color styles', () => {
    const initialBackgrounds = {};
    const migratedBackgrounds = {};
    getWidgetNameToProperty(
      gridsAndForms as WidgetProps7,
      ['CONTAINER_WIDGET', 'CANVAS_WIDGET', 'FORM_WIDGET', 'IMAGE_WIDGET'],
      ['backgroundColor'],
      initialBackgrounds
    );
    const migrated = migrate7to8(cloneDeep(gridsAndForms) as PageDSL7);
    getWidgetNameToProperty(
      migrated as WidgetProps7,
      ['CONTAINER_WIDGET', 'CANVAS_WIDGET', 'FORM_WIDGET', 'IMAGE_WIDGET'],
      ['backgroundColor'],
      migratedBackgrounds
    );
    expect(initialBackgrounds).toEqual({
      Canvas1: { backgroundColor: 'none' },
      Form3: { backgroundColor: '' },
      Canvas6: {},
      Canvas2: {},
      Container1: { backgroundColor: 'white' },
      Canvas3: {},
      Image1: {},
      Form1: { backgroundColor: 'white' },
      Canvas4: {},
      Form2: { backgroundColor: 'black' },
      Canvas5: {}
    });
    expect(migratedBackgrounds).toEqual({
      Canvas1: { backgroundColor: 'none' },
      Form3: { backgroundColor: 'none' },
      Canvas6: { backgroundColor: 'none' },
      Canvas2: { backgroundColor: 'none' },
      Container1: { backgroundColor: undefined },
      Canvas3: { backgroundColor: 'none' },
      Image1: {},
      Form1: { backgroundColor: undefined },
      Canvas4: { backgroundColor: 'none' },
      Form2: { backgroundColor: 'black' },
      Canvas5: { backgroundColor: 'none' }
    });
  });

  it('should migrate image border radii', () => {
    const initialBorderRadii = {};
    const migratedBorderRadii = {};
    getWidgetNameToProperty(images as WidgetProps7, ['IMAGE_WIDGET'], ['borderRadius'], initialBorderRadii);
    const migrated = migrate7to8(cloneDeep(images as PageDSL7));
    getWidgetNameToProperty(migrated as WidgetProps7, ['IMAGE_WIDGET'], ['borderRadius'], migratedBorderRadii);

    expect(initialBorderRadii).toEqual({ Image3: { borderRadius: '' }, Image2: { borderRadius: '0px' }, Image1: { borderRadius: '4px' } });
    expect(migratedBorderRadii).toEqual({
      Image3: { borderRadius: '0px' },
      Image2: { borderRadius: '0px' },
      Image1: { borderRadius: undefined }
    });
  });

  it('should migrate padding property', () => {
    const initialPaddings = {};
    const migratedPaddings = {};
    getWidgetNameToProperty(canvases as WidgetProps7, ['CANVAS_WIDGET'], ['padding'], initialPaddings);
    const migrated = migrate7to8(cloneDeep(canvases as PageDSL7));
    getWidgetNameToProperty(migrated as WidgetProps7, ['CANVAS_WIDGET'], ['padding'], migratedPaddings);
    expect(initialPaddings).toEqual({
      Canvas1: {
        padding: defaultPadding
      },
      Canvas10: {
        padding: undefined
      },
      Canvas2: {
        padding: defaultPadding
      },
      Canvas3: {
        padding: defaultPadding
      },
      Canvas4: {
        padding: defaultPadding
      },
      Canvas8: {
        padding: defaultPadding
      },
      Canvas9: {
        padding: {
          top: {
            value: 24,
            mode: 'px'
          },
          bottom: {
            value: 12,
            mode: 'px'
          },
          left: {
            value: 16,
            mode: 'px'
          },
          right: {
            value: 16,
            mode: 'px'
          }
        }
      }
    });
    expect(migratedPaddings).toEqual({
      Canvas1: {
        padding: undefined
      },
      Canvas10: {
        padding: {
          bottom: {
            mode: 'px',
            value: 0
          },
          left: {
            mode: 'px',
            value: 0
          },
          right: {
            mode: 'px',
            value: 0
          },
          top: {
            mode: 'px',
            value: 0
          }
        }
      },
      Canvas2: {
        padding: undefined
      },
      Canvas3: {
        padding: undefined
      },
      Canvas4: {
        padding: undefined
      },
      Canvas8: {
        padding: undefined
      },
      Canvas9: {
        padding: {
          top: {
            value: 24,
            mode: 'px'
          },
          bottom: {
            value: 12,
            mode: 'px'
          },
          left: {
            value: 16,
            mode: 'px'
          },
          right: {
            value: 16,
            mode: 'px'
          }
        }
      }
    });
  });
});