import React, { useMemo } from 'react';
import _ from 'lodash';
import './index.less';

export default function SingleTag(props) {
  let { onSelect, className = '', style, isGroup,prefix, suffix, isActive = false, selectKeys = [], disabled, item, ...params } = props;
  // prettier-ignore
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const flag = useMemo(() => item.children ? _.intersection(selectKeys, item.children.map(v => v.code)).length > 0 : selectKeys.indexOf(item.code) > -1, [item, selectKeys.toString()]);
  const codeStr = useMemo(() => (item.code && item.code.indexOf && item.code.indexOf(',') > -1 ? item.code.split(',').join('-') : item.code), [item.code]);
  const classNameForCode = useMemo(() => `lm-tag-item-${codeStr}`, [codeStr]);
  const isSelectedClass = useMemo(() => (flag || isActive ? `lm-tag-item-selected-${codeStr}` : ''), [codeStr, flag, isActive]);

  return (
    <div
      className={`lm-tag-item ${disabled ? 'lm-tag-item-disabled' : ''} ${className} ${classNameForCode} ${isSelectedClass}`}
      style={style}
      onClick={() => !disabled && !isGroup && onSelect && onSelect(item)}
      {...params}
    >
      <p />
      {prefix}
      {item.label}
      {suffix}

      <style jsx="true">
        {`
          .${classNameForCode} {
            border-color: var(--bd-color);
            color: var(--color-light);
          }
          .${classNameForCode} p {
            border-top-color: var(--bd-color);
            border-left-color: var(--bd-color);
          }
          .${classNameForCode}:not(.lm-tag-item-disabled):hover${isSelectedClass ? ` ,.${isSelectedClass}` : ''} {
            border-color: ${item.tagColor ? item.tagColor : 'var(--primary)'} !important;
            color: ${item.tagColor ? item.tagColor : 'var(--primary)'} !important;
          }
          .${classNameForCode}:not(.lm-tag-item-disabled):hover p${isSelectedClass ? ` ,.${isSelectedClass} p` : ''} {
            border-top-color: ${item.tagColor ? item.tagColor : 'var(--primary)'} !important;
            border-left-color: ${item.tagColor ? item.tagColor : 'var(--primary)'} !important;
          }
        `}
      </style>
    </div>
  );
}
