import React, { useEffect, useState } from 'react';
import { Card, Button, Form, Row, Col, Select, Input, DatePicker } from 'antd';
import Link from 'antd/lib/typography/Link';
import {EmployeeService, VehicleService} from '@gtpl/shared-services/masters';
import './vehicle-assignment-form.css';
import { EmployeeRolesEnum, IceTypeEnum, SupplierTypeEnum, VehicleTypeEnum } from '@gtpl/shared-models/common-models';
import { EmployeeDto, VehicleDto } from '@gtpl/shared-models/masters';
import {IndentService} from '@gtpl/shared-services/raw-material-procurement';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { Redirect, useLocation } from 'react-router-dom';
import { HarvestingTime, IndentModel, IndentRequest } from '@gtpl/shared-models/raw-material-procurement';
import {VehicleAssignmentService} from '@gtpl/shared-services/transportation';
import moment from 'moment';
import { HrmsEmpDetService, RolesService } from '@gtpl/shared-services/masters';
import { VehicleAssignmentDTO } from '@gtpl/shared-models/transportation';
/* eslint-disable-next-line */
export interface VehicleAssignmentFormProps {}
const { Option } = Select;

export function VehicleAssignmentForm(
  props: VehicleAssignmentFormProps
) {
  let location = useLocation();
  const indentStatusInfo: IndentModel | any = location.state;
  // console.log(location.state);
  const [vehicleAssignmentForm] = Form.useForm();
  const [tab, setTab] = useState<string>(undefined);
  const [vehiclesData, setVehiclesData] = useState<VehicleDto[]>([]);
  const [driversData, setDriversData] = useState<EmployeeDto[]>([]);
  const [indentData, setIndentData] = useState<any[]>([]);
  const [vehiclesInfo, setVehiclesInfo] = useState<any[]>([]);

  const employeeService = new EmployeeService();
 const empService = new HrmsEmpDetService();
  const vehicleService = new VehicleService();
  const [isUpdate, setIsUpdate] = useState<boolean>(false);
  const [afterSubmitDisable, setAfterSubmitDisable] = useState<boolean>(false);
  const vehicleAssignmentService = new VehicleAssignmentService();
  const [driverName, setDriverName] = useState();
  const indentService = new IndentService();
  const [own, setOwn] = useState<boolean>(false);

const vehicleInfoByIndent =() =>{
  vehicleAssignmentService.getVehicleAssignDetailsByIndentId({indentId:indentStatusInfo.data.indentId}).then(res=>{
    if(res.status){
      setVehiclesInfo(res.data?.[0]?.vechileInfo)
      // console.log(res.data?.[0]?.vechileInfo);
      
    }else{
      setVehiclesInfo([])
    }
  })
}
useEffect(() => {
  if (vehiclesInfo.length) {
    vehicleAssignmentForm.setFieldsValue({
      vechileInfo: vehiclesInfo, // Make sure this aligns with the structure expected in your form
    });
  }
}, [vehiclesInfo]);
// console.log('Vehicles Info:', vehiclesInfo);
// console.log('Form Values:', vehicleAssignmentForm.getFieldsValue());

  const saveData = (values) => {
    // console.log(values,'ppppppppppppppp');
    setAfterSubmitDisable(true);

  const userName = localStorage.getItem("createdUser");
  values.createdUser = userName;
  if(indentStatusInfo.data?.vehicleType === VehicleTypeEnum.OWN){
    setOwn(true)
    values.driverName = driverName
  } 
  if(!indentStatusInfo.update){

    vehicleAssignmentService.createVehicleAssignment(values).then(res => {
      if(res.status){
        goToGrid()
        AlertMessages.getSuccessMessage(res.internalMessage);
      }
      else{
        AlertMessages.getErrorMessage(res.internalMessage);
      }
    }).catch(err => {
      AlertMessages.getInfoMessage(err.message);
    })
  }else{
    
    vehicleAssignmentService.updateVehicleAssignment(values).then(res => {
      if(res.status){
        goToGrid()
        AlertMessages.getSuccessMessage(res.internalMessage);
      }
      else{
        AlertMessages.getErrorMessage(res.internalMessage);
      }
    }).catch(err => {
      AlertMessages.getInfoMessage(err.message);
    })
  }
  }
  useEffect(()=>{
    getAllDriversData();
    getAllVehiclesData();
    // console.log(moment(indentStatusInfo.harvestingDate).format("YYYY-MM-DD"));
    if (indentStatusInfo != undefined) {
      // console.log(indentStatusInfo);
      if(indentStatusInfo.data?.vehicleType === VehicleTypeEnum.OWN){
        setOwn(true)
        // values.driverName = driverName
      } 
      vehicleAssignmentForm.setFieldsValue({
          harvestingTime: indentStatusInfo.data.harvestingTime,
          harvestingDate: moment(indentStatusInfo.data.harvestingDate, 'YYYY-MM-DD'),
          indentId: indentStatusInfo.data.indentId,
          indentCode: indentStatusInfo.data.indentCode,
          farmerName: indentStatusInfo.data.farmName,
          location: indentStatusInfo.data.address,
          driverId: indentStatusInfo.data.driverId === 0 ?null:indentStatusInfo.data.driverId,
          vehicleNum: indentStatusInfo.data.vehicleNum===0?null:indentStatusInfo.data.vehicleNum,
          vehicleType:indentStatusInfo.data.vehicleType,
          iceType:indentStatusInfo.data.iceType,
          iceQuantity:indentStatusInfo.data.iceQuantity,
          iceFactory:indentStatusInfo.data.iceFactory,
          driverName:indentStatusInfo.data.driverName1,
          assigneddate: moment()
      });
      getIndentItemsData(indentStatusInfo.data.indentId);
      vehicleInfoByIndent()
      
    } 
  },[indentStatusInfo])

  const getIndentItemsData = (indentId) => {
    const indentReq = new IndentRequest();
    indentReq.indentId =indentId;
    indentService.getIndentDataById(indentReq).then((res) => {
      if(res.status){
        setIndentData(res.data)
        const farmerOrDealer = (res.data)[0].supplierType == SupplierTypeEnum.DEALER ? (res.data)[0].brokerName : (res.data)[0].farmerName
        vehicleAssignmentForm.setFieldsValue({farmerName:farmerOrDealer,location:(res.data)[0].farmAddress})
      }
      else {
        if (res.intlCode) {
          setIndentData([]);
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    })
  }
  const getAllDriversData = () =>{
    empService.getAllActiveDrivers().then(res => {
      if(res.status){
        setDriversData(res.data);
        // console.log(res.data);
      }else {
        if (res.intlCode) {
            AlertMessages.getErrorMessage(res.internalMessage);
        } else {
        AlertMessages.getErrorMessage(res.internalMessage);
        }
        setDriversData([]);
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setDriversData([]);
    })
  }
  const getAllVehiclesData = () =>{
    vehicleService.getAllAavailableVehicles().then(res=>{
      if(res.status){
        setVehiclesData(res.data);
        // console.log(res.data);
      }else {
        if (res.intlCode) {
            AlertMessages.getErrorMessage(res.internalMessage);
        } else {
        AlertMessages.getErrorMessage(res.internalMessage);
        }
        setVehiclesData([]);
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setVehiclesData([]);
    })
  }
  const goToVehicleAssignmentGrid = () => {
    setTab("NeedToAssign");
  }
  const onReset = () => {
    vehicleAssignmentForm.resetFields();
}
const goToGrid = () => {
  setTab(indentStatusInfo.key);
}
// const driverChange = (val,res) =>{
//   console.log(val,res);
//   setDriverName(res.name)
// }
const driverChange = (value, index) => {
  // Assuming you have a driver list that contains both driverId and driverName
  const selectedDriver = driversData.find(driver => driver.employeeId === value);

  // Set the driverName for the specific index in the Form.List
  vehicleAssignmentForm.setFieldsValue({
    vechileInfo: vehicleAssignmentForm.getFieldValue('vechileInfo').map((item, i) => 
      i === index ? { ...item, driverName: selectedDriver?.employeeName } : item
    ),
  });
};
const vehicleChange = (val) =>{
  // console.log(val,'vehicle typeeeeeeeee');
  if(val === VehicleTypeEnum.OWN){
    setOwn(true)
  }
  else{
    setOwn(false)
  }
}
const validateDuplicateVehicle = (_, value) => {
  const vehicleInfo = vehicleAssignmentForm.getFieldValue('vechileInfo') || [];
  const selectedVehicles = vehicleInfo.map((item) => item.vehicleNum);

  const duplicateCount = selectedVehicles.filter(
    (vehicle) => vehicle === value
  ).length;

  if (duplicateCount > 1) {
    return Promise.reject(new Error('Vehicle already selected!'));
  }
  return Promise.resolve();
};
const validateDuplicateDriver = (_, value) => {
  const vehicleInfo = vehicleAssignmentForm.getFieldValue('vechileInfo') || [];
  const selectedDrivers = vehicleInfo.map((item) => item.driverId);

  const duplicateCount = selectedDrivers.filter(
    (vehicle) => vehicle === value
  ).length;

  if (duplicateCount > 1) {
    return Promise.reject(new Error('Driver already selected!'));
  }
  return Promise.resolve();
};
return (
  <>
  {tab ? <Redirect to={{pathname:"/vehicle-assignment", state:tab}}/>:null}
  <Card title={<span style={{ color: 'white' }}>Assign Vehicle & Driver</span>}
    style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }} extra={<Link onClick={e => goToVehicleAssignmentGrid()} ><span style={{ color: 'white' }} ><Button className='panel_button' >View </Button> </span></Link>} >
      <Form layout="vertical" form={vehicleAssignmentForm} name="control-hooks" onFinish={saveData} initialValues={indentStatusInfo}>
        <Row gutter={24}>
          
          <Form.Item name="indentId" hidden>
            <Input />
          </Form.Item>
          <Form.Item name="assigneddate" initialValue={moment()} hidden>
            <DatePicker format="YYYY-MM-DD HH:mm:ss" defaultValue={moment('YYYY-MM-DD HH:mm:ss')}  />
          </Form.Item>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
            <Form.Item name="vehicleType" label="Vehicle Type" rules={[{ required: true, message: 'Missing Vehicle Type' }]} >
              <Select
                placeholder="Select Vehicle Type"
                allowClear
                onChange={vehicleChange}
              // disabled={userName != 'rmmanager'}
              >
                <Option value={null || 0}>Select Vehicle Type</Option>
                {Object.values(VehicleTypeEnum).map((i) => {
                return (
                  <Option key={i} value={i}>
                    {i}
                  </Option>
                );
              })}

              </Select>
            </Form.Item>

          </Col>
          {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
          { own?
          <Form.Item name="vehicleNum" label="Vehicle"  rules={[{ required: true, message: 'Missing Vehicle' }]}>
              <Select
                  placeholder="Select Vehicle"
                  showSearch
                  optionFilterProp="children"
                  filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  allowClear
                  disabled={false} >
                  <Option value="Please Select">Please Select</Option>
                  {vehiclesData.map(dropData => {
                      return <Option value={dropData.registrationNumber}>{dropData.registrationNumber}</Option>
                  })}

              </Select>
            </Form.Item >
             :
            <Form.Item name="vehicleNum" label="Vehicle"  rules={[{ required: true, message: 'Missing Vehicle' }]}>
                  <Input/>
            </Form.Item>
          } 
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
           {own? 
           <Form.Item name="driverId" label="Driver"  rules={[{ required: true, message: 'Missing drivers' }]}>
              <Select
              onChange={driverChange}
                  placeholder="Select Driver"
                  showSearch
                  optionFilterProp="children"
                  filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  allowClear
                  disabled={false} >
                  <Option value={''}>Please Select</Option>
                  {driversData.map(dropData => {
                       return <Option value={dropData.employeeId} name={dropData.employeeName}>{dropData.employeeName}</Option>
                      })}
              </Select>
            </Form.Item>
            :
            <Form.Item name="driverName" label="Driver"  rules={[{ required: true, message: 'Missing Driver' }]}>
                  <Input/>
            </Form.Item>
}
          </Col> */}
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
            <Form.Item name="indentCode" label="Indent Code" rules={[{ required: true,message:'Missed Indent Code' }]}>
                <Input disabled/>
            </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
            <Form.Item name="farmerName" label="Farmer Name" rules={[{ required: false,message:'Missed Farmer Name' }]}>
                <Input disabled/>
            </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
            <Form.Item name="location" label="Location" rules={[{ required: true,message:'Missed Location' }]}>
                <Input />
            </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
            <Form.Item name="harvestingDate" label="Harvesting Date" rules={[{ required: true,message:'Missed Harvesting Date' }]}>
                <DatePicker onChange={() => { }} disabled={true} style={{ width: '100%' }} format={'YYYY-MM-DD'} />
            </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
            <Form.Item
              name="harvestingTime"
              label="Harvesting Time"
              rules={[
                  {
                      required: true, message: 'Missed Harvesting Time'
                  },
              ]}>
              <Select
                  placeholder="Select Harvesting Time"
                  // defaultValue={HarvestingTime.BOOKED}
                  disabled={true}
              >
                  {/* <Option key={0} value={null}>Select Container Status</Option>
                  {ContainerStatusInput.map((container) => {
                      return <Option key={container.status} value={container.status}>{container.status}</Option>
                  })} */}
              </Select>
            </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
            <Form.Item name="iceType" label="Ice Type" rules={[{ required: true,message:'Missed Ice Type' }]} >
              <Select
                placeholder="Select Ice Type"
                allowClear
                // onChange={vehicleChange}
              // disabled={userName != 'rmmanager'}
              >
                <Option value={null || 0}>Select Ice Type</Option>
                {Object.values(IceTypeEnum).map((i) => {
                return (
                  <Option key={i} value={i}>
                    {i}
                  </Option>
                );
              })}

              </Select>
            </Form.Item>

          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
          <Form.Item name="iceFactory" label="Ice Factory"  rules={[{ required: true,message:'Missed Ice Factory' }]}>
                  <Input/>
            </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
          <Form.Item name="iceQuantity" label="Ice Quantity" rules={[{ required: true,message:'Missed Ice Quantity' }]}>
                  <Input type='number'/>
            </Form.Item>
            </Col>
            </Row>

            {/* <Row  gutter={24}> */}

            <Form.List name="vechileInfo" initialValue={vehiclesInfo}>
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, fieldKey, ...restField },index) => (
              <Row gutter={24} key={key}>
                {/* <Col xs={24} sm={24} md={5} lg={5} xl={5}>
                  <Form.Item
                    {...restField}
                    name={[name, 'vehicleType']}
                    fieldKey={[fieldKey, 'vehicleType']}
                    label="Vehicle Type"
                    rules={[{ required: true, message: 'Missing Vehicle Type' }]}
                  >
                    <Select placeholder="Select Vehicle Type" allowClear>
                      {Object.values(VehicleTypeEnum).map((i) => (
                        <Option key={i} value={i}>
                          {i}
                        </Option>
                      ))}
                    </Select>
                  </Form.Item>
                </Col> */}
{ own?<Form.Item  {...restField}
           name={[name, 'driverName']}
           fieldKey={[fieldKey, 'driverName']}
            label="Driver"   hidden initialValue={driverName}>
              <Input defaultValue={driverName}/>
            </Form.Item>:''}
            <Form.Item {...restField}
           name={[name, 'vehicleAssignId']}
           fieldKey={[fieldKey, 'vehicleAssignId']} hidden>
            <Input />
          </Form.Item>
                <Col span={8}>
                { own?
          <Form.Item 
          {...restField}
          name={[name, 'vehicleNum']}
          fieldKey={[fieldKey, 'vehicleNum']}
          label="Vehicle"  rules={[{ required: true, message: 'Missing Vehicle' },{
            validator: validateDuplicateVehicle,
          },]}>
              <Select
                  placeholder="Select Vehicle"
                  showSearch
                  optionFilterProp="children"
                  filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  allowClear
                  disabled={false} >
                  <Option value="Please Select">Please Select</Option>
                  {vehiclesData.map(dropData => {
                      return <Option value={dropData.registrationNumber}>{dropData.registrationNumber}</Option>
                  })}

              </Select>
            </Form.Item >
             :
            <Form.Item  {...restField}
            name={[name, 'vehicleNum']}
            fieldKey={[fieldKey, 'vehicleNum']}
            label="Vehicle"  rules={[{ required: true, message: 'Missing Vehicle' }]}>
                  <Input/>
            </Form.Item>
          } 
               
                </Col>
                
                <Col span={8}>
                {own? 
           <Form.Item  {...restField}
           name={[name, 'driverId']}
           fieldKey={[fieldKey, 'driverId']}
            label="Driver"  rules={[{ required: true, message: 'Missing drivers' },{
              validator: validateDuplicateDriver,
            },]}>
              <Select
              onChange={(value) => driverChange(value, index)}
              // onSelect={driverChange}
                  placeholder="Select Driver"
                  showSearch
                  optionFilterProp="children"
                  filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  allowClear
                  disabled={false} >
                  <Option value={''}>Please Select</Option>
                  {driversData.map(dropData => {
                       return <Option value={dropData.employeeId} name={dropData.employeeName}>{dropData.employeeName}-{dropData.employeeLastName}</Option>
                      })}
              </Select>
            </Form.Item>
            :
            <Form.Item  name={[name, 'driverName']}
            fieldKey={[fieldKey, 'driverName']}label="Driver"  rules={[{ required: true, message: 'Missing Driver' }]}>
                  <Input/>
            </Form.Item>
}
                 
                </Col>

                <Col span={4} style={{margin:'5px'}}>
                  <Button  onClick={() => remove(name)} disabled={indentStatusInfo.update}>
                    Remove
                  </Button>
                </Col>
              </Row>
            ))}
            
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block>
                Add
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
            {/* </Row> */}
            <Row   gutter={24}>
          <Col style={{paddingTop:'30px'}}>
            <Button type="primary" htmlType="submit" disabled={afterSubmitDisable} >
                Submit
            </Button>
            {/* {(isUpdate === false) &&
                <Button htmlType="button" style={{ margin: '0 14px' }} onClick={onReset}>
                    Reset
            </Button> } */}
          </Col>
          </Row>
      </Form>
  </Card>
  </>
);
}

export default VehicleAssignmentForm;