import { computeParsedData, parseUploadedFile } from "@/lib/parser/parser";
import { FC, useEffect, useState } from "react";
import { Stack, Panel, Table, Pagination, Progress } from "rsuite";
import { UploadModalStepProps, ParsedDataGetterProps, ImportDataGetterProps, ParsedDataSetterProps, ImportDataSetterProps } from "../uploadModal";

const { Column, HeaderCell, Cell } = Table;

enum SubStep {
  Parsing = "Loading and parsing file...",
  Preparing = "Preparing for review...",
  Check = "We worked hard, check if everything is fine!"
}

const subSteps: { [subStep: number]: SubStep } = {
  0: SubStep.Parsing,
  1: SubStep.Check,
}
const subStepCount = Object.keys(subSteps).length

const UploadModalReviewStep: FC<
  & UploadModalStepProps
  & ParsedDataGetterProps
  & ParsedDataSetterProps
  & ImportDataGetterProps
> = ({
  setValidStep,
  importData,
  parsedData,
  setParsedData,
}) => {

    var [subStep, setSubStep] = useState(0);
    const currentSubStep = subSteps[subStep];

    const [error, setError] = useState<string | null>(null);
    const [percent, setPercent] = useState(0);

    const [page, setPage] = useState(1)
    const [limit, setLimit] = useState(10)


    useEffect(() => {

      if (currentSubStep == SubStep.Parsing) {

        if (importData.type == 'file') {
          parseUploadedFile(importData.file, setPercent)
            .then((result: object[]) => {
              var computed = computeParsedData(result)
              
              setParsedData(computed)
              setSubStep(++subStep)
              setValidStep(true);
            })
            .catch((error) => {
              console.error(error);
              setError(error)
            })

        } else {
          // TODO

          // TODO Check file size here
          console.warn('url unhandled');
        }

      }
    }, [currentSubStep, subStep, importData, setPercent, setParsedData, setValidStep])


    /*
    // TODO get from USER DATA
    const getMaxStorageForPlan = (() => {
      return 500 * 1000 // x KB
    })()

    // TODO improve file verification
    useEffect(() => {
      if (importData.type == 'file' && importData.file.size > getMaxStorageForPlan) {
        setError('File is too big to be imported for your plan!')
      }
    }, [importData, getMaxStorageForPlan])
    */


    /** RENDER */

    const displayText = (_ => {
      if (error != null) {
        return <>An error has occured. <br /> <div style={{ textAlign: 'center' }}>{error}</div></>
      } else if (subStep == subStepCount) {
        return 'Done!';
      } else {
        return currentSubStep
      }
    })();

    const style = {
      progress: {
        width: 120,
        display: 'inline-block',
        marginRight: 10
      }
    }


    if (subStep < subStepCount) {
      return <Stack
        direction="column"
        alignItems="center"
        justifyContent="center"
        spacing={16}
      >
        <Stack.Item>
          <Progress.Circle style={style.progress} percent={percent} status={error != null ? 'fail' : subStep == subStepCount ? 'success' : 'active'} />
        </Stack.Item>
        <Stack.Item>
          {importData.type == 'file' ? importData.file.name : ''} - {displayText}
        </Stack.Item>

      </Stack>

    } else {
      const data = parsedData.data.slice((page - 1) * limit, page * limit)

      const columns = (data.length > 0
        ? Object.keys(data[0])
        : []).map((c) => ({
          dataKey: c,
          label: c.split('_').map(x => x[0].toUpperCase() + x.slice(1)).join(' '),
          width: 100,
          flexGrow: 1
        }))

      return <Stack
        direction="column"
        alignItems="flex-start"
        justifyContent="center"
        spacing={32}
      >
        <Stack.Item >
          Here is the data you are importing - check to make sure it is right, or let us know if <a>something looks wrong.</a> {/** TODO put link */}
        </Stack.Item>
        <Stack.Item style={{ width: '100%' }}>
          <Panel bordered={true}>
            <Table autoHeight={true} data={data}>
              {columns.map(column => {
                const { dataKey, label, ...rest } = column;
                return (
                  <Column key={dataKey} {...rest}>
                    <HeaderCell>{label}</HeaderCell>
                    <Cell dataKey={dataKey} />
                  </Column>
                );
              })}
            </Table>
            <div style={{ padding: 20 }}>
              <Pagination
                prev
                next
                first
                last
                ellipsis
                boundaryLinks
                maxButtons={5}
                size="xs"
                layout={['total', '-', 'limit', '|', 'pager', 'skip']}
                total={parsedData.rows}
                limitOptions={[10, 30, 50]}
                limit={limit}
                activePage={page}
                onChangePage={setPage}
                onChangeLimit={(l) => { setLimit(l) }}
              />
            </div>
          </Panel>
        </Stack.Item>

      </Stack>
    }



  }

export default UploadModalReviewStep