import cx from "classnames";
import React from "react";
import { BrandMark } from "./BrandMark";
import {
  CLASS_CONTAINER,
  CLASS_MOBILE,
  CLASS_MOBILE_OVERLAY,
  CLASS_MOBILE_WRAPPER,
  CLASS_NAV_BUTTON,
  CLASS_NAV_DROPDOWN,
  CLASS_NAV_LOGO,
} from "./constants";
import { Logo } from "./Logo";
import { MegamenuIcon } from "./MegaMenuIcon";
import { MegamenuSearchContent } from "./MegamenuSearchContent";

export type MegamenuSearchState = {
  hasSearchEmpty: boolean;
  hasSearchFilled: boolean;
  showSearchState: boolean;
  searchValue: string;
};

type MegamenuLogoLinkProps = {
  compactLogoOnly?: boolean;
  href?: string;
  title: string;
  children?: React.ReactNode;
};

type MegamenuSearchDropdownProps = {
  dropdownId: string;
  inputId: string;
  inputLabel: string;
  searchValue: string;
  hasSearchEmpty: boolean;
  hasSearchFilled: boolean;
  emptyStateLinkHref?: string;
};

type MegamenuCloseButtonProps = {
  ariaLabel: string;
  target: string;
};

type MegamenuMobilePanelProps = {
  titleId: string;
  panelId?: string;
  target: string;
  title: React.ReactNode;
  overlayAriaLabel: string;
  children: React.ReactNode;
};

export const getMegamenuSearchState = (
  searchEmpty?: boolean,
  searchFilled?: boolean,
): MegamenuSearchState => {
  const hasSearchEmpty = Boolean(searchEmpty);
  const hasSearchFilled = Boolean(searchFilled);

  return {
    hasSearchEmpty,
    hasSearchFilled,
    showSearchState: hasSearchEmpty || hasSearchFilled,
    searchValue: hasSearchEmpty ? "" : hasSearchFilled ? "apple" : "",
  };
};

export const MegamenuLogoLink = ({
  compactLogoOnly = false,
  href = "/",
  title,
  children,
}: MegamenuLogoLinkProps) => (
  <a
    href={href}
    className={CLASS_NAV_LOGO}
    aria-label={`${title} - Domovská stránka`}
  >
    {compactLogoOnly ? <Logo /> : <BrandMark />}
    {children}
  </a>
);

export const MegamenuSearchDropdown = ({
  dropdownId,
  inputId,
  inputLabel,
  searchValue,
  hasSearchEmpty,
  hasSearchFilled,
  emptyStateLinkHref,
}: MegamenuSearchDropdownProps) => (
  <div className={cx(CLASS_NAV_DROPDOWN, "is-spaced")} id={dropdownId}>
    <div className={CLASS_CONTAINER}>
      <MegamenuSearchContent
        inputId={inputId}
        inputLabel={inputLabel}
        searchValue={searchValue}
        hasSearchEmpty={hasSearchEmpty}
        hasSearchFilled={hasSearchFilled}
        emptyStateLinkHref={emptyStateLinkHref}
      />
    </div>
  </div>
);

export const MegamenuCloseButton = ({
  ariaLabel,
  target,
}: MegamenuCloseButtonProps) => (
  <button
    type="button"
    data-megamenu-close-button
    data-megamenu-mobile-target={target}
    className={CLASS_NAV_BUTTON}
    aria-label={ariaLabel}
  >
    <MegamenuIcon name="close" width={20} height={20} aria-hidden="true" />
  </button>
);

export const MegamenuMobilePanel = ({
  titleId,
  panelId,
  target,
  title,
  overlayAriaLabel,
  children,
}: MegamenuMobilePanelProps) => (
  <div
    className={CLASS_MOBILE}
    data-megamenu-mobile-panel={target}
    id={panelId}
    role="dialog"
    aria-modal="true"
    aria-labelledby={titleId}
    aria-hidden="true"
  >
    <span id={titleId} className="sr-only">
      {title}
    </span>
    <button
      aria-label={overlayAriaLabel}
      className={CLASS_MOBILE_OVERLAY}
      type="button"
      data-megamenu-close-button
      data-megamenu-mobile-target={target}
    />

    <div className={CLASS_MOBILE_WRAPPER}>{children}</div>
  </div>
);