const ManagePONumber = (props) => {
    const { config, handleClose, setBaskets, poNumber, setPoNumber } = props;
    const { Row, Col } = ReactBootstrap;
    const [loading, setLoading] = useState(false);

    const handleSavePONumber = () => {
        setBaskets(prev => {
            const newBaskets = {
                ...prev,
                basket: {
                    ...prev.basket,
                    po_number: poNumber
                }
            };
            commonFunc.setCookies('baskets', JSON.stringify(newBaskets), undefined);
            return newBaskets;
        });
        handleClose();
    };

    const handleCancelPONumber = () => {
        setPoNumber(''); // Xóa giá trị đã nhập
        setBaskets(prev => {
            const newBaskets = {
                ...prev,
                basket: {
                    ...prev.basket,
                    po_number: null
                }
            };
            commonFunc.setCookies('baskets', JSON.stringify(newBaskets), undefined);
            return newBaskets;
        });
        handleClose();
    };

    return (
        <div>
            <LoadingComponent loading={loading} message="Wait" />
            <Row>
                <Col xs={12}>
                    <TextInputCtl
                        label="PO Number/ Delivery Number"
                        placeholder="Enter PO Number"
                        value={poNumber}
                        onChange={(e) => setPoNumber(e.target.value)}
                        type='text'
                        required={false}
                        feedback={null}
                        onEnter={handleSavePONumber}
                        size="sm"
                        autoFocus={true}
                        onFocus={(e) => e.target.select()}
                        tabIndex={1}
                    />
                </Col>
            </Row>
            <Row className="mt-3">
                <Col xs={12} className="d-flex justify-content-end">
                    <ButtonCtl
                        label={<i className="fa fa-floppy-o" style={{ paddingRight: 4 }} aria-hidden="true">{config?.lang === 'vi' ? "Lưu" : "Save"}</i>}
                        onClick={handleSavePONumber}
                        variant='primary'
                        type='button'
                        style={{ marginRight: '10px' }}
                        tabIndex={2}
                    />
                    {poNumber &&
                        <ButtonCtl
                            label={<i className="fa fa-times" style={{ paddingRight: 4 }} aria-hidden="true">{config?.lang === 'vi' ? "Hủy PO" : "Cancel PO"}</i>}
                            onClick={handleCancelPONumber}
                            variant='danger'
                            type='button'
                            style={{ marginRight: '10px' }}
                            tabIndex={3}
                        />
                    }
                    <ButtonCtl
                        label={<i className="fa fa-window-close" style={{ paddingRight: 4 }} aria-hidden="true">{config?.lang === 'vi' ? "Đóng" : "Close"}</i>}
                        onClick={handleClose}
                        variant='secondary'
                        type='button'
                        tabIndex={4}
                    />
                </Col>
            </Row>
            
        </div>
    );
};