import { Button, Form, Image, Input,Radio,Typography, Upload, notification } from "antd";
import cx from "classnames";
import SignaturePad from "react-signature-canvas";

import styles from "./signatureDetails.module.scss";
import {  InfoCircleOutlined, UploadOutlined } from "@ant-design/icons";
import { useEffect, useRef, useState } from "react";
import { baseUrl } from "../../../../constants/urls";
const { Text } = Typography;
const SignatureDetails = (props:any)=>{
  const [formData, setFormData] = useState<any>({
    signature:null,
    signatureType:'draw'
  });
  const [signatureType, setSignatureType] = useState('draw');
  const sigCanvas:any = useRef({});
  const [isReady, setOldData] = useState<any>(false);

  const clear = () => sigCanvas.current.clear();
  const save = () => {
    const url  = sigCanvas.current.getTrimmedCanvas().toDataURL("image/png");
    const formDataCopy:any = {...formData};
    formDataCopy.signatureType = 'draw';
    formDataCopy.signature = url;
    setFormData(formDataCopy);
    notification.success({
      message: 'Signature',
      description: ' Signature saved successfully.'   
    });
  };

  const uploadProps:any = {
    action: `${baseUrl}/api/vendor-certificationsUpload`,
    multiple: false,
    showUploadList: true   
  };
  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 onOptionChange = (e:any) => {
    setSignatureType(e.target.value);
  }
  const uploadedFilesListByKey = (e:any,key:string) =>{
    if(props.current == 6){
      const _formDataCopt:any = {...formData};
      _formDataCopt.signature = e.fileList;
      _formDataCopt.signatureType = 'file';
      setFormData(_formDataCopt);
    }
  }
  useEffect(() => {
    if(props.current == 6){
      const _keydata:any = (sessionStorage.getItem('VendorOnBoarding'));
      if(_keydata != ''){
        const data =  JSON.parse(_keydata);
        uploadProps.data = {token:data.token,type:'signature'};
        console.log(uploadProps)
        if(props.steps[5].formData == null){ 
          const _formDataCopt:any = {...formData};
          _formDataCopt.signature = data.signature;
          _formDataCopt.signatureType = data.signatureType;
          if(_formDataCopt.signatureType == 'file')
          uploadProps.defaultFileList =  [...makeUploadFiles( data.signature)];
          setFormData(_formDataCopt);
        }
      } 
      setOldData(true);     
    }
   
  },[props.current]);

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

    return(
        <>
         {isReady && 
         <div className={ (props.current == 6 ? cx("ant-row gutterRow") : ' hidden')}>
         <h2 className={styles.leftTitle}>Signature</h2>

        <div
          className={cx(
            "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-17 gutterCol",styles.rightCardBorder
          )}
        >
          <h3  className={styles.rightTitle2}>
          <Radio.Group onChange={onOptionChange} value={signatureType}>
            <Radio value={'draw'} style={{color:"#696969",fontSize:"14px"}}> Draw my signature on the screen </Radio>
            <Radio value={'file'} style={{color:"#696969",fontSize:"14px"}}> Upload my signature </Radio>
          </Radio.Group>
          </h3>
          {signatureType == 'draw' && 
            <>
            <p>&nbsp;</p>
            <p>Use your finger/mouse to draw your signature on the screen which will be used on the invoices sent to customers</p>
            <>
              <SignaturePad
                ref={sigCanvas}
                canvasProps={{
                  className: styles.signatureCanvas,
                  width:650,
                  height:300
                }}
              />
              <div className={ styles.panelButtons}>
              <Button type="primary"  onClick={save}>Save</Button> &nbsp;
              <Button onClick={clear}>Clear</Button>
              </div>
             
            </>
            </>
          
          }
           {signatureType == 'file' && 
            <>
             <p>&nbsp;</p>
            <p>Upload my signature Upload your Signature in JPG/PNG/PDF formats</p>
            <Upload {...uploadProps} maxCount={1} listType="picture"   onChange={(evt:any) => uploadedFilesListByKey(evt,'signature')}>
              <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-24 ant-col-xl-7 gutterCol"
          )}
        >
          {/* <div className={styles.rightCardContainer}>
            <div className={cx("mt-4 mb-2", styles.cardTitleMain)}>
              <InfoCircleOutlined style={{ color: "#291C61" }} />
              <h2 className={styles.cardTitle}>Signature</h2>
            </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>
            </div> */}
            </div>
        </div>
        }
        </>
    )

}
export default SignatureDetails;