import { EndCustomerDto } from '@gtpl/shared-models/masters';
import {  DomesticSalesModel, DomesticSalesReqDto } from '@gtpl/shared-models/sale-management';
import { EndCustomersService, TaxesService } from '@gtpl/shared-services/masters';
import { SaleOrderService } from '@gtpl/shared-services/sale-management';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { Button, Card, Col, DatePicker, Form, Input, Row, Select, Table, message } from 'antd'
import React, { useEffect, useState } from 'react'
import { Link, Redirect, useHistory } from 'react-router-dom';


export interface DomesticSalesProps {
    varientId: number;
    onSubmitSuccess: () => void;
  }

const DomesticSalesForm = (props:DomesticSalesProps) => {
    const saleOrderService = new SaleOrderService();
    const [domesticSalesDataForForm, setDomesticSalesDataForForm] = useState<DomesticSalesModel[]>();
    const [endcustomersData, setendcustomersData] = useState<EndCustomerDto[]>([]);
    const endcustomerservice = new EndCustomersService();
    const [ locationIds, setLocationIds] = useState<number[]>([]);
    const taxService = new TaxesService()
    const [taxes, setTaxes] = useState([])
    const {Option}=Select
    const history=useHistory()
    const [form] = Form.useForm();
    // const navigate = useNavigate();
    const [initialData, setInitialData] = useState<formLocationWiseDataType>({}); 
    const [errorMessage, setErrorMessage] = useState<string | null>(null);
    const [salesData, setSalesData] = useState<Record<number, number>>({});


    useEffect(()=>{
        getEndCustomersData();
        getTaxes()
    },[])

    useEffect(() => {
        if (props.varientId) {
          console.log(props);
          getDomesticSalesData(props.varientId);
        }
      }, [props.varientId]);

      
      const getTaxes = () => {
        taxService.getAllActiveTaxes().then((res) => {
          if (res.status) {
            setTaxes(res.data)
          }
        })
      }

      const getEndCustomersData = () => {
        endcustomerservice.getAllActiveEndCustomers().then((res) => {
          if (res.status) {
            setendcustomersData(res.data);
          } else {
            setendcustomersData([]);
          }
        }).catch((err) => {
          AlertMessages.getErrorMessage(err.message);
          setendcustomersData([]);
        });
      }
      const calculateSaleQuantity = (cases: number, loosePouches: number, packStyle: string) => {
        const [caseMultiplier, pouchMultiplier] = packStyle
            .replace("lb", "")
            .replace("oz", "")
            .replace("gm", "")
            .replace("kg", "")
            .split("X")
            .map((value) => parseFloat(value));
    
        let weightPerUnit = 1;
        if (packStyle.includes("lb")) weightPerUnit = 0.454;
        else if (packStyle.includes("oz")) weightPerUnit = 0.0283495;
        else if (packStyle.includes("gm")) weightPerUnit = 0.001;
        else if (packStyle.includes("kg")) weightPerUnit = 1;
    
        const totalCasesInKg = cases * caseMultiplier * pouchMultiplier * weightPerUnit;
        console.log(totalCasesInKg, "Total Cases in KG");
    
        const totalLoosePouchesInKg = loosePouches * pouchMultiplier * weightPerUnit;
        console.log(totalLoosePouchesInKg, "Total Loose Pouches in KG");
    
        return totalCasesInKg + totalLoosePouchesInKg;
    };

    const handleInputChange = (value: number, record: DomesticSalesModel, field: 'cases' | 'loosePouches', index?: number) => {
      console.log(value, "valueeeeeeeeeee");
      console.log(field, "fielddddddddddddddd");
  
      // Corrected logic for casesForCalculation and loosePouchesForCalculation
      const casesForCalculation = (field === 'cases' && value !== undefined && !isNaN(value)) ? value : (field === 'cases' ? record.cases : (form.getFieldValue([`${record.location}-${record.transactionType}-${record.productCategory}`, 'cases']) !== undefined && !isNaN(form.getFieldValue([`${record.location}-${record.transactionType}-${record.productCategory}`, 'cases'])) ? form.getFieldValue([`${record.location}-${record.transactionType}-${record.productCategory}`, 'cases']) : 0));
      const loosePouchesForCalculation = (field === 'loosePouches' && value !== undefined && !isNaN(value)) ? value : (field === 'loosePouches' ? record.loosePouches : (form.getFieldValue([`${record.location}-${record.transactionType}-${record.productCategory}`, 'loosePouches']) !== undefined && !isNaN(form.getFieldValue([`${record.location}-${record.transactionType}-${record.productCategory}`, 'loosePouches'])) ? form.getFieldValue([`${record.location}-${record.transactionType}-${record.productCategory}`, 'loosePouches']) : 0));
  
      const calculatedSaleQuantity = calculateSaleQuantity(casesForCalculation, loosePouchesForCalculation, record.packStyle);
      const uniqueKey = `${record.location}-${record.transactionType}-${record.productCategory}`;
  
      setSalesData(prevSalesData => ({
          ...prevSalesData,
          [uniqueKey]: calculatedSaleQuantity
      }));
  
      form.setFieldsValue({
          [uniqueKey]: {
              saleQuantity: calculatedSaleQuantity.toFixed(3)
          }
      });
  
      if (index !== undefined) {
          setDomesticSalesDataForForm(prevDataSource => {
              return prevDataSource.map((item, i) => {
                  if (i === index) {
                      return {
                          ...item,
                          cases: field === 'cases' ? value : item.cases,
                          loosePouches: field === 'loosePouches' ? value : item.loosePouches,
                      };
                  }
                  return item;
              });
          });
      }
  
      // Do NOT update record.cases and record.loosePouches
  };

  //   const handleInputChange = (value: number, record: DomesticSalesModel, field: 'cases' | 'loosePouches', index?: number) => {
  //     console.log(value, "valueeeeeeeeeee");
  //     console.log(field, "fielddddddddddddddd");
  
  //     let newCases = record.cases;
  //     let newLoosePouches = record.loosePouches;
  
  //     if (field === 'cases') {
  //         newCases = value;
  //     } else if (field === 'loosePouches') {
  //         newLoosePouches = value;
  //     }
  //       const casesForCalculation = (field === 'cases' && value !== undefined && !isNaN(value)) ? newCases : (field === 'cases' ? record.cases : (form.getFieldValue([`${record.location}-${record.transactionType}-${record.productCategory}`, 'cases']) !== undefined && !isNaN(form.getFieldValue([`${record.location}-${record.transactionType}-${record.productCategory}`, 'cases'])) ? form.getFieldValue([`${record.location}-${record.transactionType}-${record.productCategory}`, 'cases']) : 0));
  //     const loosePouchesForCalculation = (field === 'loosePouches' && value !== undefined && !isNaN(value)) ? newLoosePouches : (field === 'loosePouches' ? record.loosePouches : (form.getFieldValue([`${record.location}-${record.transactionType}-${record.productCategory}`, 'loosePouches']) !== undefined && !isNaN(form.getFieldValue([`${record.location}-${record.transactionType}-${record.productCategory}`, 'loosePouches'])) ? form.getFieldValue([`${record.location}-${record.transactionType}-${record.productCategory}`, 'loosePouches']) : 0));
  
  //     const calculatedSaleQuantity = calculateSaleQuantity(casesForCalculation, loosePouchesForCalculation, record.packStyle);
  //     const uniqueKey = `${record.location}-${record.transactionType}-${record.productCategory}`;
  //       setSalesData(prevSalesData => ({
  //         ...prevSalesData,
  //         [uniqueKey]: calculatedSaleQuantity
  //     }));
  //       form.setFieldsValue({
  //         [uniqueKey]: {
  //             saleQuantity: calculatedSaleQuantity.toFixed(3)
  //         }
  //     });
  //       if (index !== undefined) {
  //         setDomesticSalesDataForForm(prevDataSource => {
  //             return prevDataSource.map((item, i) => {
  //                 if (i === index) {
  //                     return {
  //                         ...item,
  //                         cases: field === 'cases' ? value : item.cases,
  //                         loosePouches: field === 'loosePouches' ? value : item.loosePouches,
  //                     };
  //                 }
  //                 return item;
  //             });
  //         });
  //     }
  //       if (field === 'cases') {
  //         record.cases = value;
  //     } else if (field === 'loosePouches') {
  //         record.loosePouches = value;
  //     }
  // };
    

      const getDomesticSalesData = (varientId) => {
        saleOrderService.getDomesticSalesDataForForm(new DomesticSalesReqDto(varientId)).then(res => {
            if (res.status) {
                setDomesticSalesDataForForm(res.data);
                const locationIdsTemp: number[] = [];
                const initialDataTemp: formLocationWiseDataType = {}; 
                
                res.data.forEach(r => {
                    locationIdsTemp.push(r.location);
                    initialDataTemp[r.location] = {
                        cases: r.cases,
                        packStyleId: r.packStyleId,
                        loosePouches: r.loosePouches,
                        quantity: r.quantity,
                        unitId: r.unitId,
                        stockId: r.stockId,
                        transactionType:r.transactionType,
                        productCategory:r.productCategory
                    };
                });
                
                setLocationIds(locationIdsTemp);
                setInitialData(initialDataTemp); 
            } else {
                AlertMessages.getErrorMessage(res.internalMessage);
            }
        });
    };


    type formHeaderDataType = {
        customer: number;
        unitPrice: number;
        taxId: number;
        amount: number;
        domesticSaleOrderNo: string;
        saleOrderDate: Date;
    }
    type formLocationWiseDataType = {
        [k in number]: {
            cases: number,
            packStyleId: number,
            loosePouches: number,
            quantity:number,
            unitId:number,
            stockId:number,
            transactionType:string
            productCategory:string
        }
    }


    const onFinish = (data: formLocationWiseDataType & formHeaderDataType) => {
      console.log(data,"dataaaaaaaaaa")
      const inputDtoArray: DomesticSalesModel[] = [];
      const changedRows: { [uniqueKey: string]: DomesticSalesModel } = {}; // Store changed rows
  
      domesticSalesDataForForm.forEach(item => {
          const uniqueKey = `${item.location}-${item.transactionType}-${item.productCategory}`;
          const formCases = form.getFieldValue([uniqueKey, 'cases']);
          const formLoosePouches = form.getFieldValue([uniqueKey, 'loosePouches']);
  
          if (formCases !== undefined || formLoosePouches !== undefined) {
              changedRows[uniqueKey] = {
                  ...item,
                  cases: formCases !== undefined ? formCases : 0,
                    loosePouches: formLoosePouches !== undefined ? formLoosePouches : 0,
              };
          }
      });
  
      Object.values(changedRows).forEach(changedRow => {
          const reqObj = new DomesticSalesModel(
              null,
              data.customer,
              props.varientId,
              changedRow.packStyleId,
              changedRow.quantity,
              changedRow.location,
              changedRow.stockId,
              data.unitPrice,
              data.taxId,
              data.amount,
              changedRow.cases,
              changedRow.loosePouches,
              changedRow.unitId,
              null, 
              null,
              null, 
              null,
              changedRow.cases || 0,
              changedRow.loosePouches || 0,
              data.domesticSaleOrderNo,
              data.saleOrderDate,
              null,
              changedRow.transactionType, 
              changedRow.productCategory, 
          );
          inputDtoArray.push(reqObj);
      });
  
      if (inputDtoArray.length === 0) {
          message.warning('Please enter stock to sale.');
          return;
      }
  
      saleOrderService.updateDomesticSale(inputDtoArray).then(res => {
          if (res.status) {
              AlertMessages.getSuccessMessage(res.internalMessage);
              setTimeout(() => {
                  message.success('Submitted successfully');
                  props.onSubmitSuccess();
              }, 500);
          } else {
              AlertMessages.getErrorMessage(res.internalMessage);
          }
      }).catch(err => {
          const backendMessage = err?.response?.data?.internalMessage || 'Something Went Wrong.Please Try Again';
          message.error(backendMessage);
          AlertMessages.getErrorMessage(err.message);
      });
  };

  //   const onFinish = (data: formLocationWiseDataType & formHeaderDataType) => {  
  //     const inputDtoArray: DomesticSalesModel[] = [];
      
  //     locationIds.forEach(locId => {
  //         const currLocRecInfo = data[locId];
  //         const initialLocRecInfo = initialData[locId];

  //         const hasChanged = 
  //             currLocRecInfo.cases !== initialLocRecInfo.cases ||
  //             currLocRecInfo.loosePouches !== initialLocRecInfo.loosePouches ||
  //             currLocRecInfo.packStyleId !== initialLocRecInfo.packStyleId;
             
  //         if (hasChanged) {
  //             const reqObj = new DomesticSalesModel(
  //                 null,
  //                 data.customer,
  //                 props.varientId,
  //                 currLocRecInfo.packStyleId,
  //                 currLocRecInfo.quantity,
  //                 locId,
  //                 currLocRecInfo.stockId,
  //                 data.unitPrice,
  //                 data.taxId,
  //                 data.amount,
  //                 currLocRecInfo.cases,
  //                 currLocRecInfo.loosePouches,
  //                 currLocRecInfo.unitId,
  //                 null,
  //                 null,
  //                 null,
  //                 null,
  //                 domesticSalesDataForForm[0].cases || 0,
  //                 domesticSalesDataForForm[0].loosePouches || 0,
  //                 data.domesticSaleOrderNo,
  //                 data.saleOrderDate,
  //             );
  //             inputDtoArray.push(reqObj);
  //         }
  //     });

  //     if (inputDtoArray.length === 0) {
  //         message.warning('Please enter stock to sale.');
  //         return;
  //     }

  //     saleOrderService.updateDomesticSale(inputDtoArray).then(res => {
  //         if (res.status) {
  //             AlertMessages.getSuccessMessage(res.internalMessage);
  //             setTimeout(() => {
  //                 message.success('Submitted successfully');
  //                 props.onSubmitSuccess(); 
  //             }, 500);
  //         }
  //         else{
  //           AlertMessages.getErrorMessage(res.internalMessage);

  //         }
  //     }).catch(err => {
  //       const backendMessage = err?.response?.data?.internalMessage || 'Something Went Wrong.Please Try Again';
  //       message.error(backendMessage); 
  //         AlertMessages.getErrorMessage(err.message);
  //     });
  // };

    const clearData = () => {
        form.resetFields()
      }


    

    const Columns = [
        {

            title: "Location",
            dataIndex: "locationName",
            render: (index, record:DomesticSalesModel) => (
                <>
                <Form.Item name={'locationName'} initialValue={record?.locationName?record.locationName:0}>
                {record.locationName}
                </Form.Item>
                  <Form.Item name={'varient'} initialValue={record?.varient?record.varient:0}>
                  <Input
                      type="text"
                      placeholder="varient"
                      style={{ height: '40px', width: '100%' }}
                      defaultValue={record.varient}
                      hidden
                  />
                  </Form.Item>
                  </>
            ),
        },
        {

          title: "Pack Style",
          dataIndex: "packStyle",
          render: (index, record:DomesticSalesModel) => (
              <>
              <Form.Item  initialValue={record?.packStyle?record.packStyle:0}>
              {record.packStyle}
              </Form.Item>
              <Form.Item>
                  <Input 
                      type="text"
                      hidden
                  />
                  </Form.Item>
                </>
          ),
      },
      {
        title: "Transaction Type",
        dataIndex: "transactionType",
        render: (index, record: DomesticSalesModel) => {
            const uniqueKey = `${record.location}-${record.transactionType}-${record.productCategory}`;
            return (
                <>
                    <Form.Item name={[uniqueKey, 'transactionType']} initialValue={record?.transactionType ? record.transactionType : 0}>
                        {record.transactionType}
                    </Form.Item>
                    <Form.Item>
                        <Input hidden />
                    </Form.Item>
                </>
            );
        },
    },
    {
        title: "Product Category",
        dataIndex: "productCategory",
        render: (index, record: DomesticSalesModel) => {
            const uniqueKey = `${record.location}-${record.transactionType}-${record.productCategory}`;
            return (
                <>
                    <Form.Item name={[uniqueKey, 'productCategory']} initialValue={record?.productCategory ? record.productCategory : 0}>
                        {record.productCategory}
                    </Form.Item>
                    <Form.Item>
                        <Input hidden />
                    </Form.Item>
                </>
            );
        },
    },
  {
    title: "Cases",
    dataIndex: "cases",
    render: (index, record: DomesticSalesModel) => {
        const uniqueKey = `${record.location}-${record.transactionType}-${record.productCategory}`;
        return (
            <>
            <div style={{ display: "flex", gap: "10px" }}>
                <Form.Item name={[uniqueKey, 'cases']} >
                    <Input
                        type="text"
                        placeholder="Enter cases"
                        style={{ height: '40px', width: '100%' }}
                        // defaultValue={record.cases}
                        onChange={(e) => handleInputChange(parseFloat(e.target.value), record, 'cases', index)}
                    />
                </Form.Item>
                <div style={{paddingTop:"8px"}}><b>{record.cases}</b></div>
                </div>
                <Form.Item name={[uniqueKey, 'packStyleId']} initialValue={record?.packStyleId ? record.packStyleId : 0}>
                    <Input
                        type="text"
                        placeholder="packStyleId"
                        style={{ height: '40px', width: '100%' }}
                        defaultValue={record.packStyleId}
                        hidden
                    />
                </Form.Item>
            </>
        );
    },
},
{
  title: "Loose Pouches",
  dataIndex: "loosePouches",
  render: (index, record: DomesticSalesModel) => {
      const uniqueKey = `${record.location}-${record.transactionType}-${record.productCategory}`;
      return (
          <>
              <div style={{ display: "flex", gap: "10px" }}>
                  <Form.Item name={[uniqueKey, 'loosePouches']}>
                      <Input
                          type="text"
                          placeholder="Enter Loose Pouches"
                          style={{ height: '40px', width: '100%' }}
                          onChange={(e) => handleInputChange(parseFloat(e.target.value), record, 'loosePouches', index)}
                      />
                  </Form.Item>
                  <div style={{ paddingTop: "8px" }}>
                      <b>{record.loosePouches}</b>
                  </div>
              </div>
              <Form.Item name={[uniqueKey, 'unitId']} initialValue={record?.unitId ? record.unitId : 0}>
                  <Input
                      type="text"
                      style={{ height: '40px', width: '100%' }}
                      defaultValue={record.unitId}
                      hidden
                  />
              </Form.Item>
          </>
      );
  },
},
{
    title: "Quantity (In Kgs)",
    dataIndex: "quantity",
    render: (index, record) => (
        <>
            <Form.Item name={'quantity'}>
                {parseFloat(record.quantity).toLocaleString('en-IN')}
            </Form.Item>
            <Form.Item name={[record.location, 'stockId']} initialValue={record?.stockId ? record.stockId : 0}>
                <Input
                    type="text"
                    style={{ height: '40px', width: '100%' }}
                    defaultValue={record.stockId}
                    hidden
                />
            </Form.Item>
        </>
    ),
},
{
    title: "Sale Quantity (In Kgs)",
    dataIndex: "saleQuantity",
    render: (index, record) => {
        const uniqueKey = `${record.location}-${record.transactionType}-${record.productCategory}`;
        return (
            <>
                <Form.Item name={[uniqueKey, 'saleQuantity']} initialValue={salesData[uniqueKey] ? salesData[uniqueKey].toFixed(3) : "0.000"}>
                    {salesData[uniqueKey] ? salesData[uniqueKey].toFixed(3) : "0.000"}
                </Form.Item>
                <Form.Item>
                    <Input
                        type="text"
                        hidden
                    />
                </Form.Item>
            </>
        );
    },
}
        
        
    ];

    const [tab, setTab] = useState<string>(undefined);

  return (
    <div>

{/* {tab ? <Redirect to={{ pathname: "/domestic-sales", state: tab }} /> : null} */}
        <Card title={<span style={{ color: 'white' }}>Domestic Sales</span>} style={{ textAlign: "center" }}
         headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
        >
            <Form form={form} onFinish={onFinish} layout='vertical'>
                <Row gutter={12}> 
                    <Col xs={{ span: 12 }} sm={{ span: 12 }} md={{ span: 4}} lg={{ span: 8}} xl={{ span: 5}}>
                    <Form.Item name="id" 
                    hidden={true} 
                    >
                        <Input />
              </Form.Item>
              <Form.Item name="domesticSaleOrderNo" 
                    hidden={true} 
                    >
                        <Input />
              </Form.Item>
                    <Form.Item label="Customer" name="customer" rules={[{ required: true, message: 'Please select Customer' }]}>
                    <Select
                showSearch
                optionFilterProp="children"
                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                placeholder="Select  customer"
                allowClear
                >
                {/* temperory */}
                 {/* {endCustomers.map(dropData => {
                  return <Option value={dropData.value}>{dropData.name}</Option>
                })} */}
                {endcustomersData.map(dropData => {
                  return <Option value={dropData.endCustomerId}>{dropData.endCustomerName}</Option>
                })}
              </Select>
              </Form.Item>
                    </Col>
                    <Col xs={{ span: 12 }} sm={{ span: 12 }} md={{ span: 4}} lg={{ span: 8}} xl={{ span: 5}}>
                    <Form.Item label="Unit Price (Per Kg)" name="unitPrice" rules={[{ required: true, message: 'Please Enter Unit Price' }]}>
                <Input placeholder=" Enter Unit Price"/>
              </Form.Item>
                    </Col>
                    <Col xs={{ span: 12 }} sm={{ span: 12 }} md={{ span: 4}} lg={{ span: 8}} xl={{ span: 5}}>
                    <Form.Item label='Tax' name='taxId'
              // rules={[
              //   {
              //     required: true,
              //     message: 'Tax is required'
              //   }
              // ]}
              >
                {/* <Input placeholder="Select UOM" /> */}
                <Select
                  showSearch
                  allowClear
                  optionFilterProp="children"
                  placeholder="Select Tax"
                //   onChange={(val, res) => taxChange(val, res)}
                // onChange={(value,row)=>onUomChange(value,index,row)}
                >
                  {taxes.map((e) => {
                    return (
                      <Option key={e.taxId} value={e.taxId} tax={e.taxPercentage}>{e.taxName}</Option>
                    )
                  })}
                </Select>
              </Form.Item>
                    </Col>
                  <Col xs={{ span: 12 }} sm={{ span: 12 }} md={{ span: 4}} lg={{ span: 8}} xl={{ span: 5}}>
                  <Form.Item
              name="saleOrderDate"
              label="Sale Order Date"
              rules={[{ required: true, message: 'Please Select Sale Order Date' }]}
            >
              <DatePicker style={{ width: '100%' }}
                showToday={true} />
            </Form.Item>
                  </Col>
                </Row>
             
              <Table columns={Columns} dataSource={domesticSalesDataForForm} size='small' pagination={false}/>
              <Row>
                        <Col span={24} style={{ textAlign: 'right' }}>
                            <Button type="primary" htmlType="submit" style={{backgroundColor:"green"}}>
                                Submit
                            </Button>
                            <Button htmlType="button" style={{ margin: '0 14px' }}
                                onClick={clearData} >
                                Reset
                            </Button>
                        </Col>
                </Row>
              
            </Form>
        </Card>
    </div>
  )
}

export default DomesticSalesForm