import React, { useEffect, useState } from 'react';
import { Form, Input, Button, Select, Card, Row, Col, Upload, message, UploadProps, Space, Table, Divider, Popconfirm, Tag, Tooltip, DatePicker } from 'antd';
import { EditOutlined, MinusCircleOutlined, PlusOutlined, UndoOutlined } from "@ant-design/icons";
import './purchases.css'
import PurchasesProductForm from './purchases-product';
import { PackingMethodService, TaxesService, UnitcodeService, VendorsService, SkuService } from '@gtpl/shared-services/masters';
import { PurchasesProductService } from '@gtpl/shared-services/finance'
import { render } from 'react-dom';
import { PurchaseRequest } from '@gtpl/shared-models/finance';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { Link, useHistory } from 'react-router-dom';
import { CompanyTypeEnum } from 'libs/shared-models/masters/src/lib/unit-code/company-type-enum';
import moment from 'moment';



/* eslint-disable-next-line */
export interface PurchasesProps { }

export function PurchasesForm(props: PurchasesProps) {
    const { Option } = Select;
    const [form] = Form.useForm();
    const unitService = new UnitcodeService()
    const [plants, setPlants] = useState([])
    const vendorsService = new VendorsService()
    const [vendors, setVendors] = useState([])
    const taxService = new TaxesService()
    const [taxes, setTaxes] = useState([])
    const [taxValue, setTaxValue] = useState('')

    const packStyleService = new PackingMethodService()
    const [packStyles, setPackStyles] = useState([])
    const [packStyleName, setPackStyleName] = useState('')

    const productService = new SkuService()
    const [products, setProducts] = useState([])
    const [productName, setProductName] = useState('')
    const [showPickRequestTable, setShowPickRequestTable] = useState<boolean>(false)
    const [data, setData] = useState([]);
    const [caseWe, setCaseWe] = useState(0);
    const [netWe, setNetWe] = useState(0);
    const purchaseService = new PurchasesProductService()
    // let tableData: any[] = []
    const [tableData, setTableData] = useState<any[]>([]);
const history = useHistory()
    useEffect(() => {
        getPlants()
        getVendors()
        getTaxes()
        getPackStyles()
        getProducts()
        console.log('oooookkkkkkkkkkk')
    }, [])
    useEffect(() => { }, [data])
    const getPlants = () => {
        unitService.getAllMainPlants().then((res) => {
            if (res.status) {
                setPlants(res.data)
            }
        })
    }
    const getProducts = () => {
        productService.getActiveSkuCodes().then((res) => {
            if (res.status) {
                setProducts(res.data)
            }
        })
    }
    const getVendors = () => {
        vendorsService.getAll().then((res) => {
            if (res.status) {
                setVendors(res.data)
            }
        })
    }
    const getTaxes = () => {
        taxService.getAllActiveTaxes().then((res) => {
            if (res.status) {
                setTaxes(res.data)
            }
        })
    }
    const getPackStyles = () => {
        packStyleService.getAllActivePackingMethods().then((res) => {
            if (res.status) {
                setPackStyles(res.data)
            }
        })
    }


    const save = (val) => {
        console.log(val);
        const req = new PurchaseRequest(form.getFieldValue('vendorId'), form.getFieldValue('invoiceNumber'), form.getFieldValue('purchaseId'), form.getFieldValue('unitId'), tableData, true, undefined, '', undefined, '', undefined,form.getFieldValue('company'),val.purchaseDate)
        purchaseService.createPurchase(req).then((res) => {
            if (res.status) {
                AlertMessages.getSuccessMessage(res.internalMessage)
                // console.log('oooooooooooooooooooooooooftrgc');
                form.resetFields()
                setTableData([])
                history.push('/purchase-product-view')
            } else {
                AlertMessages.getErrorMessage(res.internalMessage)

            }
        })
    }


    return (
        <Card size="small" title={<span style={{ color: 'white' }} >Product Purchase Form</span>}
            style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
          
            extra={
                <Link to="/purchase-product-view">
                    <Button 
                        type="primary" 
                        style={{ background: "white", color: "#3C085C" }}
                    >
                        View
                    </Button>
                </Link>
            }
            
            >
            <Form layout={"vertical"} autoComplete="off " form={form} onFinish={save}>
                <Form.Item name='purchaseId' style={{ display: 'none' }}>
                    <Input hidden />
                </Form.Item>
                <Row gutter={[24, 24]}>
                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
                        <Form.Item name="unitId" label="Plant" rules={[{ required: true, message: 'Missing Plant' }]}>
                            <Select
                                placeholder="Select Plant"
                                allowClear
                                showSearch
                                optionFilterProp="children"
                            >
                                {plants.map(dropData => {
                                    return <Option value={dropData.plantId}>{dropData.plantCode}</Option>
                                })}
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
                        <Form.Item name="vendorId" label="Vendor" rules={[{ required: true, message: 'Missing Vendor' }]}>
                            <Select
                                placeholder="Select Vendor"
                                allowClear
                                showSearch
                                optionFilterProp="children"

                            >
                                {vendors.map(dropData => {
                                    return <Option value={dropData.vendorId}>{dropData.vendorName}</Option>
                                })}
                            </Select>
                        </Form.Item>
                    </Col>

                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
                        <Form.Item name="invoiceNumber" label="Invoice Number" rules={[{ required: true, message: 'Missing invoice number' }]}>
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
                        <Form.Item
                            name="company"
                            label="Company"
                            rules={[{ required: true, message: 'Missing Unit' }]}
                        >
                            <Select
                                showSearch
                                optionFilterProp="children"
                                filterOption={(input, option) =>
                                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                                placeholder="Select Unit"
                                allowClear
                            >
                                {Object.values(CompanyTypeEnum).map((company) => (
                                    <Select.Option key={company} value={company}>
                                        {company}
                                    </Select.Option>
                                ))}
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
                        <Form.Item name="purchaseDate" label="Product Purchase Date" initialValue={moment()}
                         rules={[{ required: true, message: 'Missing purchase date' }]}>
                        <DatePicker placeholder="Enter Date" format="YYYY-MM-DD"/>
                        </Form.Item>
                    </Col>
                    <Col >
            <PurchasesProductForm tableData={tableData} setTableData={setTableData}/>
        </Col>

                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
                        <Form.Item >
                            <Button type='primary' htmlType='submit'>Save</Button>
                        </Form.Item>
                    </Col>
                </Row>

            </Form>
           
        </Card>
    );
}

export default PurchasesForm;