import React from "react";
import classNames from "classnames";
import { AptibleLogo } from "../AptibleLogo";
import { Flex } from "../Flex";
import { Link, LinkProps } from "../Link";
import { ConveyorLogo } from "../ConveyorLogo";
import { cn } from "./config";
import { useAppbarContext } from "./context";
import { COMPLY_COMPANY_NAME, THEME } from "../../types";

export const AppbarLogo = (props: LinkProps) => {
  const { company } = useAppbarContext();
  const { href, onClick, className, noStyles, ...rest } = props;

  const logo = () => {
    switch (company) {
      case COMPLY_COMPANY_NAME.APTIBLE:
        return <AptibleLogo height={20} />;
      case COMPLY_COMPANY_NAME.CONVEYOR:
        return <ConveyorLogo theme={THEME.BRAND} height={20} />;
      default:
        return <AptibleLogo height={20} />;
    }
  };

  return (
    <Flex className={cn({ e: "logo" })}>
      {href || onClick ? (
        <Link
          className={classNames(cn({ e: "logoLink" }), className)}
          href={href}
          onClick={onClick}
          noStyles
          {...rest}
        >
          {logo()}
        </Link>
      ) : (
        <>{logo()}</>
      )}
    </Flex>
  );
};