import { SaleOrderDetailViewInfoDTO, SaleOrderDropDownDto } from '@gtpl/shared-models/sale-management';
import { SaleOrderService } from '@gtpl/shared-services/sale-management';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { Button, Card, Col, Form, Row, Select } from 'antd'
import React, { useEffect, useState } from 'react'
import ExpensesLogisticsForm from './expenses-form';
import { Link } from 'react-router-dom';

const ExpensesLogistics = () => {
    const [form] = Form.useForm();
    const [display, setDisplay] = useState<string>('none');
    const [selectedSaleOrder,setSelectedSaleOrder] = useState<number>(null);
    // console.log(selectedSaleOrder,"selectedsaleorderrrrrrrrrr");
    const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
    const service = new SaleOrderService;
    const [soData, setSoData] = useState<SaleOrderDetailViewInfoDTO>(undefined);
    const [soItemData, setSoItemData] = useState<SaleOrderDropDownDto[]>([]);
    const [selectedPostShipmentDetails, setSelectedPostShipmentDetails] = useState<any>([]);
    const { Option } = Select;


    useEffect(() => {
        getAllSaleOrderItems();
      }, []);

      const getAllSaleOrderItems= () => {
        service.getSaleOrdersDropDownList().then(res => {
          if (res.status) {
          //  console.log("-----------------");
           // console.log(res.data);
            setSoItemData(res.data);
          } else {
            if (res.intlCode) {
              setSoItemData([]);
                AlertMessages.getErrorMessage(res.internalMessage);
            } else {
             AlertMessages.getErrorMessage(res.internalMessage);
            }
          }
        }).catch(err => {
          AlertMessages.getErrorMessage(err.message);
          setSoItemData([]);
        })
      }


    const handleSaleOrder=(value, item)=>{
       // console.log(value);
        setSelectedSaleOrder(value);
        setDisplay('block');
        // let data : any = soItemData.find(rec => rec.saleOrderId === value);
        // console.log(data);
        // setSoData(data);
        getSaleOrderDetails(value);
      }
      const handleCancel = () => {
        setIsModalVisible(false);
      };

      const getSaleOrderDetails= (saleorderId) => {
        service.getSaleOrderInformationById({saleOrderId:saleorderId}).then(res => {
          if (res.status) {
          //  console.log("-----------------");
           // console.log(res.data);
            setSoData(res.data);
            // getPostSailingDocuments(res.data.saleOrderId);
          } else {
            if (res.intlCode) {
              setSoData(undefined);
                AlertMessages.getErrorMessage(res.internalMessage);
            } else {
             AlertMessages.getErrorMessage(res.internalMessage);
            }
          }
        }).catch(err => {
          AlertMessages.getErrorMessage(err.message);
          setSoData(undefined);
        })
      }

  return (
    <div>
        <Card title={<span style={{color:'white'}}>EXPENSES</span>} style={{textAlign:'center'}}
         headStyle={{backgroundColor: '#69c0ff', border: 0 }}   extra={
          <Link to="/expenses-logistics-view">
              <Button 
                  type="primary" 
                  style={{ background: "white", color: "#3C085C" }}
              >
                  VIEW
              </Button>
          </Link>
      }>
            <Form>
                <Row>
                <Col xs={{span:24}} sm={{span:24}} md={{span:5}} lg={{span:6}} xl={{span:6}}>
              <Form.Item
                name="saleOrder"
                label="Customer PO"
                // rules={[
                //   {
                //     required: true,
                //     message: 'Sale Order is required'
                //   },
                // ]}
    
              >
                <Select
                      showSearch
                      // style={{ width: 260 }}
                      placeholder="Select PO Number"
                      optionFilterProp="children"
                      onSelect={handleSaleOrder}
                    //   onFocus={onFocus}
                    //   onBlur={onBlur}
                    //   onSearch={onSearch}
                      // filterOption={(input, option) =>
                      //   option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                      // }
                    >
                      <Option key={0} value={null}>Select Sale Order</Option>
                      {soItemData.map((data)=>{
                        return <Option key={data.saleOrderId} value={data.saleOrderId}>{data.poNumber}</Option>
                      })}
                    </Select>
                </Form.Item>
            </Col>
                </Row>
            </Form>
            {
            selectedSaleOrder&&

           <Card bodyStyle={{backgroundColor:'gray'}}>
          <ExpensesLogisticsForm saleOrderId={selectedSaleOrder} expensesLogisticsData={undefined} updateExpensesLogistics={function (ItemAttributes: any): void {
                throw new Error('Function not implemented.');
              } } isUpdate={false} closeForm={function (): void {
                throw new Error('Function not implemented.');
              } } setDrawerVisible={undefined}/>   
           </Card>}
        </Card>
    </div>
  )

}

export default ExpensesLogistics