import React, { useState } from 'react';
import { Button, Card, Col, Form, InputNumber, Row, Select } from 'antd'
import { Link } from 'react-router-dom';
import { OperationTypeEnum, OpertionTypeDropDown, UnitRequest } from '@gtpl/shared-models/common-models';
import { RejectionsService } from '@gtpl/shared-services/production'


import './pages-production-management-production-management-components-assign-rejections-for-so.css';

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

export function AssignRejectionsForSo(
  props: AssignRejectionsForSoProps
) {

  const [form] = Form.useForm()
  const operations = OpertionTypeDropDown;
  const [lotNumbersDropdown, setLotNumbersDropdown] = useState<any[]>([])
  const [fromSaleOrderData, setFromSaleOrderData] = useState<any[]>([])
  const [toSaleOrderData, setToSaleOrderData] = useState<any[]>([])
  const service = new RejectionsService()
  const getAllLotNumbers = () => {
    service.getAllRejectedLots().then((res) => {
      if (res.status) {
        setLotNumbersDropdown(res.data)
      } else {
        setLotNumbersDropdown([])
      }
    })
  }

  return (
    <Card
      title={<span style={{ color: 'white' }}>Product Conversion</span>}
      style={{ textAlign: 'center' }}
      headStyle={{ backgroundColor: '#69c0ff', border: 0 }} extra={<Link to="/product-convertion-grid"><Button className='panel_button' >View</Button></Link>}
    >
      <Form layout="vertical" form={form}>
        <Row gutter={24}>
          <Col span={3} style={{ marginLeft: '1%' }}>
            <Form.Item
              name="fromOperation"
              label="From Operation"
              rules={[{ required: true, message: 'Missing From details' }]}

            >
              <Select
                placeholder="Select Operation"
                allowClear
                showSearch
                style={{ width: '100%' }}
                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                onSelect={getAllLotNumbers}
              >
                {operations.map(dropData => {
                  return <Select.Option value={dropData.value}>{dropData.name}</Select.Option>
                })}
              </Select>
            </Form.Item>

          </Col>
          <Col span={4}>
            <Form.Item name='lotNumber' label='Lot number' rules={[{ required: true, message: 'Missing From details' }]}>
              <Select
                placeholder="Select Lot Number"
                allowClear
                showSearch
                style={{ width: '100%' }}
                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                {lotNumbersDropdown.map((l) => {
                  return <Select.Option value={l.lotNumber}>{l.lotNumber}</Select.Option>
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col
            span={8}
          >
            <Form.Item
              name="fromSaleOrderItemId"
              label="From : Product(So & So Item)"
              rules={[{ required: true, message: 'Missing From details' }]}
            >
              <Select
                showSearch
                //style={{ width: 200 }}
                placeholder="Select soitem"
                optionFilterProp="children"
                // onSelect={handlesaleorderId}
                filterOption={(input, option) =>
                  option.children
                    .toLowerCase()
                    .indexOf(input.toLowerCase()) >= 0
                }
              // onChange={getInventoryQtyInfo}
              >

                {fromSaleOrderData?.map((dropData) => {
                  return (
                    <Select.Option
                      key={dropData.saleOrderItemId}
                      value={dropData.saleOrderItemId}
                    >
                      {dropData.poNumber + "/" + dropData.brand + "/" + dropData.productSKU + "/" + dropData.packStyle}
                    </Select.Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col
            span={3}
          >
            <Form.Item
              name="quantity"
              label="Quantity"
              rules={[{ required: true, message: 'Missing quantity' }]}
            >
              <InputNumber style={{ width: '100%' }} min={0} />
            </Form.Item>
          </Col>
          <Col span={3} >
            <Form.Item
              name="boxes"
              label="Boxes"
              rules={[{ required: true, message: 'Missing Boxes' }]}
            >
              <InputNumber style={{ width: '100%' }} min={0} />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={3} style={{ marginLeft: '1%' }}>
            <Form.Item
              name="toOperation"
              label="To Operation"
              rules={[{ required: true, message: 'Missing From details' }]}

            >
              <Select
                placeholder="Select Operation"
                allowClear
                showSearch
                style={{ width: '100%' }}
                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
              // onSelect={getInventoryInfo}
              >
                {operations.map(dropData => {
                  return <Select.Option value={dropData.value}>{dropData.name}</Select.Option>
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={10} >
            <Form.Item name="toSaleOrderItemId" label="To : Product(So & So Item)" rules={[{ required: true, message: 'Missing To details' }]} >
              <Select showSearch placeholder="Select soitem" optionFilterProp="children" filterOption={(input, option) =>
                  option.children
                    .toLowerCase()
                    .indexOf(input.toLowerCase()) >= 0
                }
              // onChange={updateToSaleOrderId}
              >
                {toSaleOrderData?.map((dropData) => {
                  return (
                    <Select.Option key={dropData.saleOrderItemId} value={dropData.saleOrderItemId}> {dropData.soItem}</Select.Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>

          <Col>
          </Col>
        </Row>
      </Form>

    </Card>
  );
}

export default AssignRejectionsForSo;