import React, { memo, useCallback } from "react";

import classNames from "classnames";

import DropDown from "@enact/sandstone/Dropdown";

import { countryCode } from "../../api/apiConfig";
import useScrollReset from "../../hooks/useScrollReset";
import css from "./TDropDown.module.less";

export default memo(function TDropDown({
  children,
  className,
  color,
  direction = "below",
  onClose,
  onOpen,
  scrollTop,
  selectedIndex,
  size,
  ...rest
}) {
  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);

  const _onOpen = useCallback(() => {
    if (onOpen) {
      onOpen();
    }
  }, [onOpen]);

  const _onClose = useCallback(() => {
    if (onClose) {
      onClose();
    }
  }, [onClose]);

  return (
    <DropDown
      className={classNames(
        css.tDropdown,
        css[size],
        css[color],
        selectedIndex && css.selected,
        className
      )}
      direction={direction}
      selected={selectedIndex}
      onFocus={handleScrollReset}
      onBlur={handleStopScrolling}
      onOpen={_onOpen}
      onClose={_onClose}
      aria-disabled={countryCode && countryCode !== "US"}
      aria-label={children}
      {...rest}
    >
      {children}
    </DropDown>
  );
});
