import { EnquiryIdreq } from "@gtpl/shared-models/enquiry-management"
import { Button, Card, Descriptions, message, Tooltip } from "antd"
import  Table, { ColumnProps } from "antd/lib/table"
import Link from "antd/lib/typography/Link"
import { EnquiriesService } from "libs/shared-services/enquiry-management/src/lib/enquiries-service"
import moment from "moment"
import React, { useEffect, useState } from "react"
import { useLocation } from "react-router-dom";
export interface InquiryDetailedViewProps{
  enquiryId :number
  rec:any
  
}
export function InquiryDetailedView(props:InquiryDetailedViewProps){

   
    const [ mainData, setMainData ] = useState<any[]>([])

    const [child,setchild] = useState<any[]>([])
    const [page, setPage] = React.useState(1);
    const enquiryService = new EnquiriesService
    let location = useLocation();
    
    useEffect(()=>{
        getAllEnquiryDetailsById(props.enquiryId)  
      },[props.enquiryId])
    
    
    const getAllEnquiryDetailsById = (id:any) => {
      const req=new EnquiryIdreq(props.enquiryId)
        enquiryService.getAllEnquiryDetailsById({enquiryid:id}).then(res => {
            if(res.status){
                setMainData(res.data)
            }
        })
    }
    console.log(mainData[0]?.productDetails,"mainData")
console.log(mainData,"Datataaa")
     const columns: ColumnProps<any>[] = [
    {
      title:  <span style={{ fontSize: '15px' }}>S No</span>,
      key: 'sno',
      width: '70px',
      responsive: ['lg'],
      render: (text, object, index) => (page - 1) * 10 + (index + 1)
      
    },
    {
      title:  <span style={{ fontSize: '15px' }}>Order Type</span>,
      dataIndex: 'orderType',
      align :"center",
      render: (text, record) => (
        <span style={{ fontSize: '15px' }}>{text}</span>
      ),
    },
    {
        title:  <span style={{ fontSize: '15px' }}>Category</span>,
        dataIndex: 'category',
        align :"center",
        render: (text, record) => (
          <span style={{ fontSize: '15px' }}>{text}</span>
        ),
      },
      {
        title:  <span style={{ fontSize: '15px' }}>Brand</span>,
        dataIndex: 'brandName',
        align :"center",
        render: (text, record) => (
          <span style={{ fontSize: '15px' }}>{text}</span>
        ),
      },
    {
      title:  <span style={{ fontSize: '15px' }}>Variant</span>,
      dataIndex: 'shortCode',
      align :"center",
      render: (text, record) => (
        <span style={{ fontSize: '15px' }}>{text?text:'-'}</span>
      ),
    },
    {
      title:  <span style={{ fontSize: '15px' }}>Pack Style</span>,
      dataIndex: 'packStyleName',
      align :"center",
      render: (text, record) => (
        <span style={{ fontSize: '15px' }}>{text}</span>
      ),
    },
    {
      title:  <span style={{ fontSize: '15px' }}>Pack Count</span>,
      dataIndex: 'packCount',
      align :"center",
      render: (text, record) => (
        <span style={{ fontSize: '15px' }}>{text}</span>
      ),
    },
    {
      title:<span style={{ fontSize: '15px' }}>Style Weighment</span>,
      dataIndex: 'styleWeighment',
      align :"center",
      render: (text, record) => (
        <span style={{ fontSize: '15px' }}>{text}</span>
      ),
    },
    {
        title: <span style={{ fontSize: '15px' }}>Unit Price</span>,
        dataIndex: 'unitPrice',
        align :"center",
        render: (text, record) => (
          <span style={{ fontSize: '15px' }}>{Number(text)} per {record.priceBasedOn == 'LBS' ? 'LB' : 'KG'}</span>
        ),
      },
      {
        title: <span style={{ fontSize: '15px' }}>No of Cases</span>,
        dataIndex: 'noOfCases',
        align :"center",
        render: (text, record) => (
          <span style={{ fontSize: '15px' }}>{text}</span>
        ),
      },
      {
        title: <span style={{ fontSize: '15px' }}>Case Weight</span>,
        dataIndex: 'caseWeight',
        align :"center",
        render: (text, record) => (
          <span style={{ fontSize: '15px' }}>{text}</span>
        ),
      },
      {
        title: <span style={{ fontSize: '15px' }}>Net Weight</span>,
        dataIndex: 'netWeight',
        align :"center",
        render: (text, record) => (
          <span style={{ fontSize: '15px' }}>{text}</span>
        ),
        
      },
      {
        title:<span style={{ fontSize: '15px' }}>Net Amount</span>,
        dataIndex: 'netAmount',
        align :"center",
        render: (text, record) => (
          <span style={{ fontSize: '15px' }}>{text}</span>
        ),
      },
      {
        title:<span style={{ fontSize: '15px' }}>No of Skewers</span>,
        dataIndex: 'noOfSkewers',
        align :"center",
        render: (text, record) => (
          <span style={{ fontSize: '15px' }}>{text}</span>
        ),
      },
      {
        title: <span style={{ fontSize: '15px' }}>Variety</span>,
        dataIndex: 'varietyName',
        align :"center",
        render: (text, record) => (
          <span style={{ fontSize: '15px' }}>{text}</span>
        ),
      },
     
    
  ];



  const regexPattern = /\d+\-+\d+\-+\d+/; 

const etdDate = mainData[0]?.etd;
const etaDate = mainData[0]?.eta;
const extractedETD = regexPattern.test(etdDate) ? etdDate.match(regexPattern)[0] : "--";
const extractedETA = regexPattern.test(etaDate) ? etaDate.match(regexPattern)[0] : "--";


return(
    <>
     <Card title={<span style={{color:'white'}}>Enquiry Details</span>}
    style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }} >

       <Descriptions size="small"  >
        <Descriptions.Item label='Enquiry Number' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.enquiryNumber ? mainData[0]?.enquiryNumber : "--"}
            </Descriptions.Item>
           
            {/* <Descriptions.Item label='Order Type' labelStyle={{ color: 'black', fontWeight: 'bold'}} >  
            {mainData[0]?.orderType ? mainData[0]?.orderType : "--"}
            </Descriptions.Item> */}
            
            <Descriptions.Item label='Source Form' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.sourceFrom ? mainData[0]?.sourceFrom : "--"}
            </Descriptions.Item>
           
            <Descriptions.Item label='Agent' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.clientName ? mainData[0]?.clientName : "--"}
            </Descriptions.Item>

            <Descriptions.Item label='Buyer' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.endCustomerName ? mainData[0]?.endCustomerName : "--"}
            </Descriptions.Item>

            {/* <Descriptions.Item label='FOB Consideration' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.isFOB ? 'YES' : "NO"}
            </Descriptions.Item> */}

            <Descriptions.Item label='Sales Commission' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.salesCommission ? mainData[0]?.salesCommission : "--"}
           
            </Descriptions.Item>
            <Descriptions.Item  label='Enquiry Date' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.enquiryDate ? moment(mainData[0]?.enquiryDate).format('YYYY-MM-DD') : "--"}
            </Descriptions.Item>
            
            <Descriptions.Item label='No of Containers' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.noOfContainers ? mainData[0]?.noOfContainers : "--"}
            </Descriptions.Item>

            <Descriptions.Item label='Agent Address' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.agentAddress ? mainData[0]?.agentAddress : "--"}
            </Descriptions.Item>

            <Descriptions.Item label='Buyer Address' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.buyerAddress ? mainData[0]?.buyerAddress : "--"}
            </Descriptions.Item>

            <Descriptions.Item label='Country' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.countryName ? mainData[0]?.countryName : "--"}
            </Descriptions.Item>

            <Descriptions.Item label='Destination' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.destinationName ? mainData[0]?.destinationName : "--"}
            </Descriptions.Item>

            <Descriptions.Item label='ETD' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {extractedETD}
            </Descriptions.Item>

            <Descriptions.Item label='ETA' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {extractedETA}
            </Descriptions.Item>
            {/* <Descriptions.Item label='ETD' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.etd ? moment( mainData[0]?.etd ).format('YYYY-MM-DD'): "--"}
            </Descriptions.Item>

            <Descriptions.Item label='ETA' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.eta ? moment(mainData[0]?.eta) .format('YYYY-MM-DD'): "--"}
            </Descriptions.Item> */}

            <Descriptions.Item label='Delivery Terms' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.deliveryTermsName ? mainData[0]?.deliveryTermsName : "--"}
            </Descriptions.Item>

            <Descriptions.Item label='Payment Terms' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.paymentTermsName ? mainData[0]?.paymentTermsName : "--"}
            </Descriptions.Item>
        
            <Descriptions.Item label='Shipment Terms' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.shippingTermName ? mainData[0]?.shippingTermName : "--"}
            </Descriptions.Item>

            <Descriptions.Item label='Processing Unit' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.processingUnit ? mainData[0]?.processingUnit : "--"}
            </Descriptions.Item>

            <Descriptions.Item label='Manufacturing Unit' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.manufacturingUnit ? mainData[0]?.manufacturingUnit : "--"}
            </Descriptions.Item>
        
            <Descriptions.Item label='Currency' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.currencyName ? mainData[0]?.currencyName : "--"}
            </Descriptions.Item>

            <Descriptions.Item label='Remarks' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.remarks ? mainData[0]?.remarks: "--"}
            </Descriptions.Item>

            <Descriptions.Item label='Plant' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
            {mainData[0]?.unitName ? mainData[0]?.unitName : "--"}
            </Descriptions.Item>
              {
                mainData[0]?.rejectReason ? (<>
              <Descriptions.Item label='Reason' labelStyle={{ color: 'black', fontWeight: 'bold'}} >
              {mainData[0]?.rejectReason ? mainData[0]?.rejectReason : "--"}
              </Descriptions.Item>
                
                </>) : (<></>)
              }
               {
                mainData[0]?.enqRejectDes ? (<>
              <Descriptions.Item label='Reject Description' labelStyle={{ color: 'black', fontWeight: 'bold' }}>
                {mainData[0]?.enqRejectDes ? (
                  <Tooltip title={mainData[0].enqRejectDes}>
                    {mainData[0].enqRejectDes.length > 50 ? `${mainData[0].enqRejectDes.substring(0, 50)}...` : mainData[0].enqRejectDes}
                  </Tooltip>
                ) : "--"}
              </Descriptions.Item>
                
                </>) : (<></>)
              }
            
        </Descriptions>
          <Table
          columns={columns}
        dataSource={mainData[0]?.productDetails}

          size="small"
          pagination={{
            onChange(current) {
              setPage(current);
            }
          }}
          scroll={{x:true}}
          />
     </Card>
    </>
)
}
export default InquiryDetailedView