import { formatDate } from '@/utils/slave/sgw/timeUtils';
import { getTripState } from '@/utils/slave/sgw/tripUtils';
import { ProDescriptions } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { ShipDetailData } from '../type';

interface ShipSpecificationTabProps {
  ship: ShipDetailData | null;
}

export const ShipSpecificationTab = ({ ship }: ShipSpecificationTabProps) => {
  const intl = useIntl();
  return (
    <ProDescriptions
      styles={{
        title: {
          marginBottom: -16,
          textAlign: 'center',
          marginTop: 10,
          fontSize: window.innerWidth <= 576 ? '14px' : '16px',
        },
        content: { paddingBottom: 1 },
        label: { paddingBottom: 1 },
      }}
      dataSource={{
        reg_number: ship?.ship?.reg_number || '-',
        imo_number: ship?.ship?.imo_number || '-',
        mmsi_number: ship?.ship?.mmsi_number || '-',
        ship_owner: ship?.owner?.metadata?.full_name || '-',
        ship_type: ship?.ship?.metadata?.ship_type || '-',
        ship_length: ship?.ship?.ship_length || '-',
        power_kw: ship?.ship?.ship_power ?? '-',
        fishing_license_number: ship?.ship?.fishing_license_number || '-',
        fishing_license_expiry_date:
          formatDate(ship?.ship?.fishing_license_expiry_date || '') ?? '-',
      }}
      column={{ xs: 1, sm: 2, md: 3 }}
      columns={[
        {
          title: intl.formatMessage({
            id: 'map.ship_detail.reg_number',
            defaultMessage: 'Registration Number',
          }),
          key: 'reg_number',
          dataIndex: 'reg_number',
          copyable: true,
          ellipsis: true,
        },
        {
          title: intl.formatMessage({
            id: 'map.ship_detail.imo_number',
            defaultMessage: 'IMO Number',
          }),
          key: 'imo_number',
          dataIndex: 'imo_number',
          copyable: true,
        },
        {
          title: intl.formatMessage({
            id: 'map.ship_detail.mmsi_number',
            defaultMessage: 'MMSI Number',
          }),
          key: 'mmsi_number',
          dataIndex: 'mmsi_number',
          copyable: true,
        },
        {
          title: intl.formatMessage({
            id: 'map.ship_detail.ship_owner',
            defaultMessage: 'Ship Owner',
          }),
          key: 'ship_owner',
          dataIndex: 'ship_owner',
        },
        {
          title: intl.formatMessage({
            id: 'map.filter.ship_type',
            defaultMessage: 'Ship Type',
          }),
          key: 'ship_type',
          dataIndex: 'ship_type',
        },
        {
          title: intl.formatMessage({
            id: 'map.filter.ship_power',
            defaultMessage: 'Power (kW)',
          }),
          key: 'power_kw',
          dataIndex: 'power_kw',
          render: (text) => `${text} kw`,
        },
        {
          title: intl.formatMessage({
            id: 'map.filter.ship_length',
            defaultMessage: 'Ship Length (m)',
          }),
          key: 'ship_length',
          dataIndex: 'ship_length',
          render: (text) => `${text} m`,
        },
        {
          title: intl.formatMessage({
            id: 'map.ship_detail.fishing_license',
            defaultMessage: 'Fishing License',
          }),
          tooltip: intl.formatMessage({
            id: 'map.ship_detail.fishing_license_number',
            defaultMessage: 'Fishing License Number',
          }),
          key: 'fishing_license_number',
          dataIndex: 'fishing_license_number',
        },
        {
          title: intl.formatMessage({
            id: 'map.ship_detail.fishing_license_expiry',
            defaultMessage: 'Expiry',
          }),
          tooltip: intl.formatMessage({
            id: 'map.ship_detail.fishing_license_expiry_message',
            defaultMessage: 'Fishing License Expiration Date',
          }),
          key: 'fishing_license_expiry_date',
          dataIndex: 'fishing_license_expiry_date',
        },
      ]}
    />
  );
};

export const ShipTripInfoTab = ({ ship }: ShipSpecificationTabProps) => {
  const intl = useIntl();
  return (
    <>
      <ProDescriptions
        styles={{
          title: {
            marginBottom: -16,
            textAlign: 'center',
            fontSize: window.innerWidth <= 576 ? '14px' : '16px',
          },
          content: { paddingBottom: 1 },
          label: { paddingBottom: 1 },
        }}
      />
      <ProDescriptions column={2} style={{ marginBottom: 10 }}>
        <ProDescriptions.Item
          label={intl.formatMessage({
            id: 'map.ship_detail.trip_name',
            defaultMessage: 'Trip Name',
          })}
        >
          {ship?.ship?.metadata?.trip_name || '-'}
        </ProDescriptions.Item>
        <ProDescriptions.Item
          label={intl.formatMessage({
            id: 'map.ship_detail.trip_state',
            defaultMessage: 'Status',
          })}
        >
          {getTripState(ship?.ship?.metadata?.trip_state) || '-'}
        </ProDescriptions.Item>
      </ProDescriptions>

      {/* Hàng 2 + Hàng 3 */}
      <ProDescriptions column={3} style={{ marginBottom: 10 }}>
        <ProDescriptions.Item
          label={intl.formatMessage({
            id: 'map.ship_detail.captain',
            defaultMessage: 'Captain',
          })}
          valueType={'text'}
        >
          {/* {ship?.ship?.metadata?.captain ?? '-'} */} -
        </ProDescriptions.Item>
        <ProDescriptions.Item
          ellipsis
          style={{ maxWidth: 200 }}
          tooltip={intl.formatMessage({
            id: 'map.ship_detail.trip_departure_port_tooltip',
            defaultMessage: 'Departure Port',
          })}
          label={intl.formatMessage({
            id: 'map.ship_detail.trip_departure_port',
            defaultMessage: 'Departure Port',
          })}
        >
          {ship?.ship?.metadata?.trip_depart_port || '-'}
        </ProDescriptions.Item>
        <ProDescriptions.Item
          tooltip={intl.formatMessage({
            id: 'map.ship_detail.trip_departure_time_tooltip',
            defaultMessage: 'Departure Time',
          })}
          label={intl.formatMessage({
            id: 'map.ship_detail.trip_departure_time',
            defaultMessage: 'Departure Time',
          })}
        >
          {ship?.ship?.metadata?.trip_departure_time
            ? formatDate(ship?.ship?.metadata?.trip_departure_time)
            : '-'}
        </ProDescriptions.Item>
        <ProDescriptions.Item
          label={intl.formatMessage({
            id: 'map.ship_detail.trip_crews',
            defaultMessage: 'Crews',
          })}
          valueType={'text'}
        >
          {ship?.ship?.metadata?.crew_count ?? '-'} người
        </ProDescriptions.Item>
        <ProDescriptions.Item
          ellipsis
          style={{ maxWidth: 200 }}
          tooltip={intl.formatMessage({
            id: 'map.ship_detail.trip_arrival_port_tooltip',
            defaultMessage: 'Arrival Port',
          })}
          label={`${intl.formatMessage({
            id: 'map.ship_detail.trip_arrival_port',
            defaultMessage: 'Arrival Port',
          })} ${
            ship?.ship.metadata?.trip_state !== 4
              ? `(${intl.formatMessage({
                  id: 'map.ship_detail.trip_estimated',
                  defaultMessage: 'Estimated',
                })})`
              : ''
          }`}
        >
          {ship?.ship?.metadata?.trip_arrival_port || '-'}
        </ProDescriptions.Item>
        <ProDescriptions.Item
          ellipsis
          style={{ maxWidth: 200 }}
          tooltip={intl.formatMessage({
            id: 'map.ship_detail.trip_arrival_time_tooltip',
            defaultMessage: 'Arrival Time',
          })}
          label={`${intl.formatMessage({
            id: 'map.ship_detail.trip_arrival_time',
            defaultMessage: 'Arrival Time',
          })} ${
            ship?.ship.metadata?.trip_state !== 4
              ? `(${intl.formatMessage({
                  id: 'map.ship_detail.trip_estimated',
                  defaultMessage: 'Estimated',
                })})`
              : ''
          }`}
        >
          {ship?.ship?.metadata?.trip_arrival_time
            ? formatDate(ship?.ship?.metadata?.trip_arrival_time)
            : '-'}
        </ProDescriptions.Item>
      </ProDescriptions>
    </>
  );
};