import React, { useMemo } from 'react';
import { Loading } from '@alifd/next';
import { Form, Button } from '@alifd/meet-react';
import {
  ICardItemProps,
  ICardItem,
  ISimpleCardTableMobileProps,
  ESimpleCardTableColumnType,
  getSimpleCardTypeArray,
} from './type';
import Action from '../Action';
import { fetchDataByPath } from '../../utils';
import cn from 'classnames';
import './index.scss';

// 操作列标识 data: '_action'
// const ActionKey = '_action';

const typeArray = getSimpleCardTypeArray();

// 渲染kv
function renderContent(content, editable) {
  if (!content || content.length === 0) return null;

  const renderEdit = (
    <Form labelAlign="inset" contentAlign="right">
      {content.map((item) => {
        const { label, value, isLabel } = item;
        return <Form.Item label={isLabel ? label : ''}>{value}</Form.Item>;
      })}
    </Form>
  );

  const renderView = content.map((item) => {
    const { label, value } = item;
    return (
      <div className="oc-card-content-item">
        <label>{label}:</label>
        <span>{value}</span>
      </div>
    );
  });

  return <div className="oc-card-content">{editable ? renderEdit : renderView}</div>;
}

/**
 * 编辑态操作区
 * title: '新增',
   type: 'primary',
   icon: 'add',
   onClick: () => console.log('新增操作'),
 */
function EditAction(props) {
  const { actionColumns, index: dsIndex, record, className } = props;
  const filterHiddenColumns = (actions) => {
    if (!actions) return [];
    return actions.filter((item) => {
      const { hidden = () => {} } = item;
      return !hidden({ value: undefined, index: dsIndex, record });
    });
  };

  const columns = filterHiddenColumns(actionColumns).reverse();

  return (
    <div className={cn(className)}>
      {columns.map((col) => {
        const { title, ...more } = col;
        return (
          <Button className="oc-action-btn" model="text" {...more}>
            {title}
          </Button>
        );
      })}
    </div>
  );
}

// 渲染单个卡片
function CardItem(props: ICardItemProps) {
  const { data, record, index, actionColumn, onRowClick, editable } = props;
  const content = data[ESimpleCardTableColumnType.Content];
  const renderActionColumn = !!(actionColumn && actionColumn.length);

  const noHeader =
    !data[ESimpleCardTableColumnType.Title] &&
    !data[ESimpleCardTableColumnType.SubTitle] &&
    !data[ESimpleCardTableColumnType.Type] &&
    !data[ESimpleCardTableColumnType.Tag];

  return (
    <div className="oc-card-item" onClick={onRowClick}>
      {!noHeader && (
        <div className="oc-card-header">
          <div className="oc-card-header-left">
            <h4 className="oc-title">{data[ESimpleCardTableColumnType.Title]}</h4>
            <span className="oc-sub-title">{data[ESimpleCardTableColumnType.SubTitle]}</span>
          </div>
          <div className={cn({ 'oc-card-header-right': true, 'oc-card-header-action-space': renderActionColumn })}>
            <span className="oc-type">{data[ESimpleCardTableColumnType.Type]}</span>
            <span className="oc-tag">{data[ESimpleCardTableColumnType.Tag]}</span>
          </div>
        </div>
      )}

      {data[ESimpleCardTableColumnType.Desc] && (
        <div className="oc-card-desc">{data[ESimpleCardTableColumnType.Desc]}</div>
      )}
      {renderContent(content, editable)}

      {renderActionColumn &&
        (editable ? (
          <EditAction className="oc-edit-action" actionColumns={actionColumn} record={record} index={index} />
        ) : (
          <Action className="oc-card-action" actionColumns={actionColumn} record={record} index={index} />
        ))}
    </div>
  );
}

// 获取渲染item的value， 可能是value，可能是cell自定义
const getDsValue = (item, dataIndex, index, cell) => {
  const realValue = fetchDataByPath(item, dataIndex);
  return cell && typeof cell === 'function' ? cell(realValue, index, item) : realValue;
};

// 转换成卡片识别的格式
const transferData = (columns, ds): ICardItem[] => {
  if (!columns || !ds) return [];
  const typeMap = columns.reduce((total, item) => {
    const { title, type, dataIndex, cell, isLabel = true } = item;
    if (type && typeArray.includes(type) && dataIndex) {
      if (!total[ESimpleCardTableColumnType.Content]) {
        total[ESimpleCardTableColumnType.Content] = [];
      }

      const dataItem = {
        title,
        dataIndex,
        cell,
        isLabel,
      };
      if (type === ESimpleCardTableColumnType.Content) {
        total[ESimpleCardTableColumnType.Content].push(dataItem);
      } else {
        total[type] = dataItem;
      }
    }
    return total;
  }, {});

  return ds.map((item, idx) => {
    const resultItem = {};
    for (const key in typeMap) {
      if (key === ESimpleCardTableColumnType.Content) {
        if (!resultItem[key]) {
          resultItem[key] = [];
        }
        typeMap[key].forEach((contentItemMap) => {
          const { dataIndex, cell, title, isLabel } = contentItemMap;
          resultItem[key].push({
            label: title,
            value: getDsValue(item, dataIndex, idx, cell),
            isLabel: isLabel,
          });
        });
      } else {
        const { dataIndex, cell } = typeMap[key];
        resultItem[key] = getDsValue(item, dataIndex, idx, cell);
      }
    }
    return {
      item,
      index: idx,
      map: resultItem,
    };
  });
};

// 填充columns的type属性
const fillColumnType = (columns) => {
  if (!columns) return [];
  return columns.map((item) => ({
    ...item,
    type: item.type || ESimpleCardTableColumnType.Content,
  }));
};

// 拆分出actionCol 和 正常col
// const splitActionAndColumns = (columns) => {
//   const result = {
//     action: [],
//     realColumns: [],
//   };
//   if (!columns) return result;
//   result.realColumns = columns.filter((item) => {
//     if (item.data === ActionKey) {
//       result.action.push(item);
//       return false;
//     }
//     return true;
//   });
//   return result;
// };

function SimpleCardTableMobile(props: ISimpleCardTableMobileProps) {
  const {
    columns,
    dataSource,
    actionColumn,
    className,
    onRowClick = () => {},
    loading = false,
    editable = false,
  } = props;

  console.log('props: ', props);

  // const { action, realColumns } = splitActionAndColumns(columns);

  const cardDatas = useMemo(() => {
    return transferData(fillColumnType(columns), dataSource);
  }, [columns, dataSource]);

  return (
    <Loading fullScreen visible={loading}>
      <div className={cn('oc-card-container', className)}>
        {cardDatas.map((card) => {
          const { map, item, index } = card;
          return (
            <CardItem
              data={map}
              actionColumn={actionColumn}
              record={item}
              index={index}
              onRowClick={(e) => onRowClick(item, index, e)}
              editable={editable}
            />
          );
        })}
      </div>
    </Loading>
  );
}

export default SimpleCardTableMobile;