import { InfoOutlined, WarningOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Collapse, Flex, List, Typography } from 'antd';
import dayjs from 'dayjs';
import { ZoneAlarmParse } from '../type';

interface ShipWarningListProps {
  zoneEnteredList: ZoneAlarmParse[];
  zoneApproachingList: ZoneAlarmParse[];
  selectedZoneId: string | null;
  onZoneButtonClick: (zone: ZoneAlarmParse) => void;
}

const ShipWarningList = ({
  zoneEnteredList,
  zoneApproachingList,
  selectedZoneId,
  onZoneButtonClick,
}: ShipWarningListProps) => {
  const intl = useIntl();
  return (
    <Collapse
      ghost
      defaultActiveKey={
        zoneEnteredList.length > 0 && zoneApproachingList.length === 0
          ? ['1']
          : zoneApproachingList.length > 0 && zoneEnteredList.length === 0
          ? ['2']
          : []
      }
      expandIconPosition="end"
      items={[
        ...(zoneEnteredList.length > 0
          ? [
              {
                key: '1',
                label: (
                  <Flex justify="center">
                    <Typography.Text keyboard type="danger" strong>
                      🚫{' '}
                      {intl.formatMessage({
                        id: 'map.ship_detail.warning_title',
                        defaultMessage: 'Warning',
                      })}
                    </Typography.Text>
                  </Flex>
                ),
                children: (
                  <List
                    size="small"
                    style={{ padding: '10px 0px' }}
                    dataSource={zoneEnteredList}
                    renderItem={(item) => (
                      <List.Item style={{ marginBottom: 4 }}>
                        <List.Item.Meta
                          title={`${item.zone_name} - ${item.message}`}
                          description={`${intl.formatMessage({
                            id: 'map.ship_detail.speed',
                            defaultMessage: 'Speed',
                          })}: ${item.s}km/h - ${intl.formatMessage({
                            id: 'map.ship_detail.heading',
                            defaultMessage: 'Heading',
                          })}: ${item.h}° - ${intl.formatMessage({
                            id: 'map.ship_detail.trip_departure_time',
                            defaultMessage: 'Time',
                          })}: ${dayjs
                            .unix(item?.gps_time || 0)
                            .format('YYYY-MM-DD HH:mm:ss')}`}
                        />
                        <Button
                          size="small"
                          shape="circle"
                          type="default"
                          style={{
                            backgroundColor:
                              selectedZoneId === item.zone_id
                                ? '#DC143C'
                                : undefined,
                            color:
                              selectedZoneId === item.zone_id
                                ? '#fff'
                                : undefined,
                            borderColor:
                              selectedZoneId === item.zone_id
                                ? '#DC143C'
                                : undefined,
                          }}
                          onClick={() => onZoneButtonClick(item)}
                          icon={<WarningOutlined />}
                        />
                      </List.Item>
                    )}
                  />
                ),
              },
            ]
          : []),
        ...(zoneApproachingList.length > 0
          ? [
              {
                key: '2',
                label: (
                  <Flex justify="center">
                    <Typography.Text keyboard type="warning" strong>
                      ⚠️{' '}
                      {intl.formatMessage({
                        id: 'map.ship_detail.approaching_title',
                        defaultMessage: 'Approaching Restricted Area',
                      })}
                    </Typography.Text>
                  </Flex>
                ),
                children: (
                  <List
                    size="small"
                    style={{ padding: '10px 0px' }}
                    dataSource={zoneApproachingList}
                    renderItem={(item) => (
                      <List.Item style={{ marginBottom: 4 }}>
                        <List.Item.Meta
                          title={`${item.zone_name} - ${item.message}`}
                          description={`${intl.formatMessage({
                            id: 'map.ship_detail.speed',
                            defaultMessage: 'Speed',
                          })}: ${item.s}km/h - ${intl.formatMessage({
                            id: 'map.ship_detail.heading',
                            defaultMessage: 'Heading',
                          })}: ${item.h}° - ${intl.formatMessage({
                            id: 'map.ship_detail.trip_departure_time',
                            defaultMessage: 'Time',
                          })}: ${dayjs
                            .unix(item?.gps_time || 0)
                            .format('YYYY-MM-DD HH:mm:ss')}`}
                        />
                        <Button
                          size="small"
                          shape="circle"
                          type="default"
                          style={{
                            backgroundColor:
                              selectedZoneId === item.zone_id
                                ? '#FF714B'
                                : undefined,
                            color:
                              selectedZoneId === item.zone_id
                                ? '#fff'
                                : undefined,
                            borderColor:
                              selectedZoneId === item.zone_id
                                ? '#FF714B'
                                : undefined,
                          }}
                          onClick={() => onZoneButtonClick(item)}
                          icon={<InfoOutlined />}
                        />
                      </List.Item>
                    )}
                  />
                ),
              },
            ]
          : []),
      ]}
    />
  );
};

export default ShipWarningList;
