import { useEffect, useState } from 'react';
import IDCapture from './IDCapture';
import processNode from './processNode';
import { WorkflowNode } from './types';
import ProcessId from './ProcessID';
import Selfie from './Selfie';
import DefaultComponent from '@incodetech/welcome/DefaultComponent';
import FaceMatch from './FaceMatch';
import Finish from './Finish';

type WorkflowProps = {
  token: string;
  workflowId: string;
  initialNode: WorkflowNode;
};

const getModule = (
  currentNode: WorkflowNode,
  token: string,
  onNext: () => void,
) => {
  if (currentNode.nodeType === 'FINISH') {
    return (
      <Finish
        title="Thank you for submitting your information!"
        subtitle="Our agents will be reach out to you soon!"
        token={token}
        workflowId={currentNode.workflowId}
        goNext={onNext}
      />
    );
  }
  switch (currentNode.moduleKey) {
    case 'ID_CAPTURE': {
      return (
        <IDCapture
          config={currentNode.moduleConfiguration}
          token={token}
          onNext={onNext}
        />
      );
    }
    case 'ID_OCR': {
      return <p>Id OCR</p>;
    }
    case 'ID': {
      return <ProcessId goNext={onNext} token={token} />;
    }
    case 'SELFIE': {
      return (
        <Selfie
          config={currentNode.moduleConfiguration}
          token={token}
          goNext={onNext}
        />
      );
    }
    case 'FACE_MATCH': {
      return (
        <FaceMatch
          token={token}
          goNext={onNext}
          config={currentNode.moduleConfiguration}
        />
      );
    }
    default: {
      return <p>Default {currentNode.moduleKey}</p>;
    }
  }
};
const Workflow = (props: WorkflowProps) => {
  const [currentNode, setCurrentNode] = useState<WorkflowNode>(
    props.initialNode,
  );

  useEffect(() => {
    document.body.style.overflow = 'hidden';
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
    return () => {
      document.body.style.overflow = 'auto';
    };
  }, []);

  async function changeNode() {
    const nextNode = await processNode({ token: props.token });
    console.log(nextNode);
    setCurrentNode(nextNode);
  }

  return (
    <div className="incd-fixed incd-inset-0 incd-bg-white z-50">
      <DefaultComponent>
        {getModule(currentNode, props.token, changeNode)}
      </DefaultComponent>
    </div>
  );
};

export default Workflow;