import React,{useState,useEffect} from 'react';
import { Form, Input, Button, Select,Card, Row, Col, DatePicker, message } from 'antd';
import { Link, useHistory } from "react-router-dom";
import {WorkerDto} from '@gtpl/shared-models/masters'
import {VillageTransportCostService, WorkerService} from '@gtpl/shared-services/masters'
import {ContractorService} from '@gtpl/shared-services/hrms'
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import moment from 'moment';
import { ContractorDto } from '@gtpl/shared-models/hrms';


/* eslint-disable-next-line */
export interface WorkerFormProps {

    workerData:WorkerDto;
    updateWorker:(worker:WorkerDto)=>void;
    isUpdate:boolean;
    closeForm: () => void;
}

export const PreProductionWorkersForm = (props: WorkerFormProps) => {

  const { Option } = Select;
  const [disable, setDisable] = useState<boolean>(false)
  const [contractorData, setContractorData] = useState<ContractorDto[]>([]);
  const [contractorName,setContractorName] = useState<string>()
  const [villageFromId,setVillageFromId] = useState<any>()

  const [form] = Form.useForm();
  let history = useHistory();
  const service = new VillageTransportCostService()
const [data,setData] = useState<any[]>([])


    console.log(props.workerData,"poiuytr")
    console.log(props.isUpdate,"isupdate")

   useEffect(()=> {getAllContractorActions()},[])


  let createdUser ;
  if(!props.isUpdate){
    createdUser= localStorage.getItem("createdUser");
  }

  const workerService = new WorkerService()
  const contractorService = new ContractorService();


  useEffect(()=>{
    getAllVillageTransporationCostData()
  },[]);
  
  
  const getAllVillageTransporationCostData=() =>{
    service.getAllVillageTransporationCostData().then(res=>{
      if(res.status){
        setData(res.data)
        message.success(res.internalMessage,1)
      }else{
        setData([])
        message.error(res.internalMessage,2)
      }
    })
    
  }
  const getAllContractorActions = () => {
    contractorService.getAllContractorActions().then(res => {
      if (res.status) {
        setContractorData(res.data);
      } else {
      
          setContractorData([]);
          AlertMessages.getErrorMessage(res.internalMessage);
      }
    }).catch(err => {
      setContractorData([]);
  
      AlertMessages.getErrorMessage(err.message);
    })
  }

  const createWorker=(workerData:WorkerDto)=>{
    setDisable(true)
    // workerData.unitId=Number(localStorage.getItem('unit_id'));
    workerService.createWorker(workerData).then(res => {
      setDisable(false)
      if (res.status) {
        AlertMessages.getSuccessMessage('Worker Created Successfully');
        history.push("/workers-grid");
        onReset();
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      setDisable(false)
      AlertMessages.getErrorMessage(err.message);
    })
  }

  const onReset=()=>{
    form.resetFields();
    
  }
  
  const onContractorChange = (val,option) => {
    setContractorName(option?.contractorName)
    form.setFieldsValue({
      contractorId: val,
      contractorName: option?.contractorName // Store contractorName in form values
    });
  }


  const onVillageChange = (val,option) => {
    console.log(val,"valll")
    setVillageFromId(option?.villageFromId)
    form.setFieldsValue({
      villageFrom: val,
      villageFromId: option?.villageFromId 
    });
    console.log( form.setFieldsValue({
      villageFrom: val,
      villageFromId: option?.villageFromId 
    }),"$$$$$$$$$$")
  }

  


  const saveData = (values: WorkerDto) => {
    values.contractorName = contractorName
    values.villageFromId=villageFromId
    if (values.dateOfBirth) {
      values.dateOfBirth = moment(values.dateOfBirth);
    }
    if (values.dateOfJoining) {
      values.dateOfJoining = moment(values.dateOfJoining);
    }
    setDisable(false)
    if(props.isUpdate){
      props.updateWorker(values);
    }else{
      setDisable(false)
      console.log(values)
      createWorker(values);
    }
  
  };


  
  return (
    <>
    <Card title={<span style={{color:'white'}}> Worker </span>} style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }} extra={props.isUpdate==true?"":<Link to='/workers-grid' ><Button className='panel_button' >View </Button></Link>}
    >
      <Form layout="vertical" form={form} initialValues={{  ...props.workerData,
    dateOfBirth: props.workerData?.dateOfBirth ? moment(props.workerData.dateOfBirth) : null,
    dateOfJoining: props.workerData?.dateOfJoining ? moment(props.workerData.dateOfJoining) : null}} name="control-hooks" onFinish={saveData}>
      <Form.Item name="workerId" style={{display:"none"}} >
        <Input hidden/>
      </Form.Item>
    <Form.Item style={{display:"none"}} name="createdUser"  initialValue={createdUser}>
      <Input hidden/>
    </Form.Item>
    <Row >
  
          <Col xs={{span:24}} sm={{span:24}} md={{span:5,offset:1}} lg={{span:5,offset:1}} xl={{span:5,offset:1}} style={{margin:'1%'}}>
            <Form.Item 
                  name="workerCode"
                  label="Worker Id Number"
                  rules={[
                    {
                      required: true,message:'Worker ID Number is required'
                      
                    },
                    {
                      pattern: /^[^-\s][a-zA-Z0-9_\s-]*$/,
                      message: `Don't Allow Spaces`
                    }
                  ]}>
                  <Input /> 
            </Form.Item>
          </Col>
          <Col xs={{span:24}} sm={{span:24}} md={{span:5,offset:1}} lg={{span:5,offset:1}} xl={{span:5,offset:1}} style={{margin:'1%'}}>
            <Form.Item 
                  name="workerName"
                  label="Worker Name"
                  rules={[
                    {
                      required: true,message:'Worker Name is required'
                      
                    },
                    {
                      pattern: /^[^-\s][a-zA-Z0-9_\s-]*$/,
                      message: `Don't Allow Spaces`
                    }
                  ]}>
                  <Input /> 
            </Form.Item>
          </Col>
          <Col xs={{span:24}} sm={{span:24}} md={{span:5,offset:1}} lg={{span:5,offset:1}} xl={{span:5,offset:1}} style={{margin:'1%'}}>
            <Form.Item 
                  name="aadharCardNumber"
                  label="Aadhar Card"
                  // rules={[
                  //   {
                  //     required: true,
                  //     message:'Aadhar Card is required'
                      
                  //   },
                  //   {
                  //     pattern: /^\d{12}$/,
                  //     message: `Enter 12 Digit Number `
                  //   }
                  // ]}
                  >
                  <Input /> 
            </Form.Item>
          </Col>

          <Col xs={{span:24}} sm={{span:24}} md={{span:5,offset:1}} lg={{span:5,offset:1}} xl={{span:5,offset:1}} style={{margin:'1%'}}>

                  <Form.Item
                name="dateOfBirth"
                label="Date of Birth"
          
                // rules={[
                //   {
                //     required: true,
                //     message: 'Date of Birth is Required'
                //   },
                // ]}
              >
                <DatePicker  style={{ width: '100%' }} format="YYYY-MM-DD" placeholder='Select Date of Birth'  />
                {/* <Input /> */}

              </Form.Item>
                  
          </Col>

          <Col xs={{span:24}} sm={{span:24}} md={{span:5,offset:1}} lg={{span:5,offset:1}} xl={{span:5,offset:1}} style={{margin:'1%'}}>
            <Form.Item 
                  name="address"
                  label="Address"
                  // rules={[
                  //   {
                  //     required: true,
                  //     message:'Address is required'
                      
                  //   },
                  //   {
                  //     pattern: /^[^-\s][a-zA-Z0-9_\s-]*$/,
                  //     message: `Don't Allow Spaces`
                  //   }
                  // ]}
                  >
                  <Input /> 
            </Form.Item>
          </Col>

          <Col xs={{span:24}} sm={{span:24}} md={{span:5,offset:1}} lg={{span:5,offset:1}} xl={{span:5,offset:1}} style={{margin:'1%'}}>
            <Form.Item 
                  name="villageFrom"
                  label="Village From"
                  rules={[
                    {
                      required: true,
                      message:'villageFrom is required'
                      
                    },
                    // {
                    //   pattern: /^[^-\s][a-zA-Z0-9_\s-]*$/,
                    //   message: `Don't Allow Spaces`
                    // }
                  ]}>
                  <Select placeholder="Select VillageName"  onChange={onVillageChange}  showSearch  optionFilterProp="children">
                  {data.map((data) => {
                        return <Option key={data.villageName} value={data.villageName} villageFromId={data.villageFromId}>{data.villageName}</Option>
                      })}
                    </Select> 
            </Form.Item>
          </Col>

          
          <Col xs={{span:24}} sm={{span:24}} md={{span:5,offset:1}} lg={{span:5,offset:1}} xl={{span:5,offset:1}} style={{margin:'1%'}}>
            <Form.Item 
                  name="contractorId"
                  label="Contractor"
                  rules={[
                    {
                      required: true,
                      message: 'Contractor is required',
                    },
                  ]}
                >
                  <Select placeholder="Select Contractor"  onChange={onContractorChange}
                  showSearch  optionFilterProp="children" 
                  >
                     {contractorData.map((rec) => {
                  return (
                    <Option key={rec.contractorId} value={rec.contractorId} contractorName={rec.contractorName}>
                      {rec.contractorName}
                    </Option>
                  );
                })}
                  </Select> 
              </Form.Item>

          </Col>

          <Col xs={{span:24}} sm={{span:24}} md={{span:5,offset:1}} lg={{span:5,offset:1}} xl={{span:5,offset:1}} style={{margin:'1%'}}>
            <Form.Item
                name="dateOfJoining"
                label="Date Of Joining"
                rules={[
                  {
                    required: true,
                    message: 'Date Of Joining is Required'
                  },
                ]}
              >
                <DatePicker  style={{ width: '100%' }} format="YYYY-MM-DD"  placeholder='Select Date of Joining'/>
                {/* <Input /> */}
              </Form.Item>
          </Col>
          </Row>
          <Row>
          <Col span={24} style={{ textAlign: 'right' }}>
          
          <Button type="primary"disabled={disable} htmlType="submit" >
            Submit
          </Button>
        
              <Button htmlType="button" style={{ margin: '0 14px' }} onClick={onReset}>
                Reset
              </Button>
      </Col>
          </Row>
          
      </Form>
    </Card>
    </>

  );
}

export default PreProductionWorkersForm;