import React from "react";
import { useAppSelector } from "redux/hooks";
import ProText from "../ProText";
import { formatPriceUi } from "utils/helpers";

interface ArabicPriceProps {
  price: number | string;
  style?: React.CSSProperties;
  strong?: boolean;
  type?: "secondary" | "success" | "warning" | "danger";
  className?: string;
  hideCurrency?: boolean;
  textStyle?: React.CSSProperties;
}

const ArabicPrice: React.FC<ArabicPriceProps> = ({
  price,
  style = {},
  strong = false,
  type,
  className,
  hideCurrency = false,
  textStyle = {},
}) => {
  const { isRTL } = useAppSelector((state) => state.locale);
  const { restaurant } = useAppSelector((state) => state.order);

  // Format the price to ensure it has 2 decimal places
  const formattedPrice =
    typeof price === "number" ? formatPriceUi(price, restaurant?.currency_decimals ?? 3) : price;
  const { textDecoration, ...restStyle } = style;
  const decorationStyle = textDecoration
    ? ({ textDecoration } as React.CSSProperties)
    : undefined;

  return (
    <ProText
      strong={strong}
      type={type}
      className={className}
      style={{
        display: "inline-flex",
        alignItems: "baseline",
        lineHeight: 1,
        ...restStyle,
      }}
    >
      {isRTL && !hideCurrency ? (
        <>
          <span
            style={{
              verticalAlign: "baseline",
              lineHeight: 1,
              fontSize: "14px",
              ...(decorationStyle ?? {}),
              ...textStyle,
            }}
          >
            {formattedPrice}
          </span>
          <span style={{ margin: "0 3px" }} />
          <span
            style={{
              fontSize: "14px",
              verticalAlign: "baseline",
              lineHeight: 1,
              position: "relative",
              top: -2,
              ...(decorationStyle ?? {}),
              ...textStyle,
            }}
          >
            {isRTL ? restaurant.local_currency : restaurant.global_currency}
          </span>
        </>
      ) : !hideCurrency ? (
        <>
          <span
            style={{
              verticalAlign: "baseline",
              lineHeight: 1,
              display: "inline-block",
              fontSize: "14px",
              ...(decorationStyle ?? {}),
              ...textStyle,
            }}
          >
            {formattedPrice}
          </span>
          <span style={{ margin: "0 2px" }} />
          <span
            style={{
              fontSize: "14px",
              verticalAlign: "baseline",
              lineHeight: 1,
              display: "inline-block",
              ...(decorationStyle ?? {}),
              ...textStyle,
            }}
          >
            {isRTL ? restaurant.local_currency : restaurant.global_currency}
          </span>
        </>
      ) : (
        <span style={{ ...decorationStyle, ...textStyle }}>
          {formattedPrice}
        </span>
      )}
    </ProText>
  );
};

export default ArabicPrice;