import React, { useEffect, useState } from "react";
import { FormField } from "@amxchange/grid-view-web-client";
import { Button } from "reactstrap";
import DataService from "@common-services/DataService";

function SubLeadgerDesc({ leadger }) {
    const [subLedgerDesc, setSubLedgerDesc] = useState([]);

    useEffect(() => {
        const fetchDescription = async () => {
            const glNo = leadger ? leadger.substring(0, 17) : "20610000000701160"; // Get only the first 17 digits
            console.log(glNo, "ledger description");
            
            const resp = await DataService.get(`/api/paymentvoucher/fetch-gl-by-glno?glNo=${glNo}`);
            console.log(resp, "from sub ledger");
            
            const { gldes } = resp?.data?.results[0];
            setSubLedgerDesc(gldes);
        };
        
        fetchDescription();
    }, [leadger]);
    

    return (
        <>
            <FormField
                constrolled={true}
                className={"input-fields"}
                controlled={true}
                title={"Sub Ledger Description"}
                type={"display"}
                label={"Sub Ledger Description"}
                value={subLedgerDesc}
            />
        </>
    );
}

export default SubLeadgerDesc;