import './projectupload.scss';

import * as log from 'loglevel';
import React, { useState } from 'react';
import { toast } from 'react-toastify';

import { packageProject, uploadProject, getClientID } from '../../factory/api';
import useLocalStorage from '../../hooks/useLocalStorage';
import Button from '../Button/button';
import Checkbox from '../Checkbox/checkbox';
import Input from '../Input/input';
import Transition from '../Transition/transition';

interface Props {
  visible: boolean;
}

const ProjectUpload: React.FC<Props> = (props) => {
  const { visible } = props;
  let test = visible;
  const [projectZip, setprojectZip] = useState(null);
  const [serviceToken, setServiceToken] = useLocalStorage('serviceToken', '');
  const [version, setVersion] = useState('');
  const [activate, setActivate] = useState(true);

  function packageClick() {
    packageProject()
      .then((res: any) => {
        if (res.status === 200) {
          setprojectZip(res.data.project);
          toast.success(`${res.data.project} packaged successfully`);
        }
      })
      .catch(() => {
        toast.error('Package failed');
      });
  }
  function versionChange(vers: string) {
    const re = /^[0-9][0-9.]*$/;
    if (vers === '' || re.test(vers)) {
      setVersion(vers);
    }
  }
  function uploadClick() {
    const clientId = getClientID();
    if (!clientId || clientId.length === 0) {
      toast.error('Client-ID is not set.');
      return;
    }

    uploadProject({
      projectName: projectZip,
      version: version,
      activate: activate,
      serviceToken: serviceToken,
    })
      .then((res: any) => {
        if (res.status === 200) {
          toast.success(`Project uploaded successfully`);
        }
      })
      .catch((err: any) => {
        log.error(JSON.stringify(err));
        toast.error('Upload failed');
      });
  }
  return (
    <>
      <Transition in={test} animation="zoom-in-top" timeout={300}>
        <div className="paypay-select-project">
          <Button
            className="upload-btn"
            btnType="primary"
            onClick={packageClick}
          >
            Package
          </Button>
          <Input
            value={serviceToken}
            onChange={(e) => setServiceToken(e.target.value)}
            placeholder="Service Token"
          ></Input>
          <Input
            value={version}
            onChange={(e) => versionChange(e.target.value)}
            placeholder="Version"
          ></Input>
          <Checkbox
            label="Activate"
            checked={activate}
            onChange={() => setActivate(!activate)}
          ></Checkbox>
          <Button
            className="upload-btn"
            btnType="primary"
            onClick={uploadClick}
            disabled={serviceToken.length === 0 || version.length === 0}
          >
            Upload
          </Button>
        </div>
      </Transition>
    </>
  );
};

export default ProjectUpload;