import { getShipInfo } from '@/services/controller/DeviceController';
import { ProDescriptions } from '@ant-design/pro-components';
import { Modal } from 'antd';

interface ShipInfoProps {
  isOpen?: boolean;
  setIsOpen: (open: boolean) => void;
}
const ShipInfo: React.FC<ShipInfoProps> = ({ isOpen, setIsOpen }) => {
  const fetchShipData = async () => {
    try {
      const resp = await getShipInfo();
      console.log('Ship Info Response:', resp);
      return resp;
    } catch (error) {
      console.error('Error fetching ship data:', error);
      return {};
    }
  };

  return (
    <Modal
      title="Thông tin tàu"
      open={isOpen}
      onCancel={() => setIsOpen(false)}
      onOk={() => setIsOpen(false)}
    >
      <ProDescriptions<API.ShipDetail>
        column={{
          xs: 1, // mobile
          sm: 2,
          md: 2, // tablet
          lg: 2,
          xl: 2,
        }}
        request={async () => {
          const resp = await fetchShipData();
          console.log('Fetched ship info:', resp);

          return Promise.resolve({
            data: resp,
            success: true,
          });
        }}
        columns={[
          {
            title: 'Tên',
            dataIndex: 'name',
          },
          {
            title: 'IMO',
            dataIndex: 'imo_number',
          },
          {
            title: 'MMSI',
            dataIndex: 'mmsi_number',
          },
          {
            title: 'Số đăng ký',
            dataIndex: 'reg_number',
          },
          {
            title: 'Chiều dài',
            dataIndex: 'ship_length',
            render: (_, record) =>
              record?.ship_length ? `${record.ship_length} m` : '--',
          },
          {
            title: 'Công suất',
            dataIndex: 'ship_power',
            render: (_, record) =>
              record?.ship_power ? `${record.ship_power} kW` : '--',
          },
        ]}
      />
    </Modal>
  );
};

export default ShipInfo;
