import { ProCard, ProColumns, ProTable } from '@ant-design/pro-components';
import { Form, Modal } from 'antd';

interface HaulFishListProp {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  fishList?: API.FishingLogInfo[];
}

const HaulFishList: React.FC<HaulFishListProp> = ({
  open,
  onOpenChange,
  fishList,
}) => {
  const [form] = Form.useForm();
  const fish_columns: ProColumns<API.FishingLogInfo>[] = [
    {
      title: 'Tên cá',
      dataIndex: 'fish_name',
      key: 'fish_name',
      render: (value) => value, // bạn có thể sửa render để hiển thị tên thiết bị nếu cần
    },
    {
      title: 'Trạng thái',
      dataIndex: 'fish_condition',
      key: 'fish_condition',
      render: (value) => value, // bạn có thể sửa render để hiển thị tên thiết bị nếu cần
    },
    {
      title: 'Độ hiếm',
      dataIndex: 'fish_rarity',
      key: 'fish_rarity',
      render: (value) => value, // bạn có thể sửa render để hiển thị tên thiết bị nếu cần
    },
    {
      title: 'Kích thước (cm)',
      dataIndex: 'fish_size',
      key: 'fish_size',
      render: (value) => value, // bạn có thể sửa render để hiển thị tên thiết bị nếu cần
    },
    {
      title: 'Cân nặng (kg)',
      dataIndex: 'catch_number',
      key: 'catch_number',
      render: (value) => value, // bạn có thể sửa render để hiển thị tên thiết bị nếu cần
    },
    {
      title: 'Ngư cụ sử dụng',
      dataIndex: 'gear_usage',
      key: 'gear_usage',
      render: (value) => value, // bạn có thể sửa render để hiển thị tên thiết bị nếu cần
    },
  ];
  return (
    <Modal
      title="Danh sách cá"
      open={open}
      footer={null}
      closable
      afterClose={() => onOpenChange(false)}
      onCancel={() => onOpenChange(false)}
      width={1000}
    >
      <ProCard split="vertical">
        <ProTable<API.FishingLogInfo>
          columns={fish_columns}
          dataSource={fishList}
          search={false}
          pagination={{
            pageSize: 5,
            showSizeChanger: true,
          }}
          options={false}
          bordered
          size="middle"
          scroll={{ x: 600 }}
        />
      </ProCard>
    </Modal>
  );
};

export default HaulFishList;
