import {
  DeleteOutlined,
  EditOutlined,
  PlusOutlined,
  ReloadOutlined,
} from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Card, Space, Table, theme, Tooltip } from 'antd';
import { useState } from 'react';

interface CameraTableProps {
  cameraData: MasterModel.Camera[] | null;
  onCreateCamera: () => void;
  onEditCamera?: (camera: MasterModel.Camera) => void;
  onDeleteCameras?: (cameraIds: string[]) => void;
  onReload?: () => void;
  loading?: boolean;
  isOnline?: boolean;
}

const CameraTable: React.FC<CameraTableProps> = ({
  cameraData,
  onCreateCamera,
  onEditCamera,
  onDeleteCameras,
  onReload,
  loading = false,
  isOnline = false,
}) => {
  const { token } = theme.useToken();
  const intl = useIntl();
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const handleReload = () => {
    console.log('Reload cameras');
    onReload?.();
  };

  const handleDelete = () => {
    if (selectedRowKeys.length === 0) {
      return;
    }
    onDeleteCameras?.(selectedRowKeys as string[]);
    setSelectedRowKeys([]);
  };

  const handleEdit = (camera: MasterModel.Camera) => {
    onEditCamera?.(camera);
  };

  const columns = [
    {
      title: intl.formatMessage({
        id: 'master.devices.camera.table.column.name',
        defaultMessage: 'Tên',
      }),
      dataIndex: 'name',
      key: 'name',
      render: (text: string) => (
        <a style={{ color: token.colorPrimary }}>{text || '-'}</a>
      ),
    },
    {
      title: intl.formatMessage({
        id: 'master.devices.camera.table.column.type',
        defaultMessage: 'Loại',
      }),
      dataIndex: 'cate_id',
      key: 'cate_id',
      render: (text: string) => text || '-',
    },
    {
      title: intl.formatMessage({
        id: 'master.devices.camera.table.column.ip',
        defaultMessage: 'Địa chỉ IP',
      }),
      dataIndex: 'ip',
      key: 'ip',
      render: (text: string) => text || '-',
    },
    {
      title: intl.formatMessage({
        id: 'master.devices.camera.table.column.action',
        defaultMessage: 'Thao tác',
      }),
      key: 'action',
      render: (_: any, record: MasterModel.Camera) => (
        <Tooltip
          title={
            !isOnline
              ? intl.formatMessage({
                  id: 'master.devices.camera.table.offline.tooltip',
                  defaultMessage: 'Thiết bị đang ngoại tuyến',
                })
              : ''
          }
        >
          <Button
            size="small"
            icon={<EditOutlined />}
            onClick={() => handleEdit(record)}
            disabled={!isOnline}
          />
        </Tooltip>
      ),
    },
  ];

  return (
    <Card bodyStyle={{ padding: 16 }}>
      <Space style={{ marginBottom: 16 }}>
        <Tooltip
          title={
            !isOnline
              ? intl.formatMessage({
                  id: 'master.devices.camera.table.offline.tooltip',
                  defaultMessage: 'Thiết bị đang ngoại tuyến',
                })
              : ''
          }
        >
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={onCreateCamera}
            disabled={!isOnline}
          >
            {intl.formatMessage({
              id: 'master.devices.camera.table.add',
              defaultMessage: 'Tạo mới camera',
            })}
          </Button>
        </Tooltip>
        <Button
          icon={<ReloadOutlined />}
          onClick={handleReload}
          loading={loading}
        />
        <Tooltip
          title={
            !isOnline
              ? intl.formatMessage({
                  id: 'master.devices.camera.table.offline.tooltip',
                  defaultMessage: 'Thiết bị đang ngoại tuyến',
                })
              : ''
          }
        >
          <Button
            icon={<DeleteOutlined />}
            onClick={handleDelete}
            disabled={!isOnline || selectedRowKeys.length === 0}
            danger
          />
        </Tooltip>
      </Space>

      <Table
        dataSource={cameraData || []}
        columns={columns}
        rowKey="id"
        size="small"
        loading={loading}
        rowSelection={{
          type: 'checkbox',
          selectedRowKeys,
          onChange: (newSelectedRowKeys) =>
            setSelectedRowKeys(newSelectedRowKeys),
        }}
        pagination={{
          size: 'small',
          showTotal: (total: number, range: [number, number]) =>
            intl.formatMessage(
              {
                id: 'master.devices.camera.table.pagination',
                defaultMessage: 'Hiển thị {0}-{1} của {2} camera',
              },
              {
                0: range[0],
                1: range[1],
                2: total,
              },
            ),
          pageSize: 10,
        }}
      />
    </Card>
  );
};

export default CameraTable;
