import Stepper from "@/components/stepper";
import React from "react";
import { Dispatch, SetStateAction, useEffect, useState } from "react";
import { Button, Divider, Modal, Panel, Stack, Steps } from "rsuite";

import Import from "./steps/import";
import Setup from "./steps/setup";
import Ready from "./steps/ready";
import Review from "./steps/review";
import { ParsedDocument, DocumentInfo } from "@/lib/utils/types";

type UploadModalProps = {
  isOpen: boolean,
  onOpen: () => void,
  onClose: () => void,
}

const UploadModal: React.FC<UploadModalProps> = ({
  isOpen,
  //onOpen,
  onClose
}) => {

  const [step, setStep] = useState(0)
  const [validStep, setValidStep] = useState(false)

  const [importData, setImportData] = useState<UploadModalImportData>({ type: null });

  const [parsedData, setParsedData] = useState<ParsedDocument>({
    data: [],
    columns: 0,
    rows: 0,
    size: 0
  });

  const [documentInfo, setDocumentInfo] = useState<DocumentInfo | null>(null)
  let steps: { title: string, description: string, content: JSX.Element }[] = []
  if (documentInfo != null) {
    steps = [
      {
        title: "Import",
        description: "Browse a file or provide a URL",
        content: <Import
          setValidStep={setValidStep}
          setImportData={setImportData}
        />
      },

      {
        title: "Review",
        description: "Getting your document ready",
        content: <Review
          setValidStep={setValidStep}
          importData={importData}
          parsedData={parsedData} setParsedData={setParsedData}
        />
      },
      {
        title: "Setup",
        description: "Upload and check that everything is OK",
        content: <Setup
          setValidStep={setValidStep}
          importData={importData}
          parsedData={parsedData}
          setDocumentInfo={setDocumentInfo}
        />
      },
      {
        title: "Ready",
        description: "Your API is good to go!",
        content: <Ready
          setValidStep={setValidStep}
          documentInfo={documentInfo}
        />
      },
    ]
  }

  const done = step >= steps.length - 1

  function next() {
    if (!done) {
      // if not done on next
      //if (step + 1 < steps.length) {
      setValidStep(false);
      //}
      setStep(step + 1);

    } else {
      resetAndLeave()
    }
  }

  function resetAndLeave() {
    setStep(0)
    setValidStep(false)
    onClose()
  }

  /** RENDER */

  const styles = {
    divider: {
      width: '100%',
      padding: '0 2em'
    },
    steps: {
      width: '100%',
      padding: '0 4em'
    }
  }

  return <Modal size={"full"} open={isOpen} onClose={onClose} keyboard={false} backdrop={step > 0 ? 'static' : true}>
    <Modal.Header>
      <Modal.Title>Import new document</Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <Stack
        direction="column"
        alignItems="flex-start"
        justifyContent="center"
        spacing={16}
      >
        <Stack.Item style={styles.steps}>
          <Steps current={step} >
            {steps.map((step_info, key) => <Steps.Item
              key={key}
              {...step_info} description={key == step ? step_info.description : ''}
            />)}
          </Steps>
        </Stack.Item>
        <Stack.Item style={styles.divider}>
          <Divider />
        </Stack.Item>
        <Stack.Item style={styles.divider}>
          <Panel bordered={true}>
            <Stepper active={step}>
              {steps.map((s) => <Stepper.Step key={s.title}>
                {s.content}
              </Stepper.Step>)}
            </Stepper>


          </Panel>
        </Stack.Item>

      </Stack>
    </Modal.Body>
    <Modal.Footer>
      <Button onClick={resetAndLeave} appearance="subtle">
        Cancel
      </Button>
      <Button onClick={next} disabled={!validStep} appearance="primary">
        {!done
          ? "Next"
          : "Done"}
      </Button>
    </Modal.Footer>
  </Modal>
}



export type UploadModalStepProps = {
  setValidStep: Dispatch<SetStateAction<boolean>>
}

export type UploadModalImportData =
  | { type: 'url', url: string }
  | { type: 'file', file: File }
  | { type: null }

export type ImportDataSetterProps = { setImportData: Dispatch<SetStateAction<UploadModalImportData>> }
export type ImportDataGetterProps = { importData: UploadModalImportData }
export type ParsedDataSetterProps = { setParsedData: Dispatch<SetStateAction<ParsedDocument>> }
export type ParsedDataGetterProps = { parsedData: ParsedDocument }
export type DocumentInfoGetterProps = { documentInfo: DocumentInfo }
export type DocumentInfoSetterProps = { setDocumentInfo: Dispatch<SetStateAction<DocumentInfo | null>> }


export function useValidateOnLoad(setValidStep: Dispatch<SetStateAction<boolean>>) {
  useEffect(() => {
    setValidStep(true)
  }, [setValidStep])
}

export default UploadModal;