/* eslint-disable @typescript-eslint/no-explicit-any */
import { getStringSnippets, isDynamicStringSnippet } from "@/redux/utils";
import { evaluateDynamicString } from "@/utils/evaluateDynamicString";
import { css } from "@emotion/react";
import { Theme } from "@mui/material";

export const baseHoverDivStyle = css`
  background-color: transparent;
  transition: background-color 0.3s;
  text-align: center;
  width: 30px;
  font-size: 5px;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 2px;
  background-color: #E2EAF4;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 1px 1px 2px gray;

  &:hover {
    background-color: steelblue;
    width: 40px;
    font-size: 9px;
  }
`;
type screenType = {
  columnSize: string,
  columnFraction: string[],
  columnGap: number | string,
};
export function gridStyle(Mobile: screenType,
  Tablet: screenType,
  Desktop: screenType,
  Screen: string, isEditMode: boolean, theme: Theme) {
  const AllDisplayMap = { Mobile, Desktop, Tablet };
  const columnFractionMap = []
  AllDisplayMap[Screen]?.columnFraction?.map((e, i) => {
    if (i < AllDisplayMap[Screen].columnSize) {
      columnFractionMap.push(e)
    }

  })
  if (isEditMode) {

    let columnFraction = columnFractionMap?.join(" ");
    if (columnFractionMap.length < AllDisplayMap[Screen]?.columnSize) {
      const actualColumnFraction = []
      for (let i = 0; i < AllDisplayMap[Screen]?.columnSize; i++) {
        actualColumnFraction.push(columnFractionMap[i] || "1fr")
      }
      columnFraction = actualColumnFraction.join(" ")
    }
    return css`
        display: grid;
        justify-content:center;
        gap: 15px;
        width:100%;
        grid-template-columns: ${columnFraction};
        column-gap: ${AllDisplayMap[Screen]?.columnGap}%;
        background:${theme.palette.background.default};
      `;
  }

  // grid-gap: ${Desktop.columnGap}%;
  return css`
      display: grid;
      grid-template-columns: repeat(${Desktop.columnSize}, 1fr 2fr 1fr 2fr);
      gap: 12px;
       background:${theme.palette.background.default};
      @media (min-width: 900px) {
        grid-template-columns: repeat(${Desktop.columnSize}, 1fr);
        column-gap: ${Desktop.columnGap}%;
        
      }

      @media (max-width: 900px) {
        grid-template-columns: repeat(${Tablet.columnSize}, 1fr);
        column-gap: ${Tablet.columnGap}%;
      }

      @media (max-width: 600px) {
        grid-template-columns: repeat(${Mobile.columnSize}, 1fr);
           column-gap: ${Mobile.columnGap}%;
      }
    `;
}
// grid-gap: ${Mobile.columnGap}%;  // padding: 1px;
export const gridDisplayNameCss = (theme: Theme) => css`
   position:absolute;
            left: 0;
            bottom: 0;
            font-size: 8px;
          
            z-index: 5;
            padding:4px;
            borderRadius:2px;
            background: ${theme.palette.action.focus};
           color:${theme.palette.text.primary}
 `
export const gridItemStyle = function (config: any, context, Screen: string, isEditMode: boolean, theme: Theme) {

  function getOriginalValue(context, value) {
    if (!value) return 1
    const dynamicStrings = getStringSnippets(value as string);
    let resultStyle = dynamicStrings || {};
    dynamicStrings.forEach((dynamicString) => {
      if (isDynamicStringSnippet(dynamicString)) {
        try {
          const calcRes = evaluateDynamicString("", dynamicString, context);
          resultStyle = calcRes;
        } catch (e) { return {} }
      }
    });
    return resultStyle;
  }
  if (isEditMode) {
    return css` grid-column: span ${getOriginalValue(context, config?.props?.[Screen]?.columnSpan)};
      grid-row: span ${getOriginalValue(context, config?.props?.[Screen]?.rowSpan)};
     border: 0.5px dashed ${theme.palette.text.secondary};

      `

  }
  return css`
   padding:0;
    @media (min-width: 900px) {
      grid-column: span ${getOriginalValue(context, config?.props?.Desktop?.columnSpan)};
      grid-row: span ${getOriginalValue(context, config?.props?.Desktop?.rowSpan)};
    }

    @media (max-width: 900px) {
      grid-column: span ${getOriginalValue(context, config?.props?.Tablet?.columnSpan)};
      grid-row: span ${getOriginalValue(context, config?.props?.Tablet?.rowSpan)};
    }

    @media (max-width: 600px) {
      grid-column: span ${getOriginalValue(context, config?.props?.Mobile?.columnSpan)};
      grid-row: span ${getOriginalValue(context, config?.props?.Mobile?.rowSpan)};
    }
  `;
};