import React from "react";
import { Form, Row, Col, Button } from "react-bootstrap";
import { Typeahead } from "react-bootstrap-typeahead";
import Fetcher from "./Fetcher";
import { printMoney } from "./util";

class ProductPicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      code: "",
      products: [],
    };
  }

  delPick(index) {
    let picks = this.props.picks;
    picks.splice(index, 1);
    this.props.setPicks(picks);
  }

  setAmount(index, amount) {
    let picks = this.props.picks;
    picks[index].amount = parseInt(amount);
    this.props.setPicks(picks);
  }

  setCode(codeStr) {
    const code = parseInt(codeStr);
    const product = this.state.products.find((p) => p.code === code);
    if (product === undefined) {
      this.setState({ code: codeStr });
    } else {
      this.pickProduct(product);
    }
  }

  pickProduct(product) {
    let picks = this.props.picks;
    picks.push({
      code: product.code,
      name: product.name,
      price: product.price,
      amount: 1,
    });
    this.props.setPicks(picks);
    this.setState({ code: "" });
  }

  render() {
    const rows = this.props.picks.map((p, i) => {
      return (
        <Form.Group key={p.code} as={Row}>
          <Col>
            <p>{p.code}</p>
          </Col>
          <Col sm={4}>
            <p>{p.name}</p>
          </Col>
          <Col>{printMoney(p.price) + "€"}</Col>
          {this.props.amount && (
            <Col>
              <Form.Control
                type="number"
                min="1"
                placeholder="cantidad"
                value={p.amount}
                onChange={(e) => this.setAmount(i, e.target.value)}
              />
            </Col>
          )}
          <Col sm={1}>
            <Button variant="danger" onClick={() => this.delPick(i)}>
              -
            </Button>
          </Col>
        </Form.Group>
      );
    });

    return (
      <Fetcher
        url="/api/product"
        onFetch={(products) => this.setState({ products })}
      >
        <Row>
          <Col>
            <h6>Código</h6>
          </Col>
          <Col sm={4}>
            <h6>Nombre</h6>
          </Col>
          <Col>
            <h6>Precio</h6>
          </Col>
          {this.props.amount && (
            <Col>
              <h6>Cantidad</h6>
            </Col>
          )}
          <Col sm={1}></Col>
        </Row>
        {rows}
        <Form.Group as={Row}>
          <Col>
            <Form.Control
              placeholder="codigo"
              value={this.state.code}
              onChange={(e) => this.setCode(e.target.value)}
            />
          </Col>
          <Col sm={4}>
            <Typeahead
              id="product-name"
              labelKey="name"
              options={this.state.products}
              onChange={(name) => this.pickProduct(name[0])}
              selected={[]}
            />
          </Col>
          <Col></Col>
          {this.props.amount && <Col></Col>}
          <Col sm={1}></Col>
        </Form.Group>
      </Fetcher>
    );
  }
}

export default ProductPicker;