import React from 'react';
import Checkbox from '../checkbox';
import Divider from '../divider';
import Icons from '../icons';
import Row from '../row';
import Col from '../col';
import Tooltip from '../tooltip';
import Popover from '../popover';
import Dropdown from '../dropdown';

const { SettingIcon, RefreshIcon, CloseIcon } = Icons;

// 工具栏
const columnSelectorOverlay = (propsWrap = {}) => {
  const {
    overlayTitle = '自定义列表字段',
    colNum = 2,
    ellipsisNum = 9,
    props,
  } = propsWrap;
  const {
    onSelect,
    onVisibleChange,
    prefixCls,
    columns,
    filteredColumnsKeys,
  } = props;
  const trueColNum = Number(colNum);
  const colSpan = Math.floor(24 / trueColNum);
  return (
    <div className={`${prefixCls}-operation-overlay`}>
      <div className={`${prefixCls}-operation-overlay-title`}>
        {overlayTitle}
        <CloseIcon onClick={() => onVisibleChange(false)} />
      </div>
      <Divider style={{ margin: 0, borderColor: '#E9E9E9' }} />
      <div className={`${prefixCls}-operation-overlay-content`}>
        <Checkbox.Group onChange={onSelect} value={filteredColumnsKeys}>
          <Row gutter={[20, 12]}>
            {columns.map(column => (
              <Col span={colSpan}>
                <Checkbox
                  disabled={column.disableSelection === true}
                  value={column.dataIndex}
                >
                  {column.title.length > ellipsisNum ? (
                    <Popover placement="bottomLeft" content={column.title}>
                      {column.title.slice(0, ellipsisNum)}...
                    </Popover>
                  ) : (
                    column.title
                  )}
                </Checkbox>
              </Col>
            ))}
          </Row>
        </Checkbox.Group>
      </div>
    </div>
  );
};

const iconWithTooltip = (propsWrap = {}) => {
  const {
    hoverText,
    iconWithProps,
    props: { prefixCls },
  } = propsWrap;
  const wrappedIcon = icon => (
    <div className={`${prefixCls}-operation`}>{icon}</div>
  );
  return hoverText ? (
    <Tooltip placement="top" title={hoverText}>
      {wrappedIcon(iconWithProps)}
    </Tooltip>
  ) : (
    wrappedIcon(iconWithProps)
  );
};

const getOperationsMap = props => {
  const { onVisibleChange } = props;
  return {
    refreshable: {
      icon: <RefreshIcon />,
      hoverText: '刷新',
      onClick: () => {},
    },
    columnSelector: {
      icon: <SettingIcon />,
      render: ({ icon, renderProps, props }) => {
        const { overlayTitle, colNum, ellipsisNum, ...restProps } = renderProps;
        const { visible = false, onVisibleChange, prefixCls } = props;
        return (
          <Dropdown
            overlay={columnSelectorOverlay({
              overlayTitle,
              colNum,
              ellipsisNum,
              props,
            })}
            placement="bottomRight"
            trigger="click"
            overlayClassName={`${prefixCls}-operation-overlay-wrap`}
            overlayStyle={{ width: 448, zIndex: 0 }}
            onVisibleChange={onVisibleChange}
            visible={visible}
            {...restProps}
          >
            <a>{icon}</a>
          </Dropdown>
        );
      },
      renderProps: {
        overlayTitle: '自定义列表字段',
        colNum: 2,
      },
      hoverText: '设置',
      onClick: () => onVisibleChange(false),
    },
  };
};

export const getOperation = ({ operation, ...props }) => {
  const optKey = Object.keys(operation)[0];
  const optValue = operation[optKey];
  const optMap = getOperationsMap(props);

  // 如果操作按钮为未定义的，直接显示
  if (optMap[optKey]) {
    const operation = { ...optMap[optKey], ...optValue };
    const { icon, hoverText, render, renderProps, ...restProps } = operation;
    const iconWithProps = React.cloneElement(icon, restProps);
    let iconRes = iconWithTooltip({ hoverText, iconWithProps, props });
    if (render) iconRes = render({ icon: iconRes, renderProps, props });
    return iconRes;
  }
  return optValue;
};