import { ProColumns, ProTable } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import React from 'react';

interface TripFishingGearTableProps {
  fishingGears: SgwModel.FishingGear[];
}

const TripFishingGearTable: React.FC<TripFishingGearTableProps> = ({
  fishingGears,
}) => {
  const intl = useIntl();
  const fishing_gears_columns: ProColumns<SgwModel.FishingGear>[] = [
    {
      title: (
        <div style={{ textAlign: 'center' }}>
          {intl.formatMessage({ id: 'trip.gear.name' })}
        </div>
      ),
      dataIndex: 'name',
      valueType: 'select',
      align: 'center',
    },
    {
      title: (
        <div style={{ textAlign: 'center' }}>
          {intl.formatMessage({ id: 'trip.gear.quantity' })}
        </div>
      ),
      dataIndex: 'number',
      align: 'center',
    },
  ];

  return (
    <ProTable<SgwModel.FishingGear>
      columns={fishing_gears_columns}
      dataSource={fishingGears}
      search={false}
      pagination={{
        pageSize: 5,
        showSizeChanger: true,
        showTotal: (total, range) =>
          intl.formatMessage(
            { id: 'pagination.total' },
            { start: range[0], end: range[1], total },
          ),
      }}
      options={false}
      // bordered
      size="middle"
      scroll={{ x: '100%' }}
      style={{ flex: 1 }}
    />
  );
};

export default TripFishingGearTable;
