import { compileClassNames } from '@zohodesk/utils';
import popupPositionMap from '../popup/__popupstylemapping';
/**
 * container classname based on js state
 * @param {object} props select props
 * @param {object} style select syle
 * @returns {object} object of classnames string with space separate
 */

export default function (props, style) {
  let {
    variant,
    color,
    size,
    active,
    hovered,
    disabled,
    readonly,
    required,
    icon,
    needIconRotate,
    isPopupOpen,
    position
  } = props;
  let selectClassName = compileClassNames({
    [style.base]: true,
    [style.select]: true,
    [style[size]]: !!size,
    [style[variant]]: !!variant,
    [style[color]]: !!color,
    [style.active]: !!active,
    [style.hovered]: !!hovered,
    [style.disabled]: !!disabled,
    [style.readonly]: !!readonly,
    [style.required]: !!required
  });
  let selectIconClassName = compileClassNames({
    [style.icon]: icon,
    [style.rotate]: needIconRotate && isPopupOpen
  });
  let positionStyle = '';

  if (position && popupPositionMap[position]) {
    positionStyle = popupPositionMap[position].positionStyle;
  }

  let listboxClassName = compileClassNames({
    [style[positionStyle]]: true
  });
  return {
    selectClassName,
    selectIconClassName,
    listboxClassName
  };
}