const PromotionProductList=(props)=>{
    
    const { config, setBaskets, display,scrollToFirstPage, isMobile=false, userInfo, member} = props
    const {Row, Col} = ReactBootstrap
    const defaultFilter={
            'promotion_type':'LD',
            'region':'',
            'condition_value':''
        }
    const [filters, setFilters] = useState(defaultFilter)
    const [loading, setLoading] = useState(false)
    const page = Number (1)
    const per_page = Number(10)
    const [currentPage, setCurrentPage] = useState(page);
    const [pageSize, setPageSize] = useState(per_page); // Số sản phẩm trên mỗi trang mặc định là 10
    //const totalPages = Number (productObject?.total_items || 0)/per_page +1;
    //const totalItems = productObject?.total_items || 0;  
    const [totalPages, setTotalPages] = useState()
    const [totalItems, setTotalItems] = useState()
    const [promotionType, setPromotionType] =useState()
    const [region, setRegion] =useState()
    const [conditionValue, setConditionValue] =useState()
    const promotionTypeList=[
        {
            "id": "VO",
            "name": "Value off after quantity reached"
        },
        {
            "id": "LD",
            "name": "Lowest priced item discounted once quantity reached"
        },
        {
            "id": "FP",
            "name": "Fixed price per item once quantity reached"
        },
        {
            "id": "TD",
            "name": "Sale Total Discount"
        },
        {
            "id": "GP",
            "name": "Pay fixed priced for a group of items"
        },
        {
            "id": "GD",
            "name": "Buy a group of items and get one item discounted"
        },
        {
            "id": "ST",
            "name": "Sale Total dollar discount"
        },
        {
            "id": "PO",
            "name": "Percent off after quantity reached"
        }
    ]
    const regionList=[
        {'id':"CH MEDiCARE 997 E-STORE", "name":"Online"}
    ]
    const conditionList=[
        {'id':"45", "name":"Member"},
        {'id':"", "name":"None Member"}
    ]
    useEffect(()=>{
 
        if ((filters) && display==true){
            fetchProductPromotion()
        }        
    },[filters, display, pageSize, currentPage])
    const [productObject, setProductObject]=useState()
    const [products, setProducts] = useState([])
    const fetchProductPromotion = async () => {
        try {  
      
            setLoading(true)   
            const url =`/api/all-promotions?page=${currentPage}&per_page=${pageSize}&promotion_type=${filters?.promotion_type || 'GP'}&region=${filters?.region||''}&condition_value=${filters?.condition_value||''}`
        
            const resultObj = await commonApi.APIGETByURL(url,  config)           
            if (resultObj.status == 200){    
                
                let dataTmp = resultObj?.data    
                setProductObject(dataTmp) 
                setProducts(dataTmp?.items);    
                setTotalItems(dataTmp?.total_items)     
                setTotalPages(Number(dataTmp?.total_items/pageSize)+1)              
            }else{
                setProducts([])
                setProductObject(null)
            }
        //console.log(dataInit )
        } catch (e) {                  
            console.log("ERROR get-promotion-products" )
        }finally{
            setLoading(false)
        }
    };

    const handleSearch=()=>{
        const newFilter={
            'promotion_type':promotionType,
            'region':region,
            'condition_value':conditionValue
        }
        setFilters(newFilter)
    }

    return(
        <>
            <Row>
                <Col xs={3}>
                    <DropdownCtl
                        label= {config?.lang=='vi'?"Loại khuyến mãi":"Promotion Type"} 
                        options={promotionTypeList}
                        value={promotionType}
                        onChange={(e)=>{setPromotionType(e.target.value); setCurrentPage(1)}}
                        valueFieldName='id'
                        labelFieldName='name'
                        size="sm"
                        required={false}
                        feedback={null}
                    />
                </Col>
                <Col xs={3}>
                    <DropdownCtl
                        label={config?.lang=='vi'?"Khu vực":"Region"}
                        options={regionList}
                        value={region}
                        onChange={(e)=>setRegion(e.target.value)}
                        valueFieldName='id'
                        labelFieldName='name'
                        size="sm"
                        required={false}
                        feedback={null}
                    />
                </Col>
                <Col xs={3}>
                    <DropdownCtl
                        label={config?.lang=='vi'?"Thành viên":"Member" }
                        options={conditionList}
                        value={conditionValue}
                        onChange={(e)=>setConditionValue(e.target.value)}
                        valueFieldName='id'
                        labelFieldName='name'
                        size="sm"
                        required={false}
                        feedback={null}
                    />
                </Col>
                <Col xs={3}>
                    <ButtonCtl
                    label={<i class="fa fa-search" style={{paddingRight:4}} aria-hidden="true">{config?.lang=='vi'?"Tìm":"Search" }</i>}
                    onClick={handleSearch}
                    variant='primary'
                    type='button'
                    style={{margin:'10px 0px 0px 10px', float:'right'}}
                    />
                </Col>
            </Row>
            <Row>
                <Col xs={12}>
                    <hr/>
                </Col>
            </Row>
            {
                products?.map ((product, index) =>(
                    <>
                        <ProductDetail productInfo={product} setBaskets={setBaskets} index={index+1} 
                        config ={config} scrollToFirstPage={scrollToFirstPage} isMobile={isMobile} useInfo={userInfo} member={member}/>
                    </>
                ))
            }
            <Row>
                <Col xs={12}>
                    <PaginationCtl backRefLink={false}
                        currentPage={currentPage} setCurrentPage={setCurrentPage}
                        totalPages={totalPages} totalItems = {totalItems}                   
                        pageSize={pageSize} setPageSize={setPageSize}                    
                    />
                </Col>
            </Row>
        </>
    )
}