import React, { useEffect, useState } from 'react';

import TouchBarPicture from '../../media/TouchBarPicture';
import EventInfoCard from '../components/EventInfoCard';
import IOCVideo from '../components/IOCVideo';
import PersonCard from '../components/PersonCard';
import PersonCompare from '../components/PersonCompare';
import Title from '../components/Title';
import { fetchEventDetail } from '../services';
import EventWebSocket from './EventWebSocket';
import { Container } from './styled';

interface EventDetailLeftPanelProps {
  id: string;
  apiEnv: string;
  eventId?: string;
  cameraVideoPrefix?: string;
  size: {
    width: number;
    height: number;
  };
}

export const EVENT_STATUS_MAP: Record<string, any> = {
  '0': '未处理',
  '1': '处理中',
  '2': '已完成',
};

const EventTypeImgMap: Record<string, any> = {
  FireControlAlarm:
    'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/6b70185a-27fe-4f7e-bca0-1887324afa19.png',
  ManholeCoverTilt:
    'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/39ce2ffc-639a-4b53-b660-3fd34c8e921a.png',
  ChargingPileOverload:
    'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/40f7e56b-afb8-4a9f-8d18-8ce603db3886.png',
};

/**
 * 左侧事件详情面板
 * @param props
 */
const EventDetailLeftPanel = (props: EventDetailLeftPanelProps) => {
  const {
    id,
    apiEnv = 'dev',
    cameraVideoPrefix,
    eventId: receivedEventId,
    size: { width, height },
  } = props;

  const [refreshKey, setRefreshKey] = useState('-1');
  const [eventId, setEventId] = useState(receivedEventId);
  const [townId, setTownId] = useState('');
  const [dataSource, setDataSource] = useState<Record<string, any>>({});

  useEffect(() => {
    setRefreshKey(Date.now().toString());
  }, [height]);

  useEffect(() => {
    setEventId(receivedEventId);
  }, [receivedEventId]);

  const fetchData = async () => {
    try {
      const res: Record<string, any> = await fetchEventDetail({
        env: apiEnv,
        eventRecordId: eventId,
      });
      if (res && res.errorCode === 0) {
        setDataSource(res.data);
      }
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    if (!eventId || !apiEnv) {
      return;
    }

    fetchData();
  }, [eventId, apiEnv]);

  useEffect(() => {
    if (!id) {
      return;
    }
    function handleUpdateById(e: any) {
      try {
        const result = e.detail;
        if (result && result.id) {
          setEventId(result.id);
        }
        if (result && result.townId) {
          setTownId(result.townId);
        }
      } catch (error) {
        console.error(error);
      }
    }
    document.addEventListener(
      `edata-${id}-biz-event-detail-updateById`,
      handleUpdateById,
    );

    return () => {
      if (!id) {
        return;
      }
      document.removeEventListener(
        `edata-${id}-biz-event-detail-updateById`,
        handleUpdateById,
      );
    };
  }, [id]);

  function handleReceiveMessage(msg: Record<string, any>) {
    if (msg && msg.eventId === eventId) {
      fetchData();
    }
  }

  return (
    <Container style={{ width, height }} key={refreshKey}>
      <Title title="事件信息" />
      <EventInfoCard data={dataSource}>
        <EventInfoCard.Item name="eventCategoryName" label="事件类型" />
        <EventInfoCard.Item name="abnormalInfo" label="事件名称" />
        <EventInfoCard.Item
          name="eventGrade"
          label="事件等级"
          render={(field: string, dataRecord: Record<string, any>) =>
            dataRecord[field] === 1
              ? '一般'
              : dataRecord[field] === 2
              ? '重要'
              : '紧急'
          }
        />
        <EventInfoCard.Item name="time" label="事发时间" />
        <EventInfoCard.Item name="position" label="事发地点" />
        <EventInfoCard.Item
          name="eventStatus"
          label="处理状态"
          render={(field: string, dataRecord: Record<string, any>) =>
            EVENT_STATUS_MAP[dataRecord[field]] || '未知状态'
          }
        />
      </EventInfoCard>
      <Title title="事件情况" />
      {/* 情况一 实时画面、事件抓拍照 */}
      {dataSource.situationEnum === 'LiveVideo_EventPic' ? (
        <>
          {dataSource.realTimeVideoUrl ? (
            <>
              <Title.SubTitle title="实时画面" />
              <div className="mb36">
                <IOCVideo
                  url={dataSource.realTimeVideoUrl}
                  size={{ width: 372, height: 230 }}
                  cameraVideoPrefix={cameraVideoPrefix}
                />
              </div>
            </>
          ) : null}
          <Title.SubTitle title="现场照片" />
          <TouchBarPicture img={dataSource.eventPicUrl} />
        </>
      ) : null}
      {/* 情况二 现场照片(抓拍照)  */}
      {dataSource.situationEnum === 'EventPic' ? (
        <>
          <Title.SubTitle title="现场照片" />
          <TouchBarPicture
            img={
              EventTypeImgMap[dataSource.eventType] || dataSource.eventPicUrl
            }
          />
        </>
      ) : null}
      {/* 情况三 实时画面、人脸对比信息、事件抓拍照 */}
      {dataSource.situationEnum === 'LiveVideo_EventPic_FaceCompare' ? (
        <>
          <Title.SubTitle title="实时画面" />
          <div className="mb36">
            <IOCVideo
              url={dataSource.realTimeVideoUrl}
              size={{ width: 372, height: 230 }}
              cameraVideoPrefix={cameraVideoPrefix}
            />
          </div>
          <Title.SubTitle title="人员信息" />
          <PersonCompare data={dataSource} />
        </>
      ) : null}
      {/* 情况四 业主信息 */}
      {dataSource.situationEnum === 'Owner' ? (
        <>
          <Title.SubTitle title="业主信息" />
          <PersonCard
            data={dataSource}
            portraitField="customerPortrait"
            style={{ paddingTop: 24 }}
          >
            <PersonCard.Item name="customerName" label="姓名" />
            <PersonCard.Item name="customerPhone" label="联系方式" />
          </PersonCard>
        </>
      ) : null}
      {/* 情况五 实时位置、求救者、紧急联系人 */}
      {dataSource.situationEnum === 'Position_Owner_Emergency' ? (
        <>
          <Title.SubTitle title="求助者" />
          <PersonCard
            data={dataSource}
            portraitField="customerPortrait"
            style={{ paddingTop: 24, minHeight: 180 }}
          >
            <PersonCard.Item name="customerName" label="姓名" />
            <PersonCard.Item name="customerPhone" label="联系方式" />
          </PersonCard>
          <Title.SubTitle title="紧急联系人" />
          <div className="text-info">
            <p>姓名：{dataSource.emergencyContact}</p>
            <p>联系方式：{dataSource.emergencyMobile}</p>
          </div>
        </>
      ) : null}
      {/* 情况七 文本情况 */}
      {dataSource.situationEnum === 'Text' ? (
        <>
          <Title.SubTitle title="监测数据" />
          <div className="text-info">
            {dataSource.eventSituation &&
              dataSource.eventSituation.items &&
              dataSource.eventSituation.items.map(
                (record: Record<string, any>, index: number) => (
                  <p key={index}>
                    {record.title}
                    {record.value}
                  </p>
                ),
              )}
          </div>
        </>
      ) : null}
      {/* 情况八 民情反馈 */}
      {dataSource.situationEnum === 'Owner_Service' ? (
        <>
          <Title.SubTitle title="上报人" />
          <PersonCard
            data={dataSource}
            portraitField="customerPortrait"
            style={{ paddingTop: 24 }}
          >
            <PersonCard.Item name="customerName" label="姓名" />
            <PersonCard.Item name="customerPhone" label="联系方式" />
          </PersonCard>
          <div className="text-info">
            <p>
              <span className="bold">问题描述</span>：
              {dataSource.description || '-'}{' '}
            </p>
          </div>
          <Title.SubTitle title="现场照片" />
          <TouchBarPicture
            img={
              dataSource.eventPicUrl ||
              'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/2375d032-5273-4d3d-88ac-d45ca6bd64a3.png'
            }
          />
        </>
      ) : null}
      {townId ? (
        <EventWebSocket
          projectId={townId}
          env={apiEnv}
          onMessage={handleReceiveMessage}
        />
      ) : null}
    </Container>
  );
};

export default EventDetailLeftPanel;