import React, { Component } from 'react';
import { Redirect, Link } from 'react-router-dom';
import {
    Badge,
    Button,
    ButtonDropdown,
    Card,
    CardBody,
    CardFooter,
    CardHeader,
    Col,
    Collapse,
    DropdownItem,
    DropdownMenu,
    DropdownToggle,
    Fade,
    Form,
    FormGroup,
    FormText,
    FormFeedback,
    Input,
    InputGroup,
    InputGroupAddon,
    InputGroupText,
    Label,
    Row,
    Table,
} from 'reactstrap';
import Tables from '../../Items/Items';
import SalesService from '../Sevice/SalesService';
import { resolve } from 'dns';
const salesService = new SalesService();


function ItemRow(props) {
    const item = props.item


    return (
        <tr>
            <td>{item.no}</td>
            <td>
                <Col md="7">
                    {item.name}
                </Col>
            </td>
            <td>

                <Col md="6">
                    <Input type="number" onChange={this.salesItem.jumlah} defaultValue="0" />
                </Col>
            </td>
        </tr>
    )
}


class SalesForm extends Component {

    constructor(props) {
        super(props);
        this.state = {
            itemData: [],
            buyyerName: "",
            addressBuyyer: "",
            salesItem: []

        }
    }

    buyyerName = (e) => { this.setState({ buyyerName: e.target.value }) }
    addressBuyyer = (e) => { this.setState({ addressBuyyer: e.target.value }) }

    componentDidMount() {
        this.getItem();
    }

    getItem() {
        salesService.getAllItem().then(response => {
            const data = response.data;
            if (data.message == "OK") {
                let number = 0;
                const data = response.data.result.map((obj) => ({ ...obj, 'key': obj.id, 'no': ++number }));
                const elements = response.data.elements;
                this.setState({ itemData: data });
                console.log(data);

            } else {
                console.log("Item Data Tidak Ter Load");
            }
        })
    }

    doSubmit = () => {
        const contentData = {
            buyyerName,
            addressBuyyer,
            salesItem: list.map((data) => {
                if (data.jumlah > 0) {
                    return {
                        id: data.id,
                        buyyerItem: data.jumlah
                    }
                }
            })
        }

        console.log(contentData);
        salesService.postData(contentData).then(resolve => {
            const data = response.data;
            console.log(data);
        })
    }

    render() {
        const itemList = this.state.itemData
        return (
            <div>

                <Form>
                    <FormGroup>
                        <Col md='3'>
                            <Label htmlFor="text-input">Nama Pembeli</Label>
                        </Col>
                        <Col xs="15" md="7">
                            <Input type="text" onChange={this.buyyerName} placeholder="isi Form" required />
                        </Col>
                    </FormGroup>
                    <FormGroup>
                        <Col md='3'>
                            <Label htmlFor="text-input">Alamat Pembeli</Label>
                        </Col>
                        <Col xs="15" md="7">
                            <Input type="textarea" onChange={this.addressBuyyer} placeholder="isi Form" required />
                        </Col>
                    </FormGroup>
                    <FormGroup>
                        <Col md="8">
                            <Table hover bordered striped responsive size="sm">
                                <thead>
                                    <th>No</th>
                                    <th>Barang</th>
                                    <th>Jumlah</th>
                                </thead>
                                <tbody>
                                    {itemList != [] ?
                                        itemList.map((user, index) => <ItemRow key={index} item={user} />)
                                        : null}
                                </tbody>
                            </Table>
                        </Col>
                    </FormGroup>
                    <FormGroup>
                        <Button onClick={this.doLogin} color="primary" className="px-4">Submit</Button>
                    </FormGroup>
                </Form>

            </div>
        )
    }
}
export default SalesForm;