import React, { useMemo } from "react";
import cn from "classnames";
import { uniqueId } from "lodash";
import Icon, { IIconProps } from "../icon/icon";
import DropdownItem, { IDropdownItemProps } from "../dropdown/dropdown-item";

interface ISelectItem extends IDropdownItemProps {
  icon?: IIconProps;
  onClick?: () => void;
}

const MultiSelectItem: React.FC<ISelectItem> = props => {
  const { icon, className, children, onClick, isActive, isDisabled, ...rest } = props;
  const id = useMemo(() => {
    return uniqueId("select-item-");
  }, []);

  return (
    <DropdownItem
      as="span"
      className={cn(className, "d-flex", "align-items-center", "cursor-pointer")}
      {...rest}
    >
      <>
        <div className="form-check mr-2">
          <input
            type="checkbox"
            className="form-check-input"
            id={id}
            checked={isActive}
            disabled={isDisabled}
            onChange={onClick}
          />
          {/*eslint-disable jsx-a11y/label-has-associated-control */}
          <label className="form-check-label" htmlFor={id} />
        </div>

        {icon ? <Icon {...icon} size={icon.size || "sm"} className="mr-3 flex-shrink-0" /> : null}

        <label className="mb-0 d-block w-100 text-truncate" htmlFor={id}>
          {children}
        </label>
      </>
    </DropdownItem>
  );
};

MultiSelectItem.displayName = "MultiSelectItem";
MultiSelectItem.defaultProps = {};

export default MultiSelectItem;