import React from 'react';
import styled from 'styled-components';

import type { JSX } from 'react';

import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
import { Button } from '@redocly/theme/components/Button/Button';
import { breakpoints } from '@redocly/theme/core/utils';
import { useProductPicker, useThemeHooks } from '@redocly/theme/core/hooks';
import { Product } from '@redocly/theme/components/Product/Product';
import { CheckmarkIcon } from '@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon';

export function ProductPicker(): JSX.Element | null {
  const { currentProduct, products, setProduct } = useProductPicker();
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

  const productComponents = products.map((product) => {
    return {
      content: <Product product={product} />,
      suffix: product.slug === currentProduct?.slug && <CheckmarkIcon />,
      onAction: () => {
        setProduct(product);
      },
      active: product.slug === currentProduct?.slug,
    };
  });

  return products.length ? (
    <ProductDropdown
      withArrow={true}
      trigger={
        <Button variant="ghost">
          {currentProduct ? (
            <Product product={currentProduct} />
          ) : (
            <span data-translation-key="navbar.products">
              {translate('navbar.products', 'Products')}
            </span>
          )}
        </Button>
      }
      triggerEvent="hover"
    >
      <DropdownMenu items={productComponents} />
    </ProductDropdown>
  ) : null;
}

const ProductDropdown = styled(Dropdown).attrs(() => ({
  dataAttributes: {
    'data-component-name': 'Product/ProductPicker',
  },
}))`
  display: none;
  @media screen and (min-width: ${breakpoints.medium}) {
    display: block;
    height: fit-content;
  }

  --dropdown-menu-item-justify-content: space-between;

  --dropdown-menu-font-size: var(--product-picker-dropdown-font-size);
  --dropdown-menu-font-weight: var(--product-picker-dropdown-font-weight);
  --dropdown-menu-line-height: var(--product-picker-dropdown-line-height);
  --dropdown-menu-text-color: var(--product-picker-dropdown-text-color);
  --dropdown-menu-min-width: var(--product-picker-dropdown-min-width);
  --dropdown-menu-max-width: var(--product-picker-dropdown-max-width);
  --dropdown-menu-max-height: var(--product-picker-dropdown-max-height);
  --dropdown-menu-padding: var(--product-picker-dropdown-padding);
  --dropdown-menu-border-radius: var(--product-picker-dropdown-border-radius);
  --dropdown-menu-box-shadow: var(--product-picker-dropdown-box-shadow);
  --dropdown-menu-border-color: var(--product-picker-dropdow--border-color);
  --dropdown-menu-bg-color: var(--product-picker-dropdown-bg-color);
  --dropdown-menu-item-padding-horizontal: var(--product-picker-dropdown-item-padding-horizontal);
  --dropdown-menu-item-padding-vertical: var(--product-picker-dropdown-item-padding-vertical);
  --dropdown-menu-item-separator-padding-top: var(
    --product-picker-dropdown-item-separator-padding-top
  );
  --dropdown-menu-item-separator-padding-bottom: var(
    --product-picker-dropdown-item-separator-padding-bottom
  );
  --dropdown-menu-item-border-radius: var(--product-picker-dropdown-item-border-radius);
  --dropdown-menu-item-bg-color-active: var(--product-picker-dropdown-item-bg-color-active);
  --dropdown-menu-item-bg-color-hover: var(--product-picker-dropdown-item-bg-color-hover);
  --dropdown-menu-item-bg-color-disabled: var(--product-picker-dropdown-item-bg-color-disabled);
  --dropdown-menu-item-separator-border-color: var(
    --product-picker-dropdown-item-separator-border-color
  );
  --dropdown-menu-item-color-dangerous: var(--product-picker-dropdown-item-color-dangerous);
  --dropdown-menu-item-color-disabled: var(--product-picker-dropdown-item-color-disabled);
  --dropdown-menu-item-color-active: var(--product-picker-dropdown-item-color-active);
  --dropdown-menu-item-color-hover: var(--product-picker-dropdown-item-color-hover);
`;