import React, { useEffect, useState } from 'react';
import { Button, Card, Col, DatePicker, Form, Row, Select, Spin } from 'antd';
import {SaleOrderTrackingReportGrid} from '@gtpl/pages/sale-management/sale-components/sale-order-tracking-report-grid'
import './sale-order-tracking-report-pages.css';
import {SaleOrderService, SaleOrderTrackFilters} from '@gtpl/shared-services/sale-management';
import {DestinationService, EndCustomersService, UnitcodeService} from '@gtpl/shared-services/masters';
import { AlertMessages} from '../../../../../../shared-utils/alert-messages/src';

import {saleData} from '../data';
import form from 'antd/lib/form';
import { SaleOrderFiltersDto, SaleOrderStatusDropdownDto, SaleOrderTrackDto } from '@gtpl/shared-models/sale-management';
/* eslint-disable-next-line */
const { Option } = Select;
import moment from 'moment';
import { DestinationDto, EndCustomerDto, EndCustomersDropDownData, PlantsDropDown } from '@gtpl/shared-models/masters';
import {CustomSpinner} from '../../../../../../shared-components/custom-spinner/src/lib/custom-spinner'
import { PurchasesProductService } from '@gtpl/shared-services/finance';


export interface SaleOrderTrackingReportPagesProps {}

export function SaleOrderTrackingReportPages(
  props: SaleOrderTrackingReportPagesProps
) {
  const { RangePicker } = DatePicker;
  const [loading, setLoading] = useState(true)
  const [saleOrderData, setSaleOrderData] = useState<any[]>([])
  const [selectedMonth, setSelectedMonth]= useState('');
  const [saleOrderStatus, setSaleOrderStatus]= useState(null);
  const [selectedEstimatedFromDate, setSelectedEstimatedFromDate]= useState(undefined);
  const [selectedEstimatedToDate, setSelectedEstimatedToDate]= useState(undefined);
  const [selectedEndCustomer, setSelectedEndCustomer]= useState<number>(0);
  const [company, setCompany] = useState<number>(0);
  const [destinationData, setDestinationData]= useState<DestinationDto[]>([]);
  const [plantsData, setPlantsData]= useState<PlantsDropDown[]>([]);
  const [selectedSaleOrder, setSelectedSaleOrder] = useState<SaleOrderTrackDto[]>([])
  const [trackFilters, setTrackFilters] = useState<SaleOrderFiltersDto>(null)
  const [statusList, setStatusList] = useState<SaleOrderStatusDropdownDto[]>(null)
  const [endCustomers, setEndCustomers] = useState<EndCustomerDto[]>(null)
  const [unit, setUnit] = useState<number>(0)
  const [destinations, setDestinations] = useState<number[]>([])
  const [refreshState, setUpdateState] = useState<number>(0);
  const service = new SaleOrderService;
  const destinationservice = new DestinationService();
  const endCustomersService = new EndCustomersService;
  const unitcodeService = new UnitcodeService;
  const [searchText, setSearchText] = useState('');
  const [factoriesData, setFactoriesData] = useState([]);
  const purchaseService = new PurchasesProductService()
  const [years,setYears] = useState<any[]>([])
  const [financeYear, setFinanceYear] = useState(undefined)

  const onFocus=() =>{
    console.log('focus');
  }
  
  const onSearch=(val)=> {
    console.log('search:', val);
  }
  const onBlur=() =>{
    console.log('blur');
  }

  const updateState = (stateNumber) => {
    console.log(stateNumber)
    setUpdateState(prev => prev+1)
    getAllSaleOrdersTrackData(selectedEstimatedFromDate,selectedEstimatedToDate,saleOrderStatus,selectedEndCustomer,unit,destinations,company,financeYear);


  }
  const [form] = Form.useForm();

  const onReset = () => {
    // form.resetFields();
    form.resetFields();
    setSearchText('');
    getAllSaleOrdersTrackData(undefined,undefined,null,0,0,[],0,0)
    // window.location.reload();
  };
  const handleChange=(value) =>{
    console.log(value.format('YYYY-MM-DD'));
    setSelectedMonth(value.format('YYYY-MM-DD'))
  }
  const handleSaleOrder = (value) => {
    console.log(`selected ${value}`);
    setSelectedSaleOrder(value);
    
  }
  


  // console.log(saleData);
  const viewSaleOrderReport= (saleOrderFiltersDto: SaleOrderFiltersDto, viewOnly: boolean = true) => {

    setTrackFilters({selectedEstimatedFromDate,selectedEstimatedToDate,saleOrderStatus,selectedEndCustomer,unit,destinations});
    console.log({trackFilters});
    getAllSaleOrdersTrackData(selectedEstimatedFromDate,selectedEstimatedToDate,saleOrderStatus,selectedEndCustomer,unit,destinations,company,financeYear);
  // setShowSaleOrders(true);
}

useEffect(() => {
  form.setFieldsValue({"saleOrderStatus": ["OPEN","INPROGRESS","CANCELLED"]});
  setSaleOrderStatus(["OPEN","INPROGRESS","CANCELLED"]);
  console.log(trackFilters);
  getFinalDestinationData();

  getAllSaleOrdersTrackData(selectedEstimatedFromDate,selectedEstimatedToDate,["OPEN","INPROGRESS","CANCELLED"],selectedEndCustomer,unit,destinations,company,financeYear);
  getStatusList();getActiveEndCustomersDropDownData();
  // setSaleOrderData(saleData); console.log(saleData);
  getAllActivePlants();
  getAllCompanyNames();
  getAllFinancialYear();
}, [])

const getAllActivePlants = () => {
  unitcodeService.getAllMainPlants().then((res) => {
    if (res.status) {
      setPlantsData(res.data);
    } else {
      // if (res.intlCode) {
      //   AlertMessages.getErrorMessage(res.internalMessage);
      // } else {
      //   AlertMessages.getErrorMessage(res.internalMessage);
      // }
      setPlantsData([]);
    }
  }).catch((err) => {
    AlertMessages.getErrorMessage(err.message);
    setPlantsData([]);
  });
}
const getAllCompanyNames = () => {
  purchaseService.getAllCompanys().then((res) => {
      if (res.status) {
          setFactoriesData(res.data)
      }
  })
}
const getAllFinancialYear  = () => {
  service.getAllFinancialYear().then(res => {
    if (res.status) {
      setYears(res.data);
    } else {
      if (res.intlCode) {
        setYears([]);
        AlertMessages.getErrorMessage(res.internalMessage);
      } else {
        AlertMessages.getErrorMessage(res.internalMessage);
      }
    }
  }).catch(err => {
    setYears([]);
    AlertMessages.getErrorMessage(err.message);
  })
}
const getFinalDestinationData = () => {
  destinationservice.getAllActiveDestination().then((res) => {
    if (res.status) {
      setDestinationData(res.data);
    } else {
      // if (res.intlCode) {
      //   AlertMessages.getErrorMessage(res.internalMessage);
      // } else {
      //   AlertMessages.getErrorMessage(res.internalMessage);
      // }
      setDestinationData([]);
    }
  }).catch((err) => {
    AlertMessages.getErrorMessage(err.message);
    setDestinationData([]);
  });
}

const getAllSaleOrdersTrackData= async (selectedEstimatedFromDate,selectedEstimatedToDate,saleOrderStatus,selectedEndCustomer,unit,destinations,companyId,financialYear) => {
   service.getAllSaleOrdersTrackDataNew({selectedEstimatedFromDate,selectedEstimatedToDate,saleOrderStatus,selectedEndCustomer,unit,destinations,companyId,financialYear}).then(res => {
    setLoading(false)
    if (res.status) 
    {
      console.log(res.data);
      setSelectedSaleOrder(res.data);
    } else {
      if (res.intlCode) {
        setSelectedSaleOrder([]);
          AlertMessages.getErrorMessage(res.internalMessage);
      } else {
       AlertMessages.getErrorMessage(res.internalMessage);
      }
    }
  }).catch(err => {
    setLoading(false)
    AlertMessages.getErrorMessage(err.message);
    setSelectedSaleOrder([]);
  })
}

const getActiveEndCustomersDropDownData = () => {
  endCustomersService.getAllActiveEndCustomers().then((res) => {
    if (res.status) {
      setEndCustomers(res.data);
    } else {
      if (res.intlCode) {
        AlertMessages.getErrorMessage(res.internalMessage);
      } else {
        AlertMessages.getErrorMessage(res.internalMessage);
      }
      setEndCustomers([]);
    }
  })
    .catch((err) => {
      AlertMessages.getErrorMessage(err.message);
      setEndCustomers([]);
    });
}
const getStatusList = () => {
  service.getStatusList().then((res) => {
    if (res.status) {
      setStatusList(res.data);
    } else {
      if (res.intlCode) {
        AlertMessages.getErrorMessage(res.internalMessage);
      } else {
        AlertMessages.getErrorMessage(res.internalMessage);
      }
      setStatusList([]);
    }
  })
    .catch((err) => {
      AlertMessages.getErrorMessage(err.message);
      setStatusList([]);
    });
}

const EstimatedETDDate=(value) =>{
  const fromDate = new Date(value[0].format('YYYY-MM-DD'));
  const toDate = new Date(value[1].format('YYYY-MM-DD'));
  setSelectedEstimatedFromDate(fromDate)
  setSelectedEstimatedToDate(toDate)
}
// const Estimatedvalue.format('YYYY-MM-DD')=(value) =>{
//   if(form.getFieldValue('estimatedToDate')<value){
//     AlertMessages.getErrorMessage('Estimated Delivery From Date must be less than To date ');
//     form.setFieldsValue({estimatedFromDate:''})
//   }
//   console.log(value.format('YYYY-MM-DD'));
//   setSelectedEstimatedFromDate(value.format('YYYY-MM-DD'))
// }
// const EstimatedToDate=(value) =>{
//   if(form.getFieldValue('estimatedFromDate')>value){
//     AlertMessages.getErrorMessage('Estimated Delivery To date must be greater than From date ');
//     form.setFieldsValue({estimatedToDate:''})
//   }
//   console.log(form);
//   console.log(form.getFieldValue('estimatedFromDate'));
//   console.log(value.format('YYYY-MM-DD'));
//   setSelectedEstimatedToDate(value.format('YYYY-MM-DD'))
// }
const handleEndCustomer=(value) =>{
  console.log(value);
  setSelectedEndCustomer(value)
}
const handleUnit=(value) =>{
  setUnit(value)
}
const handleCompany=(value) =>{
setCompany(value)
}
const handleDestination=(value) =>{
  console.log(value)
  setDestinations(value)
}
const handlefinanceYear=(value) =>{
  console.log(value)
  setFinanceYear(value)
}

const handleStatus = (val) => {
  setSaleOrderStatus(val);
}
  return (
    <>
   {loading === false ? (
  <>
   <Card title={<span style={{color:'white'}}>Sale Order Tracker</span>}
    style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }}>
     <br></br>
    {/* <Card title="Sale Order Tracking Report" style={{ padding: '0px' }}> */}
          <Form form={form} layout={'vertical'} style={{ padding: '0px',marginTop:'-15px' }}  onFinish={viewSaleOrderReport}>
            <Row gutter={[24, 24]} style={{rowGap:'0px'}}>
            <Col span={5}>
              <Form.Item name="fromDate"
                label="ETD Date"
                rules={[
                  {
                    required: false,
                    message: "Missing EDD Date"
                  },
                ]}>
                <RangePicker onChange={EstimatedETDDate}/>
              </Form.Item>
            </Col>
              {/* <Col>
              
                <Form.Item name="estimatedFromDate"
                  label="ETD From Date"
                  rules={[
                    {
                      required: false,
                      message: "ETD From Date"
                    },
                  ]}>
                  <DatePicker placeholder={"select from date"}  onChange={EstimatedFromDate} format={"YYYY-MM-DD"} picker="date" />
                </Form.Item>
              </Col>
            
              <Col>
                <Form.Item name="estimatedToDate"
                  label="ETD To Date"
                  rules={[
                    {
                      required: false,
                      message: "ETD To Date"
                    },
                  ]}>
                  <DatePicker placeholder={"select to date"} onChange={EstimatedToDate} picker="date" />
                </Form.Item>
              </Col> */}
            
              <Col span={8}>
                <Form.Item name="saleOrderStatus" label="SO Status" rules={[{ required: false }]}>
                    <Select
                        placeholder="SO Status"
                        onChange={handleStatus}
                        allowClear
                        mode="multiple"
                    >
                {/* <Option key={0} value={null}>Select All Status</Option> */}
                      {statusList.map(skustatus => {
                        
                      return <Option key={skustatus.saleOrderStatus} value={`${skustatus.saleOrderStatus}`}>{skustatus.saleOrderStatus}</Option>
                    })} 

                    </Select>
                </Form.Item>
              </Col>
              <Col span={5}>
                <Form.Item name="endCustomers" label="End Customer" rules={[{ required: false }]}>
                    <Select
                        showSearch
                        optionFilterProp="children"
                        filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                        placeholder=" Select End Customer"
                        onChange={handleEndCustomer}
                        allowClear
                    >
                      <Option key={0} value={null}>Select All End Customer</Option>
                      {endCustomers?endCustomers.map(endCust => {
                      return <Option key={endCust.endCustomerId}  value={endCust.endCustomerId}>{endCust.endCustomerName}</Option>
                    }):""} 

                    </Select>
                </Form.Item>
              </Col>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
                <Form.Item name="unit" label="Unit" rules={[{ required: false }]}>
                    <Select
                        showSearch
                        optionFilterProp="children"
                        filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                        placeholder="Select Unit"
                        onChange={handleUnit}
                        allowClear
                    >
                      <Option key={0} value={null}>Select Unit</Option>
                      {plantsData.map(plant => {
                      return <Option key={plant.plantId}  value={plant.plantId}>{plant.plantCode}</Option>
                    })}

                    </Select>
                </Form.Item>
              </Col>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
                                                  <Form.Item name="financialYear" label="Financial Year">
                                                    <Select
                                                      showSearch
                                                      placeholder="Select Financial Year"
                                                      optionFilterProp="children"
                                                      filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                                      onChange={handlefinanceYear}
                                                      allowClear
                                                    >
                                                      {years.filter(year => year.financialYear !== null).map((y: any) => (
                                                        <Select.Option key={y.financialYear} value={y.financialYear}>
                                                          {y.financialYear}
                                                        </Select.Option>
                                                      ))}
                                                    </Select>
                                                  </Form.Item>
                                                </Col>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
        <Form.Item name="companyId" label="Company" >
        
            
                    <Select
                        placeholder="Select Company"
                        showSearch
                        optionFilterProp="children"
                        filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                        allowClear
                        onChange={handleCompany}
                        dropdownMatchSelectWidth={false}

                    >
                        {factoriesData.map(dropData => {
                            console.log(factoriesData,'factoriesDatafactoriesDatafactoriesData')
                            return <Option value={dropData.companyId}>{dropData.company}</Option>
                        })}
                    </Select>
                </Form.Item>
                            </Col>
           <Col span={4}>
                <Form.Item name="destination" label="Destination" rules={[{ required: false }]}>
                    <Select
                        showSearch
                        showArrow
                        optionFilterProp="children"
                        filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                        placeholder="Select Destination"
                        onChange={handleDestination}
                        allowClear
                        mode="multiple"
                    >
                      {destinationData.map(dropData => {
                  return <Option value={dropData.destinationId}>{dropData.destinationName}</Option>
                })}

                    </Select>
                </Form.Item>
              </Col>
            {/* </Row>
           <Row gutter={24}> */}
              <Col style={{ paddingLeft:'10px', marginTop:'30px' }}>
                <Form.Item >
                  <Button type="primary" htmlType="submit">
                    Get Details
                  </Button>
                </Form.Item>
              </Col>
              <Col style={{ paddingLeft:'10px', marginTop:'30px' }}>
                <Form.Item>
                  <Button htmlType="button" onClick={onReset}>
                    Reset
                  </Button>

                </Form.Item>
              </Col>
            </Row>
          </Form>
          <SaleOrderTrackingReportGrid key= {refreshState} saleOrderTrackingReportData={selectedSaleOrder} updateState={updateState}/>

        </Card>
  </>
  ): (
    <div className="spins">
    <CustomSpinner loading={true}/>
    </div>
  )}
    </>
  );
}

export default SaleOrderTrackingReportPages;