import {
  BiteStyleProps,
  InteractionProps,
} from '@components/DesignPanel/types';

export type PositionProps = {
  x: number;
  y: number;
  w: number;
  h: number;
};

export type GridProps = {
  x: number;
  y: number;
  w: number;
  h: number;
};

export type PositionModifiersProps = {
  id: string;
  position: 'x' | 'y' | 'w' | 'h';
};

const removeBiteStyles = (
  biteStyles: BiteStyleProps[],
  position: Record<string, any>,
  currentResponsive: string
): BiteStyleProps[] =>
  biteStyles.filter(
    ({ screen, id }) =>
      !(
        screen === currentResponsive &&
        Object.keys(position).some((key) => id === `b_area-${key}`)
      )
  );

const addBiteStyles = (
  biteStyles: BiteStyleProps[],
  position: Record<string, any>,
  currentResponsive: string
): BiteStyleProps[] => {
  const newStyles = [
    ...biteStyles,
    ...Object.keys(position).map((key) => ({
      id: `b_area-${key}`,
      screen: currentResponsive,
      value: position[key].toString(),
      strategies: [] as any,
      interaction: '' as InteractionProps,
    })),
  ];
  // add once
  if (newStyles.filter(({ id }) => id === 'b_area').length === 0) {
    newStyles.push({
      id: 'b_area',
      screen: 'all',
      value: 'b_area',
      strategies: [] as any,
      interaction: '',
    });
  }
  return newStyles;
};

export const toggleOverflow = (
  biteStyles: BiteStyleProps[],
  currentResponsive: string
): BiteStyleProps[] => {
  const overflow = biteStyles.find(
    ({ screen, id }) => screen === currentResponsive && id === 'overflow'
  );

  if (overflow) {
    return biteStyles.filter(
      ({ screen, id }) => !(screen === currentResponsive && id === 'overflow')
    );
  }

  return [
    ...biteStyles,
    {
      id: 'overflow',
      screen: currentResponsive,
      value: 'hidden',
      strategies: [] as any,
      interaction: '',
    },
  ];
};

export const updateBiteStylesWithArea = (
  currentBiteStyles: BiteStyleProps[],
  position: Record<string, any>,
  currentResponsive: string
): BiteStyleProps[] => {
  const biteStylesWithoutCurrent = removeBiteStyles(
    currentBiteStyles,
    position,
    currentResponsive
  );
  return addBiteStyles(biteStylesWithoutCurrent, position, currentResponsive);
};

export const getAreaModifiers = () => {
  return [
    {
      id: 'b_area-x',
      position: 'x',
    },
    {
      id: 'b_area-y',
      position: 'y',
    },
    {
      id: 'b_area-w',
      position: 'w',
    },
    {
      id: 'b_area-h',
      position: 'h',
    },
    {
      id: 'b_area',
      position: null,
    },
    {
      id: 'overflow',
      position: null,
    },
  ] as PositionModifiersProps[];
};

export const biteStyleToPosition = (
  biteStyles: BiteStyleProps[]
): { pos: PositionProps } => {
  const pos = { x: null, y: null, w: null, h: null } as PositionProps;

  biteStyles.forEach(({ id, value }) => {
    if (id && id.includes('b_area-')) {
      const key = id.replace('b_area-', '') as keyof PositionProps;
      const parsedValue = parseInt(value, 10);
      const checkedValue = isNaN(parsedValue) ? 2 : parsedValue;
      pos[key] = checkedValue;
    }
  });

  if (pos.x === null || pos.y === null || pos.w === null || pos.h === null) {
    Object.assign(pos, { x: 1, y: 1, w: 1, h: 1 });
  }

  return { pos };
};