import { ProDescriptions } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Flex, Image } from 'antd';
import { ShipDetailData } from '../type';

interface ShipBasicInfoProps {
  ship: ShipDetailData | null;
  shipImage: string;
  thing: SgwModel.SgwThing;
}

const ShipBasicInfo = ({ ship, shipImage, thing }: ShipBasicInfoProps) => {
  const intl = useIntl();
  return (
    <Flex
      gap="middle"
      style={{
        flexDirection: window.innerWidth <= 768 ? 'column' : 'row',
        alignItems: window.innerWidth <= 768 ? 'center' : 'flex-start',
      }}
    >
      <div
        style={{
          width: window.innerWidth <= 768 ? '100%' : '30%',
          maxWidth: '300px',
          margin: window.innerWidth <= 768 ? '0 auto' : '0',
        }}
      >
        <Image
          src={shipImage}
          style={{ borderRadius: '8px', objectFit: 'cover' }}
          width="100%"
          height="120px"
          alt="Ảnh tàu"
          preview={false}
          onError={(e) => {
            (e.target as HTMLImageElement).src =
              'https://1.semantic-ui.com/images/wireframe/image.png';
          }}
        />
      </div>
      {/* Thông tin cơ bản */}
      <div
        style={{
          width: window.innerWidth <= 768 ? '100%' : '70%',
        }}
      >
        <ProDescriptions
          size="small"
          column={2}
          styles={{
            title: {
              marginBottom: -10,
              textAlign: 'center',
              fontSize: window.innerWidth <= 576 ? '14px' : '16px',
            },
            content: { paddingBottom: 1 },
            label: { paddingBottom: 1 },
          }}
        >
          <ProDescriptions.Item
            label={intl.formatMessage({
              id: 'map.filter.ship_name',
              defaultMessage: 'Ship Name',
            })}
          >
            {ship?.ship?.name || '-'}
          </ProDescriptions.Item>
          <ProDescriptions.Item
            label={intl.formatMessage({
              id: 'map.ship_detail.port_register',
              defaultMessage: 'Port Register',
            })}
          >
            {ship?.ship?.metadata?.home_port || '-'}
          </ProDescriptions.Item>
          <ProDescriptions.Item
            label={intl.formatMessage({
              id: 'map.ship_detail.speed',
              defaultMessage: 'Speed',
            })}
          >
            {ship?.gps?.s || '-'} km/h
          </ProDescriptions.Item>
          <ProDescriptions.Item
            label={intl.formatMessage({
              id: 'map.ship_detail.heading',
              defaultMessage: 'Heading',
            })}
          >
            {ship?.gps?.h || '-'}°
          </ProDescriptions.Item>
          <ProDescriptions.Item
            label={intl.formatMessage({
              id: 'map.ship_detail.status',
              defaultMessage: 'Status',
            })}
            span={3}
          >
            {ship?.gps?.fishing ? 'Đang đánh bắt' : 'Chưa đánh bắt'}
          </ProDescriptions.Item>
          <ProDescriptions.Item
            valueType="fromNow"
            label={intl.formatMessage({
              id: 'map.ship_detail.updated',
              defaultMessage: 'Updated',
            })}
          >
            {thing.metadata?.updated_time
              ? thing.metadata?.updated_time * 1000
              : '-'}
          </ProDescriptions.Item>
        </ProDescriptions>
      </div>
    </Flex>
  );
};

export default ShipBasicInfo;
