import React from 'react';
import { map } from 'lodash';
import { Badge } from 'antd';
import classNames from '@pansy/classnames';
import SensorIcon from '@sensoro/library/lib/components/sensor-icon';
import { useDeviceDictionary, useDictionary } from '@sensoro/core';
import { getTextByList } from '../../../utils';
import { Table, Tag, Empty } from '@sensoro/sensoro-design';
import { useDeviceService } from '../hooks/useDeviceService';
import { DEVICE_STATUS, DEVICE_NETWORK_STATUS } from '../config';

export interface DeviceListProps {
  className?: string;
  initQuery: {
    category?: string;
    domain: string;
  };
  config: {
    detailUrl:
      | string
      | ((params: {
          id?: number | string;
          sn: string;
          [key: string]: any;
        }) => string);
  };
}
const DeviceList: React.FC<DeviceListProps> = props => {
  const { initQuery, config, className } = props;
  const deviceService = useDeviceService({ initQuery, config });
  const { getModelByType } = useDeviceDictionary();
  const { getDeviceInfoByIds } = useDictionary();
  const categorys = getDeviceInfoByIds(['WATER_QUALITY']);
  const types = categorys?.[0]?.types;

  const columns = [
    {
      title: '设备编号',
      dataIndex: 'sn',
      key: 'sn',
      width: 180,
      fixed: 'left',
      render: (sn: string, record: any) => (
        <a
          onClick={() => {
            deviceService.handleToDetail(record.id, record.sn);
          }}
        >
          {sn}
        </a>
      ),
    },
    {
      title: '设备名称',
      dataIndex: 'name',
      key: 'name',
      width: 200,
      render: (_, record: any) => {
        return record?.deployment?.name;
      },
    },
    {
      title: '设备类型',
      dataIndex: 'category',
      key: 'category',
      width: 100,
      render: (text: string) => <SensorIcon type={text} tooltip />,
      filters: map(categorys, i => {
        return {
          text: i.name,
          value: i.category,
        };
      }),
    },
    {
      title: '设备型号',
      dataIndex: 'type',
      key: 'type',
      width: 100,
      render: (text: string) => {
        return getModelByType(text);
      },
      filters: map(types, i => {
        return {
          text: getModelByType(i),
          value: i,
        };
      }),
    },
    {
      title: '设备状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status: boolean) => (
        <Badge
          color={getTextByList(DEVICE_STATUS, status, {
            label: 'color',
          })}
          text={getTextByList(DEVICE_STATUS, status)}
        />
      ),
      filters: DEVICE_STATUS.map(i => ({
        text: i.label,
        value: i.value,
      })),
    },
    {
      title: '网络状态',
      dataIndex: 'networkStatus',
      key: 'networkStatus',
      width: 100,
      render: (status: string) => (
        <Badge
          color={getTextByList(DEVICE_NETWORK_STATUS, status ? 1 : 0, {
            label: 'color',
          })}
          text={getTextByList(DEVICE_NETWORK_STATUS, status ? 1 : 0)}
        />
      ),
      filterMultiple: false,
      filters: [
        { text: '在线', value: true },
        { text: '离线', value: false },
      ],
    },
    {
      title: '操作',
      dataIndex: 'option',
      key: 'option',
      option: true,
      width: 80,
      fixed: 'right',
      render: (text: string, record: any) => (
        <a
          onClick={() => {
            deviceService.handleToDetail(record.id, record.sn);
          }}
        >
          详情
        </a>
      ),
    },
  ];

  return (
    <Table
      className={classNames(className)}
      title="设备列表"
      dataSource={deviceService.allIds}
      loading={deviceService.loading}
      columns={columns as any}
      rowKey="id"
      scroll={{ x: 1020 }}
      locale={{
        emptyText: (
          <Empty icon="device" description="暂无设备" style={{ padding: 88 }} />
        ),
      }}
      searchProps={{
        placeholder: '请输入设备名称/设备编号查询',
        style: { width: 280 },
      }}
      table={deviceService.table}
    />
  );
};

export default DeviceList;