import { useSelector } from "react-redux";

import type { FormattedQuoteResponse } from "@hooks/apis/common/quote/types";
import { isAutoQuote, isManualQuote } from "@hooks/apis/common/quote/useQuote";
import { useTheme } from "@hooks/useTheme";
import type { ReduxStateType } from "@store/types";
import { adjustDecimals } from "@utils/adjustDecimals";
import { formatValue } from "@utils/formatValue";
import { getBorderRadius } from "@utils/getBorderRadius";
import { getTimeInMins } from "@utils/getTimeInMins";
import { Fragment } from "react/jsx-runtime";
import { AutoTag } from "./utils/AutoTag";
import { Dot } from "./utils/Dot";
import { Fees } from "./utils/Fees";
import { RouteProtocol } from "./utils/RouteProtocol";
import { RouteTag, tagsInfo } from "./utils/RouteTag";

type RouteItemType = {
  route: FormattedQuoteResponse;
  onClick: () => void;
  isActive: boolean;
  tags?: Array<"best" | "fast">;
};

export const RouteItem = ({
  route,
  onClick,
  isActive,
  tags,
}: RouteItemType) => {
  const theme = useTheme();
  const locale = useSelector(
    (state: ReduxStateType) => state.settings.language
  );
  // biome-ignore format:
  const style = `${
    isActive
      ? "bn-bg-accent-1 bn-border-theme"
      : "bn-bg-layer-2 bn-border-transparent"
  } bn-border bn-border-solid bn-px-4 bn-py-2 bn-flex-1 bn-cursor-pointer bn-w-full bn-relative bn-overflow-hidden`;

  const { primaryOutput, estimatedFulfilTime, isSwapRoute } = route;
  const toAmount = primaryOutput.amount;
  const toToken = primaryOutput.token;
  const isAutoRoute = isAutoQuote(route);

  const routeInfo = [
    isManualQuote(route) ? (
      <RouteProtocol routeDetails={route.protocol} key={1} />
    ) : undefined,
    estimatedFulfilTime && !isSwapRoute ? (
      <span className="bn-aeonik-font" key={2}>
        {getTimeInMins(estimatedFulfilTime).fullShort}
      </span>
    ) : undefined,
    <Fees route={route} key={3} />,
  ];

  return (
    <button
      type="button"
      className={style}
      onClick={onClick}
      style={{ borderRadius: getBorderRadius(theme.borderRadius, 8) }}
    >
      {/* auto tag */}
      {isAutoRoute && (
        <div className="bn-absolute bn-top-0 bn-right-0 bn-size-fit bn-h-[22px]">
          <AutoTag active={isActive} />
        </div>
      )}

      {tags?.length ? (
        <div className="bn-flex bn-items-center bn-space-x-2 bn-mb-3 ">
          {tags.map((item) => (
            <RouteTag item={tagsInfo[item]} isActive={isActive} key={item} />
          ))}
        </div>
      ) : null}

      <div className="bn-space-y-2">
        {/* amount */}
        <div className="bn-aeonik-font bn-flex bn-space-y-1 bn-flex-col">
          <p className="bn-text-base bn-font-medium bn-text-primary bn-text-left bn-leading-[18px]">
            {adjustDecimals(formatValue(toAmount, toToken.decimals), 3, locale)}{" "}
            {toToken.symbol}
          </p>
          {primaryOutput?.valueInUsd ? (
            <p className="bn-text-secondary bn-text-sm bn-text-left bn-leading-[14px]">
              ${adjustDecimals(primaryOutput.valueInUsd, 2, locale)}
            </p>
          ) : null}
        </div>

        {/* route info */}
        <div className="bn-flex bn-items-center bn-text-secondary bn-text-sm bn-space-x-2">
          {routeInfo
            .filter((arrItem) => arrItem !== undefined)
            .map((item, index, arr) => (
              <Fragment key={`item-${item.key}`}>
                {item}
                {index < arr.length - 1 && <Dot key={`dot-${item.key}`} />}
              </Fragment>
            ))}
        </div>
      </div>
    </button>
  );
};
