import React, { useState, useMemo } from 'react';
import _ from 'lodash';
import { Popover, Checkbox } from 'antd';
import './index.less';
import IconFont from '../../../themeComponents/IconFont';

export function SingleTag(props) {
  let { onSelect, className = '', style, isGroup, 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 />
      {item.label}
      {suffix}

      <style jsx="true">
        {`
          .${classNameForCode} {
            border-color: var(--bg-lv2);
            color: var(--text-light);
          }
          .${classNameForCode} p {
            border-top-color: var(--bg-lv2);
            border-left-color: var(--bg-lv2);
          }
          .${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>
  );
}

export function MutipleTag(props) {
  let { onSelect, item, style, selectKeys, isActive, isMultiple = true, disabled } = props;
  const RenderComponent = useMemo(() => (isMultiple ? MutipleGroupTagContent : SingleGroupTagContent), [isMultiple]);
  const [visible, setVisible] = useState(false);
  function visibleChange(flag) {
    setVisible(flag);
  }
  return (
    <Popover
      placement="bottom"
      trigger="click"
      overlayClassName="mutiple-tag-popover-box"
      onVisibleChange={visibleChange}
      content={<RenderComponent onSelect={onSelect} group={item.children} selectKeys={selectKeys} disabled={disabled} />}
    >
      <SingleTag
        item={item}
        style={style}
        isActive={isActive}
        disabled={disabled}
        isGroup={true}
        selectKeys={selectKeys}
        suffix={<IconFont className={`tag-popup-allow ${visible ? 'tag-popup-allow-open' : ''}`} type="icon-S_Arrow_SmallDown"></IconFont>}
      ></SingleTag>
    </Popover>
  );
}

function SingleGroupTagContent({ group = [], onSelect, disabled, selectKeys = [] }) {
  return (
    <ul className="mutiple-tag-group">
      {group.map(v => (
        <li
          key={v.code}
          className={`${disabled ? 'lm-tag-item-disabled' : ''} ${selectKeys.indexOf(v.code) > -1 ? 'tag-group-item-active' : ''}`}
          onClick={e => {
            e.preventDefault();
            e.stopPropagation();
            !disabled && onSelect(v, group);
          }}
        >
          {/* <IconFont type={v.icon}></IconFont> */}
          <span className="lm-c-tag-label">{v.label}</span>
        </li>
      ))}
    </ul>
  );
}

function MutipleGroupTagContent({ group = [], onSelect, disabled, selectKeys = [] }) {
  return (
    <ul className="mutiple-tag-group mutiple-check-tag-group">
      {group.map(v => {
        const isActive = selectKeys.indexOf(v.code) > -1;
        return (
          <li
            key={v.code}
            className={`${disabled ? 'lm-tag-item-disabled' : ''} ${isActive ? 'tag-group-item-active' : ''}`}
            onClick={e => {
              e.preventDefault();
              e.stopPropagation();
              !disabled && onSelect(v);
            }}
          >
            <Checkbox disabled={disabled} checked={isActive}></Checkbox>
            <span className="lm-c-tag-label">{v.label}</span>
          </li>
        );
      })}
    </ul>
  );
}
