Duffer Derek

import { v4 as uuidv4 } from 'uuid';
import { GridLayout, DroppedItem,GRID_TYPES } from '../context/CanvasContext';

const GRID_AREA_KEYS = {
  DEFAULT: '2f543aae-1acf-4aa6-983f-22a29df53b4d',
  ONE_COLUMN: '3afbeadf-fb1d-4aba-89d6-e735682cdf63',
  TWO_COLUMN: {
    LEFT: '376ef45c-111e-4b65-8ff1-84248cf9c4c2',
    RIGHT: 'e1fabf62-2432-4134-aeac-4346c998d44b'
  },
  THREE_COLUMN: {
    LEFT: 'ca4daabc-539a-4fb7-bd74-032fb3db745e',
    MIDDLE: 'c132bf0a-9593-4aa9-a05a-3b264bb6b1d1',
    RIGHT: '207d48ec-972a-4182-bcef-cf5d3bfa23a2'
  }
};

interface UmbracoContentData {
  contentTypeKey: string;
  udi: null;
  key: string;
  values: Array<{
    editorAlias: string;
    culture: null;
    segment: null;
    alias: string;
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    value: any;
  }>;
}

interface UmbracoLayoutItem {
  $type: "BlockGridLayoutItem";
  columnSpan: number;
  rowSpan: number;
  areas: Array<{
    key: string;
    items: UmbracoLayoutItem[];
  }>;
  contentUdi: null;
  settingsUdi: null;
  contentKey: string;
  settingsKey: null;
}

export const mapGridStateToUmbraco = (gridState: { layouts: GridLayout[], components: { [key: string]: DroppedItem[] } }) => {
  if (!gridState || !gridState.layouts) {
    return {
      template: null,
      values: [],
      variants: []
    };
  }

  const contentData: UmbracoContentData[] = [];
  const expose: Array<{ contentKey: string; culture: null; segment: null }> = [];

  const processGridLayout = (grid: GridLayout, isRoot: boolean = true): UmbracoLayoutItem => {
    const contentKey = uuidv4();
    
    // Extract the base grid type ID
    const baseGridId = grid.documentId || grid.id.split('-')[0];
    
    // Add grid to contentData
    contentData.push({
      contentTypeKey: baseGridId,
      udi: null,
      key: contentKey,
      values: []
    });

    expose.push({
      contentKey,
      culture: null,
      segment: null
    });

    // Get area key based on the grid type and column index
    const getAreaKey = (gridType: string, columnIndex: number): string => {
      switch(gridType) {
        case GRID_TYPES.DEFAULT.id:
          return GRID_AREA_KEYS.DEFAULT;
        case GRID_TYPES.ONE_COLUMN.id:
          return GRID_AREA_KEYS.ONE_COLUMN;
        case GRID_TYPES.TWO_COLUMN.id:
          return columnIndex === 0 ? GRID_AREA_KEYS.TWO_COLUMN.LEFT : GRID_AREA_KEYS.TWO_COLUMN.RIGHT;
        case GRID_TYPES.THREE_COLUMN.id:
          if (columnIndex === 0) return GRID_AREA_KEYS.THREE_COLUMN.LEFT;
          if (columnIndex === 1) return GRID_AREA_KEYS.THREE_COLUMN.MIDDLE;
          return GRID_AREA_KEYS.THREE_COLUMN.RIGHT;
        default:
          return uuidv4();
      }
    };

    const layoutItem: UmbracoLayoutItem = {
      $type: "BlockGridLayoutItem",
      columnSpan: isRoot ? 12 : Math.floor(12 / (grid.columns?.length || 1)),
      rowSpan: 1,
      areas: grid.columns.map((column, columnIndex) => ({
        key: getAreaKey(baseGridId, columnIndex),
        items: column.map(item => {
          if ('columns' in item) {
            // This is a nested grid
            return processGridLayout(item as GridLayout, false);
          } else {
            // This is a component
            const componentKey = uuidv4();
            const component = item as DroppedItem;
            
            contentData.push({
              contentTypeKey: getContentTypeKeyFromId(component.id),
              udi: null,
              key: componentKey,
              values: mapComponentToValues(component)
            });

            expose.push({
              contentKey: componentKey,
              culture: null,
              segment: null
            });

            return {
              $type: "BlockGridLayoutItem",
              columnSpan: 12,
              rowSpan: 1,
              areas: [],
              contentUdi: null,
              settingsUdi: null,
              contentKey: componentKey,
              settingsKey: null
            };
          }
        })
      })),
      contentUdi: null,
      settingsUdi: null,
      contentKey: contentKey,
      settingsKey: null
    };

    return layoutItem;
  };

  // Process root level layouts
  const layouts = gridState.layouts.map(grid => processGridLayout(grid, true));

  const result = {
    urls: [{
      culture: "en-US",
      url: "/homegrid"
    }],
    template: {
      id: "b586c583-7e85-461d-8865-0c0c4485fcb5"
    },
    isTrashed: false,
    documentType: {
      id: "1a13df71-2d4a-49c5-a8bf-52602e2acc08",
      icon: "icon-document",
      collection: null
    },
    id: "64c0ac7a-78f3-40f7-8b4e-5e1319cb8723",
    values: [
      {
        editorAlias: "Umbraco.BlockGrid",
        culture: null,
        segment: null,
        alias: "mainContent",
        value: {
          layout: {
            "Umbraco.BlockGrid": layouts.map(item => ({
              ...item,
              $type: "BlockGridLayoutItem",
              columnSpan: 12,
              rowSpan: 1,
              areas: item.areas?.map(area => ({
                ...area,
                items: area.items.map(subItem => ({
                  ...subItem,
                  $type: "BlockGridLayoutItem",
                }))
              }))
            }))
          },
          contentData,
          settingsData: [],
          expose: contentData.map(item => ({
            contentKey: item.key,
            culture: null,
            segment: null
          }))
        }
      }
    ],
    variants: [
      {
        culture: null,
        segment: null,
        state: "Published",
        name: "HomeGrid",
        publishDate: new Date().toISOString(),
        createDate: new Date().toISOString(),
        updateDate: new Date().toISOString()
      }
    ]
  };

  // Filter out items with empty values from contentData
  // result.values[0].value.contentData = result.values[0].value.contentData.filter(
  //   item => item.values.length > 0 || [
  //     '99740655-b76b-4d34-aaac-aace495a39b6', // DEFAULT
  //     'c996b4ec-1a0d-4a7c-b99d-466c2b153da4', // ONE_COLUMN
  //     'd6dbc5f5-510a-4020-be64-ef32b741be22', // TWO_COLUMN
  //     'bfe13a0c-ab38-4f4f-8720-dcf34f8475d1'  // THREE_COLUMN
  //   ].includes(item.contentTypeKey)
  // );

  return result;
};

const getContentTypeKeyFromId = (id: string): string => {
  // Map component IDs to their Umbraco content type keys
  const contentTypeMap: { [key: string]: string } = {
    'text': '22fc06c9-e3d0-4e31-85f4-3c8b80d3a846',
    'banner': 'b5386d3b-78d6-425f-a78b-4efbb9c8d4d6',
    'marquee': 'd9169e50-d0e2-4dce-be6b-4882be6dc8ed'
  };
  return contentTypeMap[id] || id;
};

const mapComponentToValues = (component: DroppedItem) => {
  // Map component properties to Umbraco values format
  switch (component.id) {
    case 'text':
      return [{
        editorAlias: "Umbraco.TextBox",
        culture: null,
        segment: null,
        alias: "text",
        value: component.properties.text
      }];
    case 'banner':
      return [
        {
          editorAlias: "Umbraco.TextBox",
          culture: null,
          segment: null,
          alias: "bannerTitle",
          value: component.properties.bannerTitle
        },
        {
          editorAlias: "Umbraco.TextBox",
          culture: null,
          segment: null,
          alias: "bannerDescription",
          value: component.properties.bannerDescription
        },
        {
          editorAlias: "Umbraco.MediaPicker3",
          culture: null,
          segment: null,
          alias: "image",
          value: [{
            key: uuidv4(),
            mediaKey: component.properties.image.id,
            mediaTypeAlias: "Image",
            crops: [],
            focalPoint: null
          }]
        }
      ];
    case 'marquee':
      return [
        {
          editorAlias: "Umbraco.TextArea",
          culture: null,
          segment: null,
          alias: "marqueeText",
          value: component.properties.marqueeText
        },
        {
          editorAlias: "Umbraco.Integer",
          culture: null,
          segment: null,
          alias: "marqueeSpeed",
          value: component.properties.marqueeSpeed
        }
      ];
    default:
      return [];
  }
};