import React, { useMemo, useCallback } from 'react';
import { Avatar, Dropdown, Button, Menu, Checkbox } from '@txdfe/at';
import './index.scss';

const MemberTypeItem = ({
  data,
  type,
  disabled,
  multiple,
  currentValue,
  customRoles,
  setIndexState,
  onChange,
}) => {
  const key = useMemo(() => `member-type-item-${data._id}`, [data]);
  const isGroup = type === 'group';
  const checked = useMemo(() => {
    return currentValue.some(({ _id }) => _id === data._id);
  }, [currentValue, data]);

  const onSelectItem = useCallback(
    (index) => {
      if (customRoles && customRoles.length) {
        onChange([data], customRoles[index].value);
      } else {
        onChange([data]);
      }
    },
    [customRoles, data, onChange],
  );

  const option = useMemo(() => {
    if (multiple) {
      return null;
    }
    if (!checked) {
      if (customRoles.length) {
        return (
          <Dropdown
            trigger={
              <Button text type="primary">
                添加
              </Button>
            }
            triggerType={['click']}
          >
            <Menu onItemClick={onSelectItem}>
              {customRoles.map((item, index) => (
                <Menu.Item key={index}>{item.label}</Menu.Item>
              ))}
            </Menu>
          </Dropdown>
        );
      }
      return (
        <Button text type="primary" onClick={() => onSelectItem()}>
          添加
        </Button>
      );
    }
    return <span className="uiless-member-added">已加入</span>;
  }, [multiple, checked, customRoles, onSelectItem]);

  const handleCheck = useCallback(() => {
    if (checked) {
      setIndexState(
        'currentValue',
        currentValue.filter(({ _id }) => _id !== data._id),
      );
    } else {
      setIndexState('currentValue', [...currentValue, data]);
    }
  }, [checked, currentValue, data, setIndexState]);

  const optionBefore = useMemo(() => {
    if (!multiple) {
      return null;
    }
    return (
      <Checkbox
        id={key}
        onChange={handleCheck}
        checked={checked}
        disabled={disabled}
      />
    );
  }, [multiple, key, handleCheck, checked, disabled]);

  return (
    <label
      htmlFor={key}
      className={`uiless-member-type-option-item uiless-member-type-option-${type}`}
    >
      {optionBefore}
      {isGroup && (
        <Avatar.ImageAvatar
          className="uiless-member-type-option-item-avatar"
          img={data.logo}
        />
      )}
      <div className="uiless-member-type-option-item-text uiless-text-overflow">
        {data.name}
        <span>{` · ${data.enabledCount || data.memberCount || 0}`}</span>
      </div>
      {option}
    </label>
  );
};

export default MemberTypeItem;