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 { Card, Col, Form, Row, Select } from 'antd'
import React, { useEffect, useState } from 'react'
import { Redirect } from 'react-router-dom';
import  { LoadingSheetSaleOrder } from 'libs/pages/logistics/logistics-components/container-register/src/lib/loading-sheet';


const SaleOrderLogisticSheet = () => {


    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 [selectedLoadingSheet, setSelectedLoadingSheet] = 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 (
    
      <>
        <Card title={<span style={{color:'white'}}>Loading Sheet</span>} style={{textAlign:'center'}}
        // extra={<Link to='/items-view' ><span style={{color:'white'}} >{(props.isUpdate===false) && <span style={{color:'white'}} ><Button className='panel_button' > View </Button> </span> } </span></Link>}
         headStyle={{backgroundColor: '#69c0ff', border: 0 }}
        >
        <Form form={form} layout={'vertical'} >
          <Row gutter={24}>
            
    
            <Col xs={{span:24}} sm={{span:24}} md={{span:5}} lg={{span:6}} xl={{span:6}}>
              <Form.Item
                name="saleOrder"
                label="Sale Order"
                // rules={[
                //   {
                //     required: true,
                //     message: 'Sale Order is required'
                //   },
                // ]}
    
              >
                <Select
                      showSearch
                      // style={{ width: 260 }}
                      placeholder="Select SO 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'}}>
          <LoadingSheetSaleOrder saleOrderId={selectedSaleOrder}/>   
           </Card>}
           </Card> 
    </>
  )
}

export default SaleOrderLogisticSheet