import { BotData } from "~/types/bot";
export interface PositionConfig {
  align: "left" | "right";
  sideSpacing: number;
  bottomSpacing: number;
}

const getDesktopPositionConfig = (botData: BotData | null): PositionConfig => {
  if (!botData?.customization?.position) {
    return {
      align: "right",
      sideSpacing: 24,
      bottomSpacing: 80
    };
  }

  return {
    align:
      (botData.customization?.position?.align as "left" | "right") ?? "right",
    sideSpacing: botData.customization?.position?.side_spacing ?? 24,
    bottomSpacing: botData.customization?.position?.bottom_spacing ?? 80
  };
};

const getMobilePositionConfig = (botData: BotData | null): PositionConfig => {
  if (!botData?.customization?.mobile?.position) {
    return {
      align: "right",
      sideSpacing: 16,
      bottomSpacing: 20
    };
  }

  return {
    align:
      (botData.customization?.mobile?.position?.align as "left" | "right") ??
      "right",
    sideSpacing: botData.customization?.mobile?.position?.side_spacing ?? 16,
    bottomSpacing: botData.customization?.mobile?.position?.bottom_spacing ?? 20
  };
};

export const getPositionConfig = (
  botData: BotData | null,
  isMobile: boolean
): PositionConfig => {
  return isMobile
    ? getMobilePositionConfig(botData)
    : getDesktopPositionConfig(botData);
};

export const getFloatingButtonStyles = (positionConfig: PositionConfig) => {
  const { align, sideSpacing, bottomSpacing } = positionConfig;

  return {
    bottom: `${bottomSpacing}px`,
    [align]: `${sideSpacing}px`
  };
};