const POSVAT=(props)=>{
    const {Row, Col} =  ReactBootstrap
    const { baskets, setBaskets, handleClose, member, config } = props;

    const [buyerLegalName, setBuyerLegalName] = useState('');
    const [buyerTaxCode, setBuyerTaxCode] = useState('');
    const [buyerName, setBuyerName] = useState(`${member?.family_name ||''} ${member?.given_name || ''} `);
    const [buyerMobile, setBuyerMobile] = useState(member?.mobile);
    const [buyerAddress, setBuyerAddress] = useState(`${member?.district || ''}  ${member?.city || ''}`);
    const [buyerEmail, setBuyerEmail] = useState(member?.email);

    useEffect(()=>{
        if(baskets?.basket?.invoice_info){
            const info = baskets.basket.invoice_info;
            setBuyerTaxCode( info.buyerTaxCode || '');
            setBuyerName( info.buyerName || '');
            setBuyerLegalName( info.buyerLegalName || '');
            setBuyerMobile( info.buyerMobile || '');
            setBuyerAddress( info.buyerAddress || '');
            setBuyerEmail( info.buyerEmail || '');
        }
    },[])

    const handleSaveToBasket = async () => {
        
        // Kiểm tra sự tồn tại của basket
        const currentBaskets = baskets || { items: [], basket: {} };

        // Kế thừa thông tin đã có và thêm invoice_info
        const updatedBaskets = {
            ...currentBaskets,
            basket: {
                ...currentBaskets.basket,
                invoice_info: {
                    buyerTaxCode: buyerTaxCode,
                    buyerName: buyerName,
                    buyerLegalName: buyerLegalName,
                    buyerMobile: buyerMobile,
                    buyerAddress: buyerAddress,
                    buyerEmail: buyerEmail,
                }
            }
        };

        // Cập nhật giỏ hàng
        
        setBaskets(updatedBaskets);
        handleClose()
        };

    return (
        <>
            <Row>
                <Col sx={4}>    
                    <TextInputCtl
                        label={config?.lang === 'vi' ? 'Mã khách hàng' : 'Customer Code'}
                        placeholder={config?.lang === 'vi' ? 'Mã khách hàng' : 'Customer Code'}
                        value={member?.shopper_id}
                        onChange={null}
                        type='text'
                        required={false}
                        feedback={null}
                        onEnter={null}
                        size="sm"
                        autoFocus={false}
                        onFocus={null}
                        style={{ textAlign: 'left' }}                     
                        styleInput={{ textAlign: 'left' }}
                        disabled={true}
                        tabIndex="0"
                    />                
                    
                </Col>
                <Col sx={4}>
                     <TextInputCtl
                        label={config?.lang === 'vi' ? 'Mã số thuế' : 'Tax Code'}
                        placeholder={config?.lang === 'vi' ? 'Mã số thuế' : 'Tax Code'}
                        value={buyerTaxCode}
                        onChange={(e) =>setBuyerTaxCode(e.target.value)}
                        type='text'
                        required={false}
                        feedback={null}
                        onEnter={null}
                        size="sm"
                        autoFocus={false}
                        onFocus={null}
                        style={{ textAlign: 'left' }}                     
                        styleInput={{ textAlign: 'left' }}
                        disabled={false}
                        tabIndex="0"
                    />
                   
                    
                </Col>
                <Col sx={4}>    
                    <TextInputCtl
                        label={config?.lang === 'vi' ? 'Số điện thoại' : 'Mobile Number'}
                        placeholder={config?.lang === 'vi' ? 'Số điện thoại' : 'Mobile Number'}
                        value={buyerMobile}
                        onChange={(e) => setBuyerMobile( e.target.value)}
                        type='text'
                        required={false}
                        feedback={null}
                        onEnter={null}
                        size="sm"
                        autoFocus={false}
                        onFocus={null}
                        style={{ textAlign: 'left' }}                     
                        styleInput={{ textAlign: 'left' }}
                        disabled={false}
                        tabIndex="0"
                    />     
                    
                </Col>
            </Row>
            <Row>
                <Col sx={6}>
                    <TextInputCtl
                        label={config?.lang === 'vi' ? 'Tên người mua' : 'Buyer Name'}
                        placeholder={config?.lang === 'vi' ? 'Tên người mua' : 'Buyer Name'}
                        value={buyerName}
                        onChange={(e) =>setBuyerName(e.target.value)}
                        type='text'
                        required={false}
                        feedback={null}
                        onEnter={null}
                        size="sm"
                        autoFocus={false}
                        onFocus={null}
                        style={{ textAlign: 'left' }}                     
                        styleInput={{ textAlign: 'left' }}
                        disabled={false}
                        tabIndex="0"
                    />
                   
                </Col>
                <Col xs={6}>
                    <TextInputCtl
                        label={config?.lang === 'vi' ? 'Email người mua' : 'Buyer Email'}
                        placeholder={config?.lang === 'vi' ? 'Email người mua' : 'Buyer Email'}
                        value={buyerEmail}
                        onChange={(e) =>setBuyerEmail(e.target.value)}
                        type='text'
                        required={false}
                        feedback={null}
                        onEnter={null}
                        size="sm"
                        autoFocus={false}
                        onFocus={null}
                        style={{ textAlign: 'left' }}                     
                        styleInput={{ textAlign: 'left' }}
                        disabled={false}
                        tabIndex="0"
                    />
                </Col>
            </Row>
            <Row>
                <Col md={6}>
                 
                    <TextInputCtl
                        label={config?.lang === 'vi' ? 'Tên pháp lý' : 'Legal Name'}
                        placeholder={config?.lang === 'vi' ? 'Tên pháp lý' : 'Legal Name'}
                        value={buyerLegalName}
                        onChange={(e) =>setBuyerLegalName(e.target.value)}
                        type='text'
                        required={false}
                        feedback={null}
                        onEnter={null}
                        size="sm"
                        autoFocus={false}
                        onFocus={null}
                        style={{ textAlign: 'left' }}                     
                        styleInput={{ textAlign: 'left' }}
                        disabled={false}
                        tabIndex="0"
                    />
                </Col>
                <Col md={6}>
                 <TextInputCtl
                        label={config?.lang === 'vi' ? 'Địa chỉ người mua' : 'Buyer Address'}
                        placeholder={config?.lang === 'vi' ? 'Địa chỉ người mua' : 'Buyer Address'}
                        value={buyerAddress}
                        onChange={(e) =>setBuyerAddress(e.target.value)}
                        type='text'
                        required={false}
                        feedback={null}
                        onEnter={null}
                        size="sm"
                        autoFocus={false}
                        onFocus={null}
                        style={{ textAlign: 'left' }}                     
                        styleInput={{ textAlign: 'left' }}
                        disabled={false}
                        tabIndex="0"
                    />                    
                </Col>
            </Row>
            <Row>
                <Col sx={6}>
                   
                </Col>
                <Col sx={6}>
                <ButtonCtl
                        label={<i class="fa fa-window-close" style={{paddingRight:4}} aria-hidden="true">{config?.lang=='vi'?"Đóng":"Close"}</i>}
                        onClick={handleClose}
                        variant='secondary'
                        type='button'
                        style={{ float:'right', margin:10}}
                        visible={true}    
                        tabIndex={0}                     
                    />
                <ButtonCtl
                        label={<i class="fa fa-floppy-o" style={{paddingRight:4}} aria-hidden="true">{config?.lang=='vi'?"Lưu":"Save"}</i>}
                        onClick={handleSaveToBasket}
                        variant='primary'
                        type='button'
                        style={{ float:'right', margin:10}}
                        visible={true}   
                        tabIndex={0}                      
                    />
                </Col>
            </Row>
            
        </>
    );
};