import React, { FC } from 'react';
import classNames from '@pansy/classnames';
import { Button, Typography } from 'antd';
import { Empty } from '@sensoro/sensoro-design';
import { CloseCircleFilled } from '@ant-design/icons';
import Icon from '@sensoro/library/lib/components/icon-font';
import { DeviceInfo } from '../interface';
import styles from './card.less';
import { iconMap } from '../config';

interface CardProps {
  className?: string;
  devices?: DeviceInfo[];
  deviceKey: string;
  onReset?: () => void;
  onRemove?: (id: string) => void;
}

const { Paragraph } = Typography;

const Card: FC<CardProps> = props => {
  const { className, devices = [], onRemove, onReset, deviceKey } = props;

  const handleReset = () => {
    onReset?.();
  };

  const handleRemove = (id: string) => {
    onRemove?.(id);
  };

  return (
    <div className={classNames(className, styles.card)}>
      <div className={styles.header}>
        <div className={styles.headerContent}>
          <div className={styles.deviceNumber}>{devices.length} 台</div>
          <div style={{ marginLeft: 8 }}>已选择设备</div>
          <div className={styles.headerExtra}>
            <Button
              size="small"
              disabled={!devices.length}
              onClick={handleReset}
            >
              清空
            </Button>
          </div>
        </div>
      </div>
      <div className={styles.body}>
        {devices.map((item, index) => {
          return (
            <div
              key={item[deviceKey] || index}
              className={classNames(styles.item, {
                [`${styles.offline}`]: item.status === 0,
              })}
            >
              <Paragraph ellipsis>
                <Icon type={iconMap[item.deviceUsageType]} />
                <span>{item.name}</span>
              </Paragraph>
              <div
                className={styles.itemExtra}
                onClick={() => {
                  handleRemove(item[deviceKey]);
                }}
              >
                <CloseCircleFilled />
              </div>
            </div>
          );
        })}
        {devices.length === 0 && (
          <Empty
            icon="device"
            description="暂无设备"
            style={{ marginTop: '82px' }}
          />
        )}
      </div>
    </div>
  );
};

export default Card;