import cx from "classnames";
import React from "react";
import ConditionalWrapper from "../../utils/ConditionalWrapper";
import { Bar, BarItem } from "../Bar";
import { IconButton } from "../Button";
import { Icon } from "../Icon";
import { Image } from "../Image";
import { Tag } from "../Tag";
import { InfoTooltip } from "../Tooltip/InfoTooltip";
import type { Item } from "./generateTotal";
import Price from "./Price";

export interface Labels {
  [key: string]: string;
  remove: string;
  add: string;
  free: string;
  upfront: string;
  monthly: string;
}

export interface Row extends Item {
  description?: string | string[];
}

interface RowResult {
  col1: React.ReactNode;
  col2: React.ReactNode;
  col3: React.ReactNode;
  col4?: React.ReactNode;
}

const generateRow = (
  row: Row,
  isEditable: boolean,
  labels: Labels,
): RowResult => {
  const {
    isSubitem,
    image,
    badge,
    // type,
    name,
    tooltip,
    price,
    discount,
    description,
    icon,
    isMandatory,
    isOptional,
  } = row;

  return {
    col1: (
      <>
        <Bar
          canWrap={false}
          className={cx("mb-none ", {
            "cart-table__subitem": isSubitem,
          })}
        >
          {isSubitem && (
            <BarItem>
              <Icon name="add" size="medium" />
            </BarItem>
          )}
          {icon && (
            <BarItem>
              <Icon name={icon} size="medium" />
            </BarItem>
          )}
          {image && (
            <BarItem>
              <Image src={image} alt="" width="24" />
            </BarItem>
          )}
          <BarItem isFilling>
            {badge && <Tag color="warning">{badge}</Tag>}
            {/* <span className="reset-font-size">{type}</span> */}
            <Bar space="small">
              <BarItem
                canShrink
                className={cx("bold", { "text-nowrap": tooltip })}
              >
                <ConditionalWrapper
                  condition={!!tooltip}
                  wrapper={<span className={`text-wrap`}>{name}</span>}
                >
                  {name}
                </ConditionalWrapper>
                {tooltip && "\xa0"}
                {tooltip && (
                  <InfoTooltip className="icon--small" placement="right">
                    {tooltip}
                  </InfoTooltip>
                )}
              </BarItem>
            </Bar>
            {description && (
              <div>
                {typeof description === "string"
                  ? description
                  : description.map((text) => (
                      <p key={text} className="mb-0">
                        {text}
                      </p>
                    ))}
              </div>
            )}
          </BarItem>
          {isEditable && !isMandatory && !isOptional ? (
            <BarItem className={"hide-sm"}>
              <IconButton
                iconName="trash"
                isSquare
                size="small"
                aria-label={labels["remove"]}
              ></IconButton>
            </BarItem>
          ) : null}
          {isOptional && (
            <BarItem className={"hide-sm"}>
              <IconButton
                iconName="add"
                isSquare
                size="small"
                aria-label={labels["add"]}
              ></IconButton>
            </BarItem>
          )}
        </Bar>
        {!price?.monthly && discount?.monthsCount && (
          <div>
            <p
              className={cx(
                "mb-none show-sm cart-table__discount--margin-top",
                {
                  "cart-table__subitem": isSubitem,
                  "cart-table__discount--padding-left":
                    image || icon || isSubitem,
                },
              )}
            >
              {`1. – ${discount.monthsCount}. mesiac`}
            </p>
          </div>
        )}
      </>
    ),
    col2: (
      <Price
        discount={discount?.["upfront"]}
        freeLabel={labels["free"]}
        label={labels["upfront"]}
        price={price?.["upfront"]}
      />
    ),
    col3: (
      <Price
        discount={discount?.["monthly"]}
        discountMonthsCount={discount?.["monthsCount"]}
        freeLabel={labels["free"]}
        label={labels["monthly"]}
        price={price?.["monthly"]}
      />
    ),
    ...(isEditable &&
      !isMandatory &&
      !isOptional && {
        col4: (
          <IconButton
            iconName="trash"
            size="small"
            className="cart-table__button mb-none"
          >
            <span className="show-md">{labels["remove"]}</span>
          </IconButton>
        ),
      }),
    ...(isOptional && {
      col4: (
        <IconButton
          iconName="add"
          size="small"
          className="cart-table__button mb-none"
        >
          <span className="show-md">{labels["add"]}</span>
        </IconButton>
      ),
    }),
  };
};

export default generateRow;