import cx from "classnames";
import styles from "./taxDetails.module.scss";
import { UploadOutlined, InfoCircleOutlined, CheckCircleFilled } from "@ant-design/icons";
import { Button, Form, Input, notification, Radio, Select, Typography, Upload } from "antd";
import { useEffect, useState } from "react";
const { Text } = Typography;
const { Option } = Select;
import type { RadioChangeEvent } from "antd";
import * as SellerAPI from "../../../../pages/api/seller-api";

const TaxDetails = (props: any) => {
  const [checkGst, setCheckGst] = useState(1);
  const [GSTNumber, setGSTNumber] = useState("");
  const [PANNumber, setPanNumber] = useState("");
  const [formData, setFormData] = useState<any>({
    pan_number:'',
    gstin_number:'',
    gstin_address:'',
    gstin_state:'',
    seller_legal_name:'',
    hasGST:1,
    isGSTVerified:false
  });

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

  const onGSTChabge = (e:any) => {
    setFormData({
      pan_number:'',
      gstin_number:e,
      gstin_address:'',
      gstin_state:'',
      seller_legal_name:'',
      hasGST:1,
      isGSTVerified:false
    });
    setGSTNumber(e);
  };
  const onChange2 = ({ target: { value } }: RadioChangeEvent) => {
    setFormData({
      pan_number:'',
      gstin_number:'',
      gstin_address:'',
      gstin_state:'',
      seller_legal_name:'',
      hasGST:1,
      isGSTVerified:false
    });
    if(value == 0){
      setGSTNumber('')
    }
    setCheckGst(value);
  };
  const verifyTAX = () => {
    const param:any = {};
    param['tax_number'] = GSTNumber;
    SellerAPI.vefyTAX(param).then(((res:any)=>{

      if(res.response && res.response.error == false && res.response.data){
        notification.success({
          message: 'GSTIN Verification',
          description: res.response.data.lgnm+' - GST Number has been verified successfully!'  
        });
        const _resp = res.response.data;    
        const addressF = [], addressObj = Object.keys(_resp.pradr.addr);
        
        for( const aitm in _resp.pradr.addr){
          if(_resp.pradr.addr[aitm] != ''){
            addressF.push(_resp.pradr.addr[aitm]);
          }
        }
         


        const _obj = {
          pan_number:(_resp.gstin).substring(2, 12),
          gstin_number:_resp.gstin,
          gstin_address:addressF.join(", "),
          gstin_state:_resp.pradr.addr.stcd,
          seller_legal_name:_resp.lgnm,
          hasGST:1,
          isGSTVerified:true
        }
        setFormData(_obj);
      }else{
        
        notification.error({
          message: 'GSTIN Verification',
          description:res?.response?.data
        });
      }
    }));
  
  };
  const verifyPAN = () => {
    const param:any = {};
    param['pan_number'] = PANNumber;
    SellerAPI.verifyPAN(param).then(((res:any)=>{

      if(res.response && res.response.success == true && res.response.result){
        let mg = '';
        if(res.response.result.pan_type == 'Person'){
          mg = 'Hello '+res.response.result.user_full_name+', Your PAN Number has been verified successfully!'
        }else{
          mg = 'Company - '+res.response.result.user_full_name+'  PAN Number has been verified successfully!'
        }
        notification.success({
          message: 'PAN Verification',
          description: mg   
        });
        
      }else{
        notification.error({
          message: 'PAN Verification',
          description:res.response.response_message
        });
      }
    }));
  
  };

  useEffect(() => {
    const _keydata:any = (sessionStorage.getItem('VendorOnBoarding'));
    if(_keydata != '' && props.current == 3){
      const _data = JSON.parse(_keydata);
      const _obj = {
        pan_number:_data.pan_number,
        gstin_number:_data.gstin_number,
        gstin_address: _data.gstin_address,
        gstin_state:_data.gstin_state,
        seller_legal_name:_data.seller_legal_name,
        hasGST:_data.hasGST,
        isGSTVerified:_data.isGSTVerified
      }
      setFormData(_obj);
      setGSTNumber(_data.gstin_number);
    }
      
  },[props.current]);

  return (
    <>
        <div className={ (props.current == 3 ? 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"
          )}
        >
          <Form
          name="seller-onboarding"
          className="login-form"
          >
          <h2 className={styles.leftTitle}>TAX Details</h2>
          <Radio.Group
            onChange={onChange2}
            name="hasGST"
            value={formData.hasGST}
            className={styles.tssRadioGroup}
          >
            {/* <Radio value={1} style={{color:"#696969",fontSize:"14px"}}>
              I have GSTIN number */}
              <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-24 mb-3 gutterCol"
                  )}
                >
                  <h3 className={styles.subTitle}>Enter your tax details</h3>
                </div>
              </div>
              <div className={cx("ant-row gutterRow")}>
              <div
                  className={cx(
                    "ant-col  ant-col-xs-18 ant-col-sm-18 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol w100"
                  )}
                >
                  <div className={styles.formLabel}>
                    GST Number <span className={styles.starText}>*</span>
                  </div>
                  <Input placeholder="Enter GST Number" value={GSTNumber} name="gstin_number" onChange={(e) => {
                        onGSTChabge(e.target.value);
                      }} />
                </div>
                <div
                  className={cx(
                    "ant-col  ant-col-xs-6 ant-col-sm-6 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol  mtp-1"
                  )}
                >
                  {formData.gstin_address?<Button className={styles.verifyButton} disabled onClick={verifyTAX}>Verify</Button>: <Button className={styles.verifyButton} onClick={verifyTAX}>Verify</Button>}
                  {formData.gstin_address?<Button ghost className={styles.verifiedButton} icon={<CheckCircleFilled style={{ color: "#198084" }} />} size={"large"}>Verified</Button>:null}
                </div>
              </div>
              {/* <div className={cx("ant-row gutterRow")}>
              <div
                  className={cx(
                    "ant-col  ant-col-xs-18 ant-col-sm-18 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol w100"
                  )}
                >
                  <div className={styles.formLabel}>
                    PAN Number <span className={styles.starText}>*</span>
                  </div>
                  <Input placeholder="Enter PAN Number" name="pan_number"  onChange={(e) => {
                      let _formData = {...formData}
                      _formData.pan_number = e.target.value;
                        setFormData(_formData);
                        setPanNumber(e.target.value);
                      }} />
                </div>
                <div
                  className={cx(
                    "ant-col  ant-col-xs-6 ant-col-sm-6 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol  mtp-1"
                  )}
                >
                  {formData.address?<Button className={styles.verifyButton} disabled onClick={verifyPAN}>Verify</Button>: <Button className={styles.verifyButton} onClick={verifyPAN}>Verify</Button>}
                  {formData.address?<Button ghost className={styles.verifiedButton} icon={<CheckCircleFilled style={{ color: "#198084" }} />} size={"large"}>Verified</Button>:null}
                </div>
              </div> */}
              <div className={cx("ant-row gutterRow")}>
                <div
                  className={cx(
                    "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol w100"
                  )}
                >
                  <div className={styles.formLabel}>
                    State
                  </div>
                  <Input placeholder="State Name"   disabled value={formData.gstin_state}/>
                </div>
                <div
                  className={cx(
                    "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol w100"
                  )}
                >
                  <div className={styles.formLabel}>
                    Address
                  </div>
                  <Input placeholder="Enter Address"  disabled value={formData.gstin_address}/>
                </div>
                <div
                  className={cx(
                    "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol w100"
                  )}
                >
                  <div className={styles.formLabel}>
                    Seller Legal Name 
                  </div>
                  <Input placeholder=" Seller Legal name "  disabled value={formData.seller_legal_name} />
                </div>
                <div
                  className={cx(
                    "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 mb-3 gutterCol w100"
                  )}
                >
                  <div className={styles.formLabel}>
                    PAN Number
                  </div>
                  <Input placeholder="Enter PAN Number" disabled value={formData.pan_number}/>
                </div>
                
              </div>
            {/* </Radio> */}
            {/* <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-24 mb-3 gutterCol"
                )}
              >
                <Radio value={0}>I do not have GSTIN number</Radio>
              </div>
            </div> */}
          </Radio.Group>
          </Form>
        </div>

        <div
          className={cx(
            "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-6 gutterCol"
          )}
        >
          {/* <div className={styles.rightCardContainer}>
            <div className={cx("mt-4 mb-2", styles.cardTitleMain)}>
              <InfoCircleOutlined style={{ color: "#291C61" }} />
              <h2 className={styles.cardTitle}>GST Number</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 className={cx("mt-4 mb-2", styles.cardTitleMain)}>
              <InfoCircleOutlined style={{ color: "#291C61" }} />
              <h2 className={styles.cardTitle}>PAN Number</h2>
            </div>
            <Text className={cx(styles.cardContent)}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore.
            </Text>
            <div className={cx("mt-4 mb-2", styles.cardTitleMain)}>
              <InfoCircleOutlined style={{ color: "#291C61" }} />
              <h2 className={styles.cardTitle}>FAQs</h2>
            </div>
            <Text className={cx(styles.cardContent)}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore.
            </Text>
          </div> */}
        </div>
      </div>
    </>
  );
};
export default TaxDetails;