import "bootstrap/dist/css/bootstrap.min.css";
import { NextPage } from "next";
import React from "react";
import { Button, DropdownToggle, DropdownMenu, DropdownItem, Dropdown, UncontrolledDropdown } from "reactstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import {
  faEdit,
  faSearch,
  faTrashAlt,
  faEye,
  faCheck,
  faCalendarAlt,
  faUser
} from "@fortawesome/free-solid-svg-icons";
library.add(
  faEdit,
  faTrashAlt,
  faSearch,
  faEye,
  faCheck,
  faCalendarAlt,
  faUser
);

import FieldGroup from "../components/FieldGroup";
import { max, min } from "date-fns";

type RowStock = { id: number; state: string };


class RowSample extends React.Component<
  { data: RowStock },
  { familia: string, subFamilia: string }
> {
    constructor(props: any){
        super(props);
        this.state = {
            familia: 'Arrancador',
            subFamilia: 'Relay',
        }
    }
    render(){
        let {data} = this.props;
        return(
        <tr>
            <td>
            <Button color="warning" style={{ marginRight: 0, marginLeft: 4 }}>
                <FontAwesomeIcon icon="trash-alt" />
            </Button>
            </td>
            <td>{data.id}</td>
            <td>
                <UncontrolledDropdown>
                    <DropdownToggle caret>
                        {this.state.familia}
                    </DropdownToggle>
                    <DropdownMenu>
                        <DropdownItem header>Familia</DropdownItem>
                        <DropdownItem onClick={()=>this.setState({familia: 'Arrancador'})}>Arrancador</DropdownItem>
                        <DropdownItem onClick={()=>this.setState({familia: 'Alternador'})}>Alternador</DropdownItem>
                    </DropdownMenu>
                </UncontrolledDropdown>
            </td>
            <td>
                <UncontrolledDropdown>
                    <DropdownToggle caret>
                        {this.state.subFamilia}
                    </DropdownToggle>
                    <DropdownMenu>
                        <DropdownItem header>Sub-Familia</DropdownItem>
                        <DropdownItem onClick={()=>this.setState({subFamilia: 'Relay'})}>Relay</DropdownItem>
                        <DropdownItem onClick={()=>this.setState({subFamilia: 'Portacarbon'})}>Portacarbon</DropdownItem>
                    </DropdownMenu>
                </UncontrolledDropdown>
            </td>
            <td>
                <UncontrolledDropdown>
                    <DropdownToggle caret>
                        Carbones
                    </DropdownToggle>
                    <DropdownMenu>
                        <DropdownItem header>Elemento</DropdownItem>
                        <DropdownItem>Carbones</DropdownItem>
                    </DropdownMenu>
                </UncontrolledDropdown>
            </td>
            <td>
                <Dropdown isOpen={false} toggle={()=>{}}>
                    <DropdownToggle caret>
                        ABCD
                    </DropdownToggle>
                    <DropdownMenu>
                        <DropdownItem header>Modelo</DropdownItem>
                        <DropdownItem>ABCD</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </td>
            <td>
                <Dropdown isOpen={false} toggle={()=>{}}>
                    <DropdownToggle caret>
                        50
                    </DropdownToggle>
                    <DropdownMenu>
                        <DropdownItem header>nidades/Caja</DropdownItem>
                        <DropdownItem>50</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </td>
            <td>
            20
            </td>
        </tr>
        );
    }
}
class Stock extends React.Component<
  {},
  { data: RowStock[]; startDate: Date; endDate: Date }
> {
  constructor(props: any) {
    super(props);
    var data = [];
    for (let i = 0; i < 10; ++i) {
      data.push({ id: i + 1, state: i < 5 ? "PEN" : "ATE" });
    }
    this.state = {
      data: data,
      startDate: new Date(),
      endDate: new Date()
    };
  }
  render() {
    let { data, startDate, endDate } = this.state;
    return (
      <>
        <div className="container" style={{ maxWidth: "100%" }}>
          <div className="row" style={{ alignItems: "center" }}>
            <div className="col-sm-3">
              <FieldGroup
                label="Proveedor"
                icon="user"
                fieldConfig={{ defaultValue: "China Inc", type: "text", onChange:(text)=>{console.log(text)} }}
              />
            </div>
            <div className="col-sm-3">
              <FieldGroup
                label="Proveedor"
                icon="user"
                fieldConfig={{ defaultValue: "China Inc", type: "text", onChange:(text)=>{console.log(text)} }}
              />
            </div>
            <div className="col-sm-3">
              <FieldGroup
                label="Almacén"
                icon="user"
                fieldConfig={{ defaultValue: "China Inc", type: "text", onChange:(text)=>{console.log(text)} }}
              />
            </div>
            <div className="col-sm-3">
              <FieldGroup
                label="Fecha"
                icon="calendar-alt"
                fieldConfig={{
                  defaultValue: startDate,
                  type: "date",
                  onChange: startDate =>
                    this.setState({
                      startDate: startDate,
                      endDate: max([startDate, this.state.endDate])
                    })
                }}
              />
            </div>
          </div>
        </div>
        <table className="table">
          <thead className="thead-dark">
            <tr>
              <th scope="col"></th>
              <th scope="col">Item</th>
              <th scope="col">Familia</th>
              <th scope="col">Sub-Familia</th>
              <th scope="col">Elemento</th>
              <th scope="col">Modelo</th>
              <th scope="col">Uni/Caj</th>
              <th scope="col">Cantidad Cajas</th>
            </tr>
          </thead>
          <tbody>
            {data.map(row => (
              <RowSample key={row.id} data={row} />
            ))}
          </tbody>
        </table>
        <div className="row">
            <div className="col-sm-3"></div>
            <div className="col-sm-6">
                <Button color="success" style={{ width: "100%" }}>
                    <FontAwesomeIcon icon="check" /> Crear/Modificar
                </Button>
            </div>
            <div className="col-sm-3"></div>
        </div>
      </>
    );
  }
}
export default Stock;