import cx from "classnames";
import styles from "./uploadDocument.module.scss";
import { UploadOutlined, InfoCircleOutlined } from "@ant-design/icons";
import { Button, Input, Radio, Typography, Upload } from "antd";
import { useEffect, useState } from "react";
const { Text } = Typography;

import { baseUrl } from "../../../../constants/urls";



const UploadDocument = (props: any) => {
  const [hasISO, setISOValue] = useState(0);
  const [ISONumber, setISONumber] = useState('');
  const baseName = (str:any) =>{
   let base = new String(str).substring(str.lastIndexOf('/') + 1); 
    if(base.lastIndexOf(".") != -1)       
        base = base.substring(0, base.lastIndexOf("."));
   return base;
 }
  const makeUploadFiles = (files:any) => {
    const _itms = [];
    if(files && files.length > 0){
      for(let i = 0; i<files.length;i++  ){
        if(files[i]){
          const _obj = {
            uid: "-"+(i+1),
            name: baseName(baseUrl+"/storage/"+files[i]),
            status: 'done',
            url: baseUrl+"/storage/"+files[i],
          }
          _itms.push(_obj);
        }        
      }
     
    }
    return _itms;
  }
  const [formData, setFormData] = useState<any>({
    PANCARD:[],
    GSTCertificate:[],
    CertificateofIncorporation:[],
    CancelledCheque:[],
    ISOCertificate:[],
    SSIrMSME:[],
    CompanyAuthorisedDealerCertificate:[],
    OtherCertificates:[],
    hasISO:0,
    ISONumber:'',
  });
  const [uploadPropsInfo, setUploadprops] = useState<any>([]);
  const uploadProps:any = {
    action: `${baseUrl}/api/vendor-certificationsUpload`,
    multiple: false,
    showUploadList: true   
  };
  const uploadProps2:any = {...uploadProps};
  const uploadProps3:any =  {...uploadProps};
  const uploadProps4:any =  {...uploadProps};
  const uploadProps5:any =  {...uploadProps};
  const uploadProps6:any =  {...uploadProps};
  const uploadProps7:any =  {...uploadProps};
  const uploadProps8:any =  {...uploadProps};
  let  data:any = {
    token: ''
  }

  useEffect(() => {
    if(props.current == 2){
      const _formDataCopt:any = {...formData};
      _formDataCopt.hasISO = hasISO;
      _formDataCopt.ISONumber = ISONumber;
      setFormData(_formDataCopt); 
    }
  },[hasISO,ISONumber]);

  useEffect(() => {
    if(props.current == 2)
    props.formData(formData);
  },[formData]);

  useEffect(() => {
    const _keydata:any = (sessionStorage.getItem('VendorOnBoarding'));
    if(_keydata != '' && props.current == 2){
      data =  JSON.parse(_keydata);
      const _uploadPropsInfo:any = []; 
      _uploadPropsInfo.push(uploadProps);
      _uploadPropsInfo.push(uploadProps2);
      _uploadPropsInfo.push(uploadProps3);
      _uploadPropsInfo.push(uploadProps4);
      _uploadPropsInfo.push(uploadProps5);
      _uploadPropsInfo.push(uploadProps6);
      _uploadPropsInfo.push(uploadProps7);
      _uploadPropsInfo.push(uploadProps8);

      if(data.certificates != ''){
        const certificates = JSON.parse(data.certificates);
        const _formDataCopt:any = {...formData};
        const listUploads = ["PANCARD","GSTCertificate","CertificateofIncorporation","CancelledCheque","ISOCertificate","SSIrMSME","CompanyAuthorisedDealerCertificate","OtherCertificates"];
        for(let _i = 0; _i < listUploads.length;_i++){
          _uploadPropsInfo[_i].data = {token:data.token,type:listUploads[_i]};

          if(props.steps[2].formData && props.steps[2].formData[listUploads[_i]]){
            _uploadPropsInfo[_i].defaultFileList = [...props.steps[2].formData[listUploads[_i]]];
            _formDataCopt[listUploads[_i]] =[...props.steps[2].formData[listUploads[_i]]];
          }else{
            if(certificates && certificates[listUploads[_i]]){
              _uploadPropsInfo[_i].defaultFileList = [...makeUploadFiles(certificates[listUploads[_i]])];
              _formDataCopt[listUploads[_i]] = certificates[listUploads[_i]];
            }
           
          }
        }
        if(props.steps[2].formData && props.steps[2].formData.hasISO){
          _formDataCopt.hasISO =props.steps[2].formData.hasISO;
          setISOValue(_formDataCopt.hasISO);
        }else{
          if(certificates && certificates.hasISO){
            _formDataCopt.hasISO = certificates.hasISO;
            setISOValue(_formDataCopt.hasISO);
          }
        }
        if(props.steps[2].formData && props.steps[2].formData.ISONumber){
          _formDataCopt.ISONumber = props.steps[2].formData.ISONumber;
          setISONumber(_formDataCopt.ISONumber);
        }else{
          if(certificates && certificates.ISONumber){
            _formDataCopt.ISONumber = certificates.ISONumber;
            setISONumber(_formDataCopt.ISONumber);
          }
        }
        setFormData(_formDataCopt); 
      }
      setUploadprops(_uploadPropsInfo);
    } 
  },[props.current]);

  const uploadedFilesListByKey = (e:any,key:string) =>{
    if(props.current == 2){
      const _formDataCopt:any = {...formData};
      _formDataCopt[key] = e.fileList;
      setFormData(_formDataCopt);
    }
  }
  const onISOcertifiedChange = (e:any) => {
    setISOValue(e.target.value);
  }
  return (
    <> { props.current == 2 && uploadPropsInfo.length > 0 && 
            <div className={(props.current == 2 ? cx("ant-row gutterRow") : ' hidden')}>
              <div
                className={cx(
                  "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-18 gutterCol"
                )}
              >
                <h2 className={styles.leftTitle}>Upload Set of Documents</h2>
                <div className={cx("ant-row gutterRow", styles.cardContainer)}>
                <div
                    className={cx(
                      "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 mb-3 gutterCol"
                    )}
                  >
                    <div className={styles.labelText}>PAN Card   <span className={styles.starText}>*</span></div>
                    <Upload {...uploadPropsInfo[0]} maxCount={1} listType="picture"   onChange={(evt:any) => uploadedFilesListByKey(evt,'PANCARD')}>
                      <Button className={styles.buttonContainer}>
                        <div className={styles.buttonSubContainer}>
                          <div className={styles.fileUploadContainer}>
                            <UploadOutlined />
                            <Text>Select File</Text>
                          </div>
                          <Button type="primary" ghost>
                            Upload
                          </Button>
                        </div>
                      </Button>
                    </Upload>
                  </div>
                  <div
                    className={cx(
                      "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 mb-3 gutterCol"
                    )}
                  >
                    <div className={styles.labelText}>GST Certificate   <span className={styles.starText}>*</span></div>
                    <Upload {...uploadPropsInfo[1]} maxCount={1} listType="picture" onChange={(evt:any) => uploadedFilesListByKey(evt,'GSTCertificate')}>
                      <Button className={styles.buttonContainer}>
                        <div className={styles.buttonSubContainer}>
                          <div className={styles.fileUploadContainer}>
                            <UploadOutlined />
                            <Text>Select File</Text>
                          </div>
                          <Button type="primary" ghost>
                            Upload
                          </Button>
                        </div>
                      </Button>
                    </Upload>
                  </div>
                  <div
                    className={cx(
                      "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 mb-3 gutterCol"
                    )}
                  >
                    <div className={cx(styles.labelText,"flex")}>Partnership deed / Certificate of Incorporation   </div>{/*<span className={styles.starText}>*</span>*/}
                    <Upload {...uploadPropsInfo[2]} maxCount={1} listType="picture"   onChange={(evt:any) => uploadedFilesListByKey(evt,'CertificateofIncorporation')}>
                      <Button className={styles.buttonContainer}>
                        <div className={styles.buttonSubContainer}>
                          <div className={styles.fileUploadContainer}>
                            <UploadOutlined />
                            <Text>Select File</Text>
                          </div>
                          <Button type="primary" ghost>
                            Upload
                          </Button>
                        </div>
                      </Button>
                    </Upload>
                  </div>
                  <div
                    className={cx(
                      "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 mb-3 gutterCol"
                    )}
                  >
                    <div className={cx(styles.labelText,"flex")} title="Canceled Cheque / Letter from Bank">Canceled Cheque / Letter from Bank  </div><span className={styles.starText}>*</span>
                    <Upload {...uploadPropsInfo[3]} maxCount={1} listType="picture"   onChange={(evt:any) => uploadedFilesListByKey(evt,'CancelledCheque')}>
                      <Button className={styles.buttonContainer}>
                        <div className={styles.buttonSubContainer}>
                          <div className={styles.fileUploadContainer}>
                            <UploadOutlined />
                            <Text>Select File</Text>
                          </div>
                          <Button type="primary" ghost>
                            Upload
                          </Button>
                        </div>
                      </Button>
                    </Upload>
                  </div>                
                  <div
                    className={cx(
                      "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-8 mb-3 gutterCol w100"
                    )}
                  >
                    <br/>
                    <br/>
                    <br/>
                  <h2 className={styles.leftTitle}>Optional Documents</h2> <br/>
                  <h3 className={styles.rightTitle2}>Are you ISO certified?  &nbsp;&nbsp;&nbsp;
                  <Radio.Group onChange={onISOcertifiedChange} value={hasISO}>
                    <Radio value={1} style={{color:"#696969",fontSize:"14px"}}> Yes </Radio>
                    <Radio value={0} style={{color:"#696969",fontSize:"14px"}}> No </Radio>
                  </Radio.Group>
                  </h3>
                  { hasISO == 1 && 
                    <div  className={styles.groupControl}>
                       <div className={styles.formLabel}>
                        Enter ISO Number  <span className={styles.starText}>*</span>
                      </div>
                      <Input placeholder="Enter ISO Number" value={ISONumber} name="iso_number" onChange={(e) => {
                            setISONumber(e.target.value);
                            
                          }} />
                    </div>
                  }           
                  </div>
                  { hasISO == 1 && 
                      <>
                        <div
                          className={cx(
                            "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 mb-3 gutterCol w100"
                          )}
                        >

                        <div className={cx("ant-row gutterRow", styles.cardContainer)}>
                          <div
                              className={cx(
                                "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 mb-3 gutterCol"
                              )}
                            >
                            <div className={styles.labelText}>ISO Certificate  <span className={styles.starText}>*</span><br/>(Relevant to the product uploaded)</div>
                            <Upload {...uploadPropsInfo[4]} maxCount={1} listType="picture"   onChange={(evt:any) => uploadedFilesListByKey(evt,'ISOCertificate')}>
                              <Button className={styles.buttonContainer}>
                                <div className={styles.buttonSubContainer}>
                                  <div className={styles.fileUploadContainer}>
                                    <UploadOutlined />
                                    <Text>Select File</Text>
                                  </div>
                                  <Button type="primary" ghost>
                                    Upload
                                  </Button>
                                </div>
                              </Button>
                            </Upload>
                          </div>
                        </div>
                      </div>                    
                      </>
                      }
                        <>
                      <div
                          className={cx(
                            "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 mb-3 gutterCol w100"
                          )}
                        >

                        <div className={cx("ant-row gutterRow", styles.cardContainer)}>
                          <div
                              className={cx(
                                "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 mb-3 gutterCol"
                              )}
                            >
                            <div className={styles.labelText}>SSI/MSME</div>
                            <Upload {...uploadPropsInfo[5]} maxCount={1} listType="picture"   onChange={(evt:any) => uploadedFilesListByKey(evt,'SSIrMSME')}>
                              <Button className={styles.buttonContainer}>
                                <div className={styles.buttonSubContainer}>
                                  <div className={styles.fileUploadContainer}>
                                    <UploadOutlined />
                                    <Text>Select File</Text>
                                  </div>
                                  <Button type="primary" ghost>
                                    Upload
                                  </Button>
                                </div>
                              </Button>
                            </Upload>
                          </div>
                          <div
                              className={cx(
                                "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 mb-3 gutterCol"
                              )}
                            >
                            <div className={styles.labelText} title="Company Authorised dealer certificate">Company Authorised dealer certificate</div>
                            <Upload {...uploadPropsInfo[6]} maxCount={1} listType="picture"  onChange={(evt:any) => uploadedFilesListByKey(evt,'CompanyAuthorisedDealerCertificate')}>
                              <Button className={styles.buttonContainer}>
                                <div className={styles.buttonSubContainer}>
                                  <div className={styles.fileUploadContainer}>
                                    <UploadOutlined />
                                    <Text>Select File</Text>
                                  </div>
                                  <Button type="primary" ghost>
                                    Upload
                                  </Button>
                                </div>
                              </Button>
                            </Upload>
                          </div>
                          <div
                              className={cx(
                                "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 mb-3 gutterCol"
                              )}
                            >
                            <div className={styles.labelText}>Others(Upto 5)</div>
                            <Upload {...uploadPropsInfo[7]} maxCount={5} listType="picture" onChange={(evt:any) => uploadedFilesListByKey(evt,'OtherCertificates')}>
                              <Button className={styles.buttonContainer}>
                                <div className={styles.buttonSubContainer}>
                                  <div className={styles.fileUploadContainer}>
                                    <UploadOutlined />
                                    <Text>Select File</Text>
                                  </div>
                                  <Button type="primary" ghost>
                                    Upload
                                  </Button>
                                </div>
                              </Button>
                            </Upload>
                          </div>
                        </div>
                        
                      </div>
                    </>
                    
                </div>
              </div>
              <div
                className={cx(
                  "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-6 gutterCol"
                )}
              >
                {/* <h2 className={styles.rightTitle}>Complete your Profile!</h2>
                <p>&nbsp;</p>
                <div className={styles.rightCardContainer}>
                  <div className={styles.cardTitleMain}>
                    <InfoCircleOutlined />
                    <h2 className={styles.cardTitle}>Set of Documents</h2>
                  </div>
                  <div className={cx("mt-2 mb-2")}>
                    <Text className={styles.cardContent}>
                      Supported formats jpg, jpeg, pdf and png only
                    </Text>
                    <br/>
                    <Text className={styles.cardContent}>
                      Max file size 10MB.
                    </Text>
                  </div> */}
                  {/* <div className={cx("mt-2 mb-2")}>
                    <Text className={styles.cardContent}>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                      eiusmod tempor incididunt ut labore et dolore magna aliqu.
                    </Text>
                  </div> */}

                  {/* <Text className={cx(styles.cardContent)}>
                    Adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqu.
                  </Text>
                </div> */}
              </div>
            </div>
      }
    </>
  );
};
export default UploadDocument;