import React, { useCallback } from 'react';
import IconFont from '../../../themeComponents/IconFont';
import AuthComponent from '../../AuthComponent';
import { Tooltip } from 'antd';
import { uuid, LM_DB, pageStateHelper } from '@zenview/micro-utils';
import { Shared } from '@zenview/micro-basic-library';
import _ from 'lodash';
const getPageStateData = ({ history }) => {
  const { location } = history
  const pageState = pageStateHelper.getPageState(`${location.pathname}${location.search}`) || {};
  const options =_.cloneDeep(pageState)
  delete options.id
  delete options.imgId
  return options
}


function FaceRecord({ title = '人脸记录', history, ...data }) {
  const onClick = useCallback(
    (e) => {
      e.stopPropagation();
      const dbId = uuid();
      const db = new LM_DB('faceLibs');
      db.put({
        id: dbId,
        defaultUrl: data.faceUrl || data.bodyUrl || data.vehicleUrl || data.sceneUrl,
        frameUrl: data.sceneUrl,
        searchData: { id: data.id, imgId: data.imgId, aids: data.aid ? (Array.isArray(data.aid) ? data.aid : [data.aid]) : [] },
      }).then(() => {
        history.push(`/faceLibrary/record?dbId=${dbId}`);
      });
    },
    [data.faceUrl, data.bodyUrl, data.vehicleUrl, data.sceneUrl, data.id, data.imgId, data.aid, history]
  );
  return (
    <AuthComponent actionName="faceRecord" key={'faceRecord'}>
      <Tooltip title={title}>
        <IconFont type="icon-S_Bar_Face" onClick={onClick} />
      </Tooltip>
    </AuthComponent>
  );
}

function BodyRecord({ title = '人体记录', history, ...data }) {
  const onClick = useCallback(
    (e) => {
      e.stopPropagation();
      const dbId = uuid();
      const db = new LM_DB('bodyLibs');
      db.put({
        id: dbId,
        defaultUrl: data.faceUrl ? data.faceUrl : data.bodyUrl,
        frameUrl: data.sceneUrl,
        searchData: { id: data.id, imgId: data.imgId, aids: data.aid ? (Array.isArray(data.aid) ? data.aid : [data.aid]) : [] },
      }).then((res) => {
        history.push(`/bodyLibrary/record?dbId=${dbId}`);
      });
    },
    [data.faceUrl, data.bodyUrl, data.sceneUrl, data.id, data.imgId, data.aid, history]
  );
  return (
    <AuthComponent actionName="bodyRecord" key={'bodyRecord'}>
      <Tooltip title={title}>
        <IconFont type="icon-L_AID_Body1" onClick={onClick} />
      </Tooltip>
    </AuthComponent>
  );
}

function FaceSearch({ title = '人脸检索', history, ...data }) {
  let name = data.faceUrl ? '人脸检索' : '关联人脸检索';
  const onClick = useCallback(
    (e) => {
      e.stopPropagation();
      const dbId = uuid();
      const pageStateOptions = getPageStateData({ history })
      const _pageStateOptions =_.cloneDeep(pageStateOptions)
      delete _pageStateOptions.feature
      const db = new LM_DB('faceLibs');
      db.put({
        id: dbId,
        defaultUrl: data.faceUrl ? data.faceUrl : data.bodyUrl,
        frameUrl: data.sceneUrl,
        searchData: { id: data.id, imgId: data.imgId, aids: data.aid ? (Array.isArray(data.aid) ? data.aid : [data.aid]) : [], ..._pageStateOptions },
      }).then((res) => {
        history.push(`/faceLibrary/search?dbId=${dbId}`);
      });
    },
    [data.faceUrl, data.bodyUrl, data.sceneUrl, data.id, data.imgId, data.aid, history]
  );
  return (
    <AuthComponent actionName="faceSearch" key={'faceSearch'}>
      <Tooltip title={name || title}>
        <IconFont type="icon-S_Bar_Face" onClick={onClick} />
      </Tooltip>
    </AuthComponent>
  );
}

function BodySearch({ title = '人体检索', history, ...data }) {
  let name = data.bodyUrl ? '人体检索' : '关联人体检索';
  const onClick = useCallback(
    (e) => {
      e.stopPropagation();
      const dbId = uuid();
      const pageStateOptions = getPageStateData({ history })
      const _pageStateOptions =_.cloneDeep(pageStateOptions)
      delete _pageStateOptions.feature
      const db = new LM_DB('bodyLibs');
      db.put({
        id: dbId,
        defaultUrl: data.faceUrl ? data.faceUrl : data.bodyUrl,
        frameUrl: data.sceneUrl,
        searchData: { id: data.id, imgId: data.imgId, aids: data.aid ? (Array.isArray(data.aid) ? data.aid : [data.aid]) : [] ,..._pageStateOptions},
      }).then((res) => {
        history.push(`/bodyLibrary/search?dbId=${dbId}`);
      });
    },
    [data.faceUrl, data.bodyUrl, data.sceneUrl, data.id, data.imgId, data.aid, history]
  );
  return (
    <AuthComponent actionName="bodySearch" key={'bodySearch'}>
      <Tooltip title={name || title}>
        <IconFont type="icon-L_AID_Body1" onClick={onClick} />
      </Tooltip>
    </AuthComponent>
  );
}

function VehicleSearch({ title = '综合检索', history, ...data }) {
  let defaultUrl = data.vehicleUrl;
  let id = data.id;
  if ((data.faceUrl || data.bodyUrl) && data.captureVehicleId) {
    defaultUrl = data.faceUrl || data.bodyUrl || data.sceneUrl;
    id = data.captureVehicleId;
  }
  const onClick = useCallback(
    async (e) => {
      e.stopPropagation();
      const pageStateOptions = getPageStateData({ history })
      const _pageStateOptions =_.cloneDeep(pageStateOptions)
      delete _pageStateOptions.feature
      const pageInfo = Shared.resourcePageInfo['vehicleSearch'];
      const dbId = uuid();
      const db = new LM_DB(pageInfo.dbName);
      const searchData ={id, imgId: data.imgId,..._pageStateOptions};
      const dbData = { id: dbId,  defaultUrl, searchData };
      await db.put(dbData);
      const pathname = `/vehicleLibrary/search?dbId=${dbId}`;
      const location = {
        state: { pageTitle: '机动车综合检索' },
        pathname,
      };
      history.push(location);
    },
    [history, id, data.imgId, defaultUrl]
  );
  return (
    <AuthComponent actionName="vehicleSearch" key={'vehicleSearch'}>
      <Tooltip title={title}>
        <IconFont type="icon-S_Bar_Motor" onClick={onClick} />
      </Tooltip>
    </AuthComponent>
  );
}
function VehicleTrajectory({ title = '车辆轨迹', history, ...data }) {
  const onClick = useCallback(
    (e) => {
      e.stopPropagation();

      const pageInfo = Shared.resourcePageInfo['queryVehicleTrajectoryPictures'];
      const fnName = pageInfo.fnName;
      Shared[fnName]({ history, type: 'queryVehicleTrajectoryPictures', data });
    },
    [history, data]
  );
  return (
    <Tooltip title={title}>
      <IconFont type="icon-M_Bar_Trajectory1" onClick={onClick} />
    </Tooltip>
  );
}

function NonVehicleSearch({ title = '非机动车检索', history, ...data }) {
  let defaultUrl = data.vehicleUrl;
  let id = data.id;
  if ((data.faceUrl || data.bodyUrl) && data.captureVehicleId) {
    defaultUrl = data.faceUrl || data.bodyUrl || data.sceneUrl;
    id = data.captureVehicleId;
  }
  const onClick = useCallback(
    async (e) => {
      e.stopPropagation();
      const pageInfo = Shared.resourcePageInfo['nonVehicleSearch'];
      const pageStateOptions = getPageStateData({ history })
      const _pageStateOptions =_.cloneDeep(pageStateOptions)
      delete _pageStateOptions.feature
      const dbId = uuid();
      const db = new LM_DB(pageInfo.dbName);
      const searchData ={id, imgId: data.imgId,..._pageStateOptions};
      const dbData = { id: dbId,  defaultUrl, searchData };
      await db.put(dbData);
      const pathname = `/nonVehicleLibrary/search?dbId=${dbId}`;
      const location = {
        state: { pageTitle: '机动车综合检索' },
        pathname,
      };
      history.push(location);
      // Shared[fnName]({ history, defaultUrl, frameUrl: data.sceneUrl, id, imgId: data.imgId });
    },
    [history, defaultUrl, data.imgId, id]
  );
  return (
    <AuthComponent actionName="nonVehicleSearch" key={'nonVehicleSearch'}>
      <Tooltip title={title}>
        <IconFont type="icon-M_AID_NonMotor" onClick={onClick} />
      </Tooltip>
    </AuthComponent>
  );
}

function VehicleFile({ title = '车辆档案', history, ...data }) {
  const onClick = useCallback(
    (e) => {
      e.stopPropagation();
      const plateId = data.motorPlateId;
      history.push(`/vehicleArchives/vehicleDetail?id=${plateId}`);
    },
    [data.motorPlateId, history]
  );
  return (
    <AuthComponent actionName="vehicleDetail" key={'vehicleDetail'}>
      <Tooltip title={title}>
        <IconFont type="icon-S_View_FileMotor" onClick={onClick} />
      </Tooltip>
    </AuthComponent>
  );
}
function PersonFile({ title = '人员档案', history, ...data }) {
  const onClick = useCallback(
    (e) => {
      e.stopPropagation();
      let { aid, personId } = data;
      history.push(`/personArchives/personnelDetail?${aid ? `aid=${aid}&` : ''}${personId ? `personId=${personId}` : ''}`);
    },
    [data, history]
  );
  return (
    <AuthComponent actionName="personArchivesDetail" key={'personArchivesDetail'}>
      <Tooltip title={title}>
        <IconFont type="icon-S_View_FilePerson" onClick={onClick} />
      </Tooltip>
    </AuthComponent>
  );
}

function RelationMap({ title = '关系图谱', history, ...data }) {
  const onClick = useCallback(
    (e) => {
      e.stopPropagation();
      let { aid, personId } = data;
      history.push(`/relationShip?${aid ? `aid=${aid}&` : ''}${personId ? `personId=${personId}` : ''}`);
    },
    [data, history]
  );
  return (
    <AuthComponent actionName="relationShip" key={'relationShip'}>
      <Tooltip title={title}>
        <IconFont type="icon-S_Photo_Relationship" onClick={onClick} />
      </Tooltip>
    </AuthComponent>
  );
}

function VehiclePlateSearch({ title = '车牌检索', history, ...data }) {
  const onClick = useCallback(
    (e) => {
      e.stopPropagation();
      let { imgUrl, tags } = data;
      const dbId = uuid();
      const pageStateOptions = getPageStateData({ history })
      const {cids,dataSelectAll,endTime,plateColor,plateNo,score,startTime,timeRange,} = pageStateOptions
      const dataDb = {
        id: dbId,
        defaultDataSelectAll:pageStateOptions.dataSelectAll?? data.dataSelectAll,
        defaultUrl: imgUrl,
        frameUrl: imgUrl,
        plateNo:data.plateNo??plateNo,
        tags,
        searchData:{cids,dataSelectAll,endTime,plateColor,plateNo,score,startTime,timeRange,}
      };
      const db = new LM_DB('vehicleLibs');
      db.put(dataDb).then(() => {
        history.push({
          state: { pageTitle: '机动车车牌检索' },
          pathname: '/vehicleLibrary/plateSearch',
          search: `?dbId=${dbId}`,
        });
      });
    },
    [data, history]
  );
  return (
    <AuthComponent actionName="vehiclePlateSearch" key={'vehiclePlateSearch'}>
      <Tooltip title={title}>
        <IconFont type="icon-LicensePlateNumber" onClick={onClick} />
      </Tooltip>
    </AuthComponent>
  );
}

const ItemConfig = {
  faceRecord: {
    deps: [
      ['hasArchives', 'aid', 'hasFace'], //人体卡片跳人脸
      ['hasArchives', 'aid', 'faceUrl'], //人脸卡片跳人体
      ['vehicleUrl', 'hasAid'], //车辆跳人脸、人体
    ],
    condition: 'or',
    ItemComponent: FaceRecord,
  },
  bodyRecord: {
    deps: [
      ['hasArchives', 'aid', 'hasBody'], //人脸卡片跳人体
      ['hasArchives', 'aid', 'bodyUrl'], //人体卡片跳人脸
      // ['vehicleUrl', 'hasAid'] //车辆跳人脸、人体
    ],
    condition: 'or',
    ItemComponent: BodyRecord,
  },
  personFile: {
    deps: [['aid', 'hasArchives'], ['personId']],
    condition: 'or',
    ItemComponent: PersonFile,
  },
  relationMap: {
    deps: [['aid', 'hasArchives'], ['personId']],
    condition: 'or',
    ItemComponent: RelationMap,
  },
  faceSearch: {
    deps: [
      ['faceUrl'], //人脸卡片跳人体
      ['hasFace'], //人体卡片跳人脸
    ],
    condition: 'or',
    ItemComponent: FaceSearch,
  },
  bodySearch: {
    deps: [
      ['hasBody'], //人脸卡片跳人体
      ['bodyUrl'], //人体卡片跳人脸
    ],
    condition: 'or',
    ItemComponent: BodySearch,
  },
  vehicleSearch: {
    deps: [
      ['vehicleUrl'], //机动车
      ['hasArchives', 'captureVehicleId'], // 有档案
      ['faceUrl', 'captureVehicleId'], //人脸
      ['bodyUrl', 'captureVehicleId'], //人体
    ],
    condition: 'or',
    ItemComponent: VehicleSearch,
  },
  nonVehicleSearch: {
    deps: [
      ['vehicleUrl'], //非机动车
      ['hasArchives', 'captureVehicleId'], // 有档案
      ['faceUrl', 'captureVehicleId'], //人脸
      ['bodyUrl', 'captureVehicleId'], //人体
    ],
    condition: 'or',
    ItemComponent: NonVehicleSearch,
  },
  vehicleTrajectory: {
    deps: [['vehicleUrl']],
    condition: 'or',
    ItemComponent: VehicleTrajectory,
  },
  vehicleFile: {
    deps: [['motorPlateId', 'plateNo']],
    condition: 'or',
    ItemComponent: VehicleFile,
  },
  vehiclePlateSearch: {
    deps: [['plateNo']],
    condition: 'or',
    ItemComponent: VehiclePlateSearch,
  },
};

export default ItemConfig;
