import React, { useCallback } from 'react';
import { Button } from 'antd';
import IconFont from '../../../themeComponents/IconFont';
import AuthComponent from '../../AuthComponent';
import { uuid, LM_DB } from '@zenview/micro-utils';
import { Shared } from '@zenview/micro-basic-library';

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,
        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(`/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'}>
      <Button onClick={onClick}>
        <IconFont type="icon-S_Bar_Face" />
        {title}
      </Button>
    </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'}>
      <Button onClick={onClick}>
        <IconFont type="icon-L_AID_Body1" />
        {title}
      </Button>
    </AuthComponent>
  );
}

function FaceSearch({ 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.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(`/faceLibrary/search?dbId=${dbId}`);
      });
    },
    [data.faceUrl, data.bodyUrl, data.sceneUrl, data.id, data.imgId, data.aid, history]
  );
  return (
    <AuthComponent actionName="faceSearch" key={'faceSearch'}>
      <Button onClick={onClick}>
        <IconFont type="icon-S_Bar_Face" />
        {!!data.hasFace ? '关联人脸检索' : '人脸检索'}
      </Button>
    </AuthComponent>
  );
}

function BodySearch({ 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/search?dbId=${dbId}`);
      });
    },
    [data.faceUrl, data.bodyUrl, data.sceneUrl, data.id, data.imgId, data.aid, history]
  );
  return (
    <AuthComponent actionName="bodySearch" key={'bodySearch'}>
      <Button onClick={onClick}>
        <IconFont type="icon-S_Bar_Body" />
        {!!data.hasBody ? '关联人体检索' : '人体检索'}
      </Button>
    </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;
    id = data.captureVehicleId;
  }
  const onClick = useCallback(
    (e) => {
      e.stopPropagation();
      const pageInfo = Shared.resourcePageInfo['vehicleSearch'];
      const fnName = pageInfo.fnName;
      Shared[fnName]({ history, defaultUrl, frameUrl: data.sceneUrl, id, imgId: data.imgId });
    },
    [history, defaultUrl, data.sceneUrl, data.imgId, id]
  );
  return (
    <AuthComponent actionName="vehicleSearch" key={'vehicleSearch'}>
      <Button onClick={onClick}>
        <IconFont type="icon-S_Bar_Motor" />
        {title}
      </Button>
    </AuthComponent>
  );
}
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;
    id = data.captureVehicleId;
  }
  const onClick = useCallback(
    (e) => {
      e.stopPropagation();
      const pageInfo = Shared.resourcePageInfo['nonVehicleSearch'];
      const fnName = pageInfo.fnName;
      Shared[fnName]({ history, defaultUrl, frameUrl: data.sceneUrl, id, imgId: data.imgId });
    },
    [history, defaultUrl, data.sceneUrl, data.imgId, id]
  );
  return (
    <AuthComponent actionName="nonVehicleSearch" key={'nonVehicleSearch'}>
      <Button onClick={onClick}>
        <IconFont type="icon-M_AID_NonMotor" />
        {title}
      </Button>
    </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'}>
      <Button onClick={onClick}>
        <IconFont type="icon-S_View_FilePerson" />
        {title}
      </Button>
    </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'}>
      <Button onClick={onClick}>
        <IconFont type="icon-S_View_FilePerson" />
        {title}
      </Button>
    </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'}>
      <Button onClick={onClick}>
        <IconFont type="icon-S_Photo_Relationship" />
        {title}
      </Button>
    </AuthComponent>
  );
}

function VehiclePlateSearch({ title = '车牌检索', history, ...data }) {
  const onClick = useCallback(
    (e) => {
      e.stopPropagation();
      let { plateNo, tags } = data;
      const imagePath = data && (data.vehicleUrl || data.sceneUrl || data.url || data.pictureUrl || data.scenePath || data.imageUrl);
      const dbId = uuid();
      const dataDb = {
        id: dbId,
        defaultUrl: imagePath,
        frameUrl: imagePath,
        plateNo,
        tags,
      };
      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'}>
      <Button onClick={onClick}>
        <IconFont type="icon-LicensePlateNumber" />
        {title}
      </Button>
    </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,
  },
  vehicleFile: {
    deps: [['motorPlateId', 'plateNo']],
    condition: 'or',
    ItemComponent: VehicleFile,
  },
  vehiclePlateSearch: {
    deps: [['plateNo']],
    condition: 'or',
    ItemComponent: VehiclePlateSearch,
  },
};

export default ItemConfig;
