import React, { memo, useMemo } from 'react';
import './index.scss';

interface SpreadSelectionProps {
  sectionList: string;
  onChange: (e: React.MouseEvent, current: string, isClear: boolean) => void;
}

const SpreadSelection: React.FC<SpreadSelectionProps> = memo(({
  sectionList,
  onChange
}) => {
  if (!sectionList) return null;

  const selectionList = useMemo(() => {
    return sectionList.split(',')
  }, [sectionList])

  return (
    <div className="lion-table--section">
      <div className="section-count">已选条目：</div>
      <div className="section-list">
        {
          selectionList.map((sectionItem: string, index: number) => {
            return <div key={index} className="section-item">
              <span onClick={(e: React.MouseEvent) => { onChange(e, sectionItem, false) }} className="section-item--remove">×</span>
              <span className="section-item--value">{sectionItem}</span>
            </div>
          })
        }
      </div>
      <div className="section-clear" onClick={(e: React.MouseEvent) => { onChange(e, '', true) }}>清空</div>
    </div>
  )
})

export default SpreadSelection