import React from "react";
import { THEME } from "../../types";
import { tokens } from "../../style-dictionary/dist/tokens";
import { Svg, SvgProps } from "../Svg";

const WIDTH = 165;
const HEIGHT = 32;
const RATIO: number = WIDTH / HEIGHT;

const widthFromHeight = (height: number) => Math.ceil(height * RATIO);

export interface ConveyorLogoProps extends SvgProps {
  height?: number;
  monochrome?: boolean;
  theme?: THEME;
  variant?: "icon" | "wordmark";
  color?: string;
}

export const ConveyorLogo = React.forwardRef<SVGSVGElement, ConveyorLogoProps>(
  (
    {
      height = HEIGHT,
      monochrome = false,
      theme = THEME.PRODUCT,
      variant = "wordmark",
      color,
      className,
      ...rest
    },
    ref,
  ) => {
    const wordmarkColor = {
      brand: tokens.color.white,
      product: tokens.color.brandBlack,
    };

    const iconColorFunction = () => {
      if (monochrome && theme === THEME.PRODUCT) {
        return color || tokens.color.brandBlack;
      }

      if (monochrome && theme === THEME.BRAND) {
        return color || tokens.color.white;
      }

      return tokens.color.brandGreen[400];
    };

    const iconColor = iconColorFunction();

    return (
      <Svg
        ref={ref}
        width={variant === "wordmark" ? widthFromHeight(height) : height}
        height={height}
        viewBox={
          variant === "wordmark" ? `0 0 ${WIDTH} ${HEIGHT}` : "0 0 32 32"
        }
        className={className}
        {...rest}
      >
        {variant === "wordmark" && (
          <>
            <path
              fill={wordmarkColor[theme]}
              d="M44.159 22.858c-3.914 0-5.732-3.663-5.732-9.087 0-4.222 1.286-8.388 5.144-8.388 2.796 0 4.389 2.125 5.228 5.088h3.076l-0.28-5.088c-1.789-1.51-4.669-2.349-7.884-2.349-6.626 0-11.91 4.473-11.91 11.603 0 6.263 4.11 10.764 11.938 10.764 3.411 0 6.43-0.783 8.36-2.125l0.503-6.039h-3.048c-1.146 3.774-2.768 5.62-5.396 5.62z"
            />
            <path
              fill={wordmarkColor[theme]}
              d="M62.261 23.361c-1.789 0-2.6-2.88-2.6-6.85 0-3.075 0.419-5.088 2.013-5.088 1.789 0 2.6 2.88 2.6 6.85 0 3.075-0.42 5.088-2.013 5.088zM61.674 25.402c5.116 0 8.779-3.187 8.779-8.276 0-4.362-3.215-7.745-8.192-7.745-5.116 0-8.779 3.187-8.779 8.276 0 4.362 3.215 7.745 8.192 7.745z"
            />
            <path
              fill={wordmarkColor[theme]}
              d="M81.752 21.544c0 1.286-0.364 1.426-1.65 1.594v1.985h9.059v-1.985c-1.286-0.168-1.65-0.308-1.65-1.594v-7.577c0-3.075-1.873-4.585-4.697-4.585-2.516 0-4.222 1.398-5.452 2.74l0.14-2.908h-1.118l-6.291 1.566v1.062l1.51 1.761v7.94c0 1.286-0.364 1.426-1.65 1.594v1.985h9.059v-1.985c-1.286-0.168-1.65-0.308-1.65-1.594v-8.164c0.699-0.196 1.621-0.363 2.656-0.363 1.286 0 1.733 0.615 1.733 1.65v6.878z"
            />
            <path
              fill={wordmarkColor[theme]}
              d="M105.51 9.661h-6.347v1.985c1.482 0.196 1.901 0.335 1.901 1.007 0 0.224-0.056 0.447-0.252 0.895l-2.321 4.949-2.292-4.949c-0.196-0.419-0.28-0.671-0.28-0.895 0-0.671 0.391-0.811 1.873-1.006v-1.985h-9.981v1.985c0.95 0.308 1.258 0.503 1.594 1.118l6.71 12.442h1.789l6.011-12.442c0.28-0.615 0.671-0.811 1.594-1.118v-1.985z"
            />
            <path
              fill={wordmarkColor[theme]}
              d="M112.232 9.382c-4.473 0-8.22 3.383-8.22 8.527 0 4.977 3.383 7.493 7.772 7.493 4.11 0 6.207-2.628 7.101-5.424l-1.258-0.727c-0.979 1.202-2.153 1.873-3.998 1.873-2.488 0-4.333-1.705-4.333-4.389h9.506v-1.118c0-3.467-2.265-6.235-6.57-6.235zM111.728 11.395c1.398 0 1.957 1.37 2.013 3.607h-4.389c0.196-2.041 0.811-3.607 2.376-3.607z"
            />
            <path
              fill={wordmarkColor[theme]}
              d="M126.125 25.178l-0.364 0.727c-0.839 1.957-1.789 2.125-3.774 2.125h-2.153v2.852c0.42 0.671 1.454 1.118 2.852 1.118 2.013 0 3.411-1.174 4.669-3.886l7.129-15.349c0.308-0.643 0.643-0.811 1.594-1.118v-1.985h-6.347v1.985c1.482 0.196 1.901 0.335 1.901 1.006 0 0.224-0.084 0.447-0.364 1.090l-2.265 5.088-2.209-5.088c-0.28-0.643-0.336-0.867-0.336-1.090 0-0.671 0.42-0.811 1.901-1.006v-1.985h-9.981v1.985c0.951 0.308 1.286 0.503 1.594 1.118l6.151 12.414z"
            />
            <path
              fill={wordmarkColor[theme]}
              d="M144.063 23.361c-1.789 0-2.6-2.88-2.6-6.85 0-3.075 0.42-5.088 2.013-5.088 1.789 0 2.6 2.88 2.6 6.85 0 3.075-0.419 5.088-2.013 5.088zM143.476 25.402c5.116 0 8.779-3.187 8.779-8.276 0-4.362-3.215-7.745-8.192-7.745-5.116 0-8.779 3.187-8.779 8.276 0 4.362 3.215 7.745 8.192 7.745z"
            />
            <path
              fill={wordmarkColor[theme]}
              d="M159.304 9.214h-1.146l-6.263 1.566v1.062l1.51 1.761v7.94c0 1.286-0.364 1.426-1.65 1.594v1.985h9.59v-1.985c-1.566-0.224-2.181-0.308-2.181-1.538v-6.291c1.202-0.727 3.579-0.811 5.368-0.811h0.727v-4.781c-0.364-0.196-0.811-0.336-1.454-0.336-2.293 0-3.439 0.923-4.641 4.809l0.14-4.977z"
            />
            <path
              fill={iconColor}
              d="M16.878 27.991c-1.037 0.244-2.117 0.372-3.228 0.372-0.213 0-0.424-0.005-0.635-0.014v-2.527c0-1.168-1.139-1.994-2.245-1.634-1.714 0.559-3.433 1.107-5.149 1.66-1.215-0.845-2.292-1.878-3.189-3.055l7.037-2.306c1.738-0.564 3.594-0.265 5.071 0.814s2.334 2.761 2.337 4.596l0.001 2.094z"
            />
            <path
              fill={iconColor}
              d="M18.486 27.51l0.004-7.394c-0.003-1.836 0.842-3.518 2.336-4.601 1.46-1.078 3.311-1.372 5.066-0.805l1.832 0.598c-0.104 1.331-0.391 2.611-0.836 3.813-0.776-0.254-1.552-0.51-2.328-0.763-1.090-0.355-2.198 0.466-2.198 1.617v5.369c-1.159 0.915-2.465 1.651-3.875 2.167z"
            />
            <path
              fill={iconColor}
              d="M27.756 13.595l-6.833-2.236c-1.755-0.567-3.076-1.905-3.638-3.652s-0.265-3.612 0.808-5.096l1.075-1.487c1.208 0.516 2.331 1.196 3.339 2.012-0.453 0.624-0.914 1.244-1.379 1.861-0.711 0.944-0.284 2.312 0.838 2.672l4.926 1.582c0.503 1.362 0.803 2.822 0.865 4.344z"
            />
            <path
              fill={iconColor}
              d="M13.198 0.007c0.15-0.005 0.3-0.007 0.451-0.007 1.36 0 2.675 0.193 3.919 0.553l-4.188 5.794c-1.073 1.485-2.746 2.345-4.572 2.347s-3.5-0.848-4.579-2.35l-1.141-1.574c0.861-0.974 1.853-1.828 2.949-2.534l1.387 1.971c0.677 0.962 2.096 0.966 2.779 0.007l2.995-4.207z"
            />
            <path
              fill={iconColor}
              d="M0.128 10.090c0.431-1.44 1.084-2.783 1.919-3.99l4.275 5.906c1.079 1.502 1.372 3.364 0.803 5.092-0.563 1.764-1.894 3.091-3.632 3.655l-1.997 0.65c-0.653-1.107-1.161-2.311-1.497-3.586l2.376-0.808c1.103-0.375 1.516-1.727 0.825-2.668-1.036-1.409-2.055-2.83-3.073-4.252z"
            />
          </>
        )}

        {variant === "icon" && (
          <>
            <path
              fill={iconColor}
              d="M19.042 31.58c-1.17 0.275-2.389 0.42-3.642 0.42-0.24 0-0.479-0.005-0.716-0.016v-2.851c0-1.318-1.285-2.25-2.533-1.843-1.934 0.63-3.873 1.249-5.809 1.872-1.371-0.954-2.586-2.118-3.598-3.447l7.94-2.602c1.96-0.637 4.054-0.299 5.721 0.918s2.633 3.115 2.637 5.186l0.001 2.362z"
            />
            <path
              fill={iconColor}
              d="M20.856 31.037l0.004-8.342c-0.003-2.071 0.95-3.969 2.636-5.191 1.647-1.216 3.736-1.548 5.716-0.909l2.066 0.675c-0.117 1.502-0.441 2.946-0.943 4.302-0.876-0.286-1.751-0.576-2.627-0.861-1.23-0.401-2.48 0.525-2.48 1.824v6.057c-1.308 1.032-2.781 1.862-4.372 2.445z"
            />
            <path
              fill={iconColor}
              d="M31.314 15.338l-7.709-2.523c-1.98-0.64-3.471-2.149-4.105-4.12s-0.299-4.075 0.911-5.75l1.212-1.677c1.363 0.582 2.629 1.349 3.767 2.27-0.512 0.704-1.032 1.403-1.555 2.099-0.802 1.066-0.321 2.608 0.946 3.015l5.558 1.785c0.567 1.536 0.906 3.184 0.976 4.901z"
            />
            <path
              fill={iconColor}
              d="M14.89 0.008c0.169-0.005 0.339-0.008 0.509-0.008 1.534 0 3.017 0.218 4.421 0.624l-4.725 6.537c-1.211 1.675-3.098 2.645-5.159 2.648s-3.949-0.956-5.166-2.651l-1.287-1.776c0.971-1.099 2.091-2.063 3.327-2.859l1.565 2.223c0.764 1.085 2.365 1.090 3.135 0.008l3.379-4.747z"
            />
            <path
              fill={iconColor}
              d="M0.145 11.383c0.487-1.624 1.223-3.14 2.165-4.502l4.823 6.663c1.217 1.695 1.548 3.795 0.906 5.745-0.636 1.99-2.137 3.487-4.097 4.124l-2.253 0.733c-0.737-1.249-1.31-2.608-1.689-4.046l2.681-0.912c1.244-0.423 1.711-1.948 0.93-3.009-1.168-1.589-2.318-3.193-3.466-4.797z"
            />
          </>
        )}
      </Svg>
    );
  },
);