import React from 'react'
import {
    Header,
    Table,
    Button,
    Confirm
} from 'semantic-ui-react'
import {getConfirmedDeals} from '../../services/itemService'
class Page extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open : false,
            deals: []
        }
        this.handleShow = this.handleShow.bind(this);
        this.handleConfirm = this.handleConfirm.bind(this);
        this.handleCancel = this.handleCancel.bind(this);
    }

    handleShow(){
        this.setState({open:true})
    }

    handleConfirm(){
        this.setState({open:false})
    }

    handleCancel(){
        this.setState({open:false})
    }
    componentDidMount(){
        this.props.dispatch(getConfirmedDeals())
            .then((res)=>{
                this.setState({deals:res.deals})
                console.log(res.deals)
            })
    }
    render() {
        const {open,deals} = this.state
        return (
            <div>
                <Header>Item List</Header>
                <Table selectable>
                    <Table.Body>
                    {deals.map(function(i, k) {
                        return(
                            <Table.Row>
                                    <Table.Cell>{i.post.title}</Table.Cell>
                                    <Table.Cell>{i.qty}</Table.Cell>
                                    <Table.Cell>{i.tracking_no}</Table.Cell>
                                    <Table.Cell>{i.status}</Table.Cell>
                                    <Table.Cell>{i.post.estimate_shipping}</Table.Cell>
                                    <Button onClick={this.handleShow}>Received</Button>
                                    <Confirm
                                        open={open}
                                        onCancel ={this.handleCancel}
                                        onConfirm ={this.handleConfirm}
                                    >

                                    </Confirm>
                                </Table.Row>
                        )
                    })}
                    </Table.Body>
                </Table>
            </div>
        );
    }
}

export default Page;