import { useIntl } from '@umijs/max';
import { Collapse, Flex, Typography } from 'antd';
import { MessageInstance } from 'antd/es/message/interface';
import { GPSParseResult } from '../type';
import { BaseMap } from './BaseMap';
import ShipDetail from './ShipDetail';

const MultipleShips = ({
  things,
  messageApi,
  mapController,
}: {
  things: SgwModel.SgwThing[];
  messageApi: MessageInstance;
  mapController: BaseMap | null;
}) => {
  const intl = useIntl();
  return (
    <Collapse
      bordered={false}
      style={{
        background: 'white',
      }}
      // onChange={handleCollapseChange}
      items={things.map((thing, index) => {
        const gpsData: GPSParseResult = JSON.parse(thing.metadata?.gps || '{}');
        return {
          key: index,
          label: (
            <Flex
              justify="space-between"
              align="center"
              style={{ width: '100%', marginBottom: 10 }}
            >
              <Typography.Text strong>
                {thing.metadata?.ship_name || thing.name}
              </Typography.Text>
              <div style={{ display: 'flex', gap: '10px' }}>
                <Typography.Text strong>
                  ${intl.formatMessage({ id: 'map.ship_detail.speed' })}:{' '}
                  {gpsData.s} km/h
                </Typography.Text>
                <Typography.Text>-</Typography.Text>
                <Typography.Text strong>
                  {intl.formatMessage({ id: 'map.ship_detail.heading' })}:{' '}
                  {gpsData.h}°
                </Typography.Text>
              </div>
            </Flex>
          ),
          children: (
            <ShipDetail
              thing={thing}
              messageApi={messageApi}
              mapController={mapController}
            />
          ),
        };
      })}
    ></Collapse>
  );
};

export default MultipleShips;