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

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

const HaulFishList: React.FC<HaulFishListProp> = ({
  open,
  onOpenChange,
  fishList,
}) => {
  const intl = useIntl();
  const fish_columns: ProColumns<SgwModel.FishingLogInfo>[] = [
    {
      title: intl.formatMessage({ id: 'trip.haulFishList.fishName' }),
      dataIndex: 'fish_name',
      key: 'fish_name',
      render: (value) => value,
    },
    {
      title: intl.formatMessage({ id: 'trip.haulFishList.fishCondition' }),
      dataIndex: 'fish_condition',
      key: 'fish_condition',
      render: (value) => value,
    },
    {
      title: intl.formatMessage({ id: 'trip.haulFishList.fishRarity' }),
      dataIndex: 'fish_rarity',
      key: 'fish_rarity',
      render: (value) => value,
    },
    {
      title: intl.formatMessage({ id: 'trip.haulFishList.fishSize' }),
      dataIndex: 'fish_size',
      key: 'fish_size',
      render: (value) => value,
    },
    {
      title: intl.formatMessage({ id: 'trip.haulFishList.weight' }),
      dataIndex: 'catch_number',
      key: 'catch_number',
      render: (value) => value,
    },
    {
      title: intl.formatMessage({ id: 'trip.haulFishList.gearUsage' }),
      dataIndex: 'gear_usage',
      key: 'gear_usage',
      render: (value) => value,
    },
  ];
  return (
    <Modal
      title={intl.formatMessage({ id: 'trip.haulFishList.title' })}
      open={open}
      footer={null}
      closable
      afterClose={() => onOpenChange(false)}
      onCancel={() => onOpenChange(false)}
      width={1000}
    >
      <ProCard split="vertical">
        <ProTable<SgwModel.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;
