Duffer Derek

import React from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import { useCanvasContext } from '../../context/CanvasContext';
import { styled } from '@mui/material/styles';
import { processCommonItems } from '../../utils/dataProcessors/commonItemsProcessor';
import umbracoService from '../../services/umbracoService';

const StyledButton = styled(Button)({
  backgroundColor: '#2196f3',
  color: '#fff',
  borderRadius: '5px',
  textTransform: 'none', // Ensure text is not all caps
  '&:hover': {
    backgroundColor: '#fff',
    color: '#000',
  },
});

const Header: React.FC = () => {
  const { headerItem, footerItem,gridState } = useCanvasContext();

  const handlePublish = async () => {
      debugger
      const pageId = Object.keys(gridState)[0]; 
      await umbracoService.publishPage(pageId,gridState);
    console.log('gridState',gridState)
    const processedHeaderItem = processCommonItems(headerItem,footerItem);
    const data = {
      template: {
        "id": "b586c583-7e85-461d-8865-0c0c4485fcb5"
    },
      documentType: {
        id: "10c7361a-54c2-4623-b83d-e595bfcb733f"
      },
      id: "937eafd8-9822-4688-ad42-3f907f1e3ca5",
      values: [
        ...processedHeaderItem,
      ],
      variants: [
        {
          culture: null,
          segment: null,
          name: "Common"
        }
      ]
    };

    try {
      const id = "937eafd8-9822-4688-ad42-3f907f1e3ca5";
      await umbracoService.publish(data, id);
      
     
      console.log('Published Data:', data);
    } catch (error) {
      console.error('Error publishing data:', error);
    }
  };

  // const handlePublishDroppedItems = async () => {
  //   debugger
  //   const processedDroppedItems = processDroppedItems(droppedItems);
  //   console.log('droppedItems:', droppedItems);
  //   const data = {
  //     template: null,
  //     values: [
  //       {
  //         editorAlias: "Umbraco.BlockList",
  //         alias: "mainContent",
  //         culture: null,
  //         segment: null,
  //         value: processedDroppedItems
  //       }
  //     ],
  //     variants: [
  //       {
  //         culture: null,
  //         segment: null,
  //         name: "Home"
  //       }
  //     ]
  //   };
  //   console.log('dropped data:', data);
  //   try {
  //     const id = "7e6a7890-5752-4a22-a44c-3d426a153fb5";
  //     await umbracoService.publish(data, id);
  //     console.log('Published Data:', data);
  //   } catch (error) {
  //     console.error('Error publishing data:', error);
  //   }
  // };

  return (
    <AppBar position="sticky" sx={{ backgroundColor: '#f5f5f5', color: '#333', zIndex: 1300 }}>
      <Toolbar>
        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
          UIBuilder
        </Typography>
        <StyledButton color="inherit" onClick={handlePublish}>
          Publish
        </StyledButton>
      </Toolbar>
    </AppBar>
  );
};

export default Header;