import React,{useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { CostCentersDto, DesignationsDto, EmployeeDto,EmployeeDtoDefault,LibSubContractorsDto, ProjectsDto} from '@gtpl/shared-models/gtpl';
 import './employee-form.css';
import { Form, Input, Button, Select, Radio } from 'antd';
import ClearableLabeledInput from 'antd/lib/input/ClearableLabeledInput';
import { clear } from 'console';
const { Option } = Select;
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 14,
  },
};
export interface IEmployeeFormProps {
  // form:any;
  employeeData: EmployeeDto;
  saveEmployee: (employeeData: EmployeeDto) => void;
  updateEmployee: (employeeData: EmployeeDto) => void;
  closeForm: () => void;
  viewOnly: boolean;
  CostcentersData:CostCentersDto[];
  SubContractorsData:LibSubContractorsDto[];
  ProjectsData:ProjectsDto[];
  DesignationsData:DesignationsDto[];
}
export const EmployeeForm = (props:IEmployeeFormProps) => {
  const [form] = Form.useForm();
  const getCopiedData = (): EmployeeDto => {
    return JSON.parse(JSON.stringify(props.employeeData));
  };
  const [employeeData, setemployeeData] = useState<EmployeeDto>(getCopiedData);
  const empModeCheck=employeeData.employmentMode==='GTPL'?false:true;
  const [visibleSubcontractor,setvisibleSubcontractor]=useState<boolean>(empModeCheck);
  
  const saveData = (values) => {
    console.log(values);
    if(values.Id===undefined || values.Id===0){ 
      props.saveEmployee(values);
    }else{
      props.updateEmployee(values);
    }    
  };
  
  const onReset = () => {
    form.resetFields();
  };
  const setEmploymentMode=(e)=>{
    console.log(e);
   if(e!=='GTPL'){
    //  setvisibleSubcontractor(true);
   }else{
    // form.setFieldsValue({subContractorId:''});
    // setvisibleSubcontractor(false);
   }
  }
  React.useEffect(() => {
    console.log(employeeData);
    
   form.setFieldsValue({
      createdUser:employeeData.createdUser, 
      empCode:employeeData.empCode,
      empName:employeeData.empName,
      Id:employeeData.Id,
      Role:employeeData.Role,
      emailId:employeeData.emailId,
      mobileNo:employeeData.mobileNo,
      employmentMode:employeeData.employmentMode,
      otApplicable:employeeData.otApplicable===true?1:0,
      designationId:employeeData.designationId,
      Gender:employeeData.Gender,
      maritalStatus:employeeData.maritalStatus,
      costcenterId:'1',
      projectId:employeeData.projectId,
      subContractorId:employeeData.subContractorId,
    });
  }, [visibleSubcontractor]);

  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={saveData}>
      <Form.Item style={{display:"none"}} name="Id" ><Input/></Form.Item>
      <Form.Item style={{display:"none"}} name="createdUser" ><Input hidden/></Form.Item>
      <Form.Item style={{display:"none"}} name="Role" ><Input hidden/></Form.Item>
      <Form.Item name="costcenterId" style={{display:'none'}}>
      {/* <Select placeholder='Please Select' className='costcenterId' style={{ minWidth: '200px' }} >
        
          {props.CostcentersData.map(CostCentersDto => {
            return <Option key={ CostCentersDto.costCenterId} value={CostCentersDto.costCenterId}
             >{CostCentersDto.costCenterName}</Option>;
          })}
      </Select> */}
      <Input value='1' hidden/>
      </Form.Item>
      <Form.Item name="projectId" label="Project Name" rules={[{required: true,},]}>
      <Select  className='projectId' showSearch
    // style={{ width: 200 }}
    placeholder="Select a Project"
    optionFilterProp="children"
    
    // onChange={onChange}
    // onFocus={onFocus}
    // onBlur={onBlur}
    // onSearch={onSearch}
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    } 
    disabled={employeeData.projectId!=null}
    >
        
          {props.ProjectsData.map(ProjectsDto => {
            return <Option key={ ProjectsDto.projectId} value={ProjectsDto.projectId}
            >{ProjectsDto.projectName}</Option>;
          })}
      </Select>
      </Form.Item>
      <Form.Item
        name="empCode"
        label="Aadhar Number/PAN Card"
        rules={[
          {
            required: true,
            pattern: /^[0-9a-zA-Z ]+$/,
            message: "Please Fill",
          },
        ]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        name="empName"
        label="Name as on Aadhar"
        rules={[
          {
            required: true,
            pattern: /^[a-zA-Z ]*$/,
            message: 'Name should be in Alphabet only',
          },
        ]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        name="emailId"
        label="Email"
        rules={[
          {
            required: false,
            type: "email",
            message:'Invalid Email'
          },
        ]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        name="mobileNo"
        label="Mobile No"
      
        rules={[
          {
            required: true,
            len: 10,
            pattern: /^\d{10}$/,
            message: "Mobile no. should be in 10 digits",
          },
        ]}
      >
        <Input/>
      </Form.Item>
       <Form.Item name="Gender" label="Gender" rules={[{required: true,},]}>
        <Select placeholder='Please Select'  >
            <Option value="Male">Male</Option>
            <Option value="Female">Female</Option>
          </Select>
      </Form.Item>
      <Form.Item name="maritalStatus" label="Marital Status" rules={[{required: true,},]}>
        <Select placeholder='Please Select' >
          <Option value="Married">Married</Option>
          <Option value="Un-Married">Un-Married</Option>
        </Select>
      </Form.Item>
      <Form.Item name="employmentMode" label="Employment Mode"  rules={[{required: true,},]}>     
        <Select placeholder='Please Select' onChange={setEmploymentMode} >
          <Option value="GTPL">GTPL</Option>
          <Option value="Sub-contractor">Sub-contractor</Option>
        </Select>
      </Form.Item>
      <Form.Item name="subContractorId" label="Sub Contractor">
      <Select className='subContractorId' style={{ minWidth: '200px' }} 
      showSearch
       placeholder="Select subcontractor"
       optionFilterProp="children"
       // onChange={onChange}
       // onFocus={onFocus}
       // onBlur={onBlur}
       // onSearch={onSearch}
       filterOption={(input, option) =>
         option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
       } >
          {props.SubContractorsData.map(LibSubContractorsDto => {
            return <Option key={ LibSubContractorsDto.subContractorId} value={LibSubContractorsDto.subContractorId}              
            >{LibSubContractorsDto.subContractorName}</Option>;
          })}
      </Select>
      </Form.Item>
      <Form.Item name="otApplicable" label="Ot Eligiblity"  rules={[{required: true,},]}>     
        <Select placeholder='Please Select' >
          <Option value={1}>Yes</Option>
          <Option value={0}>No</Option>
        </Select>
      </Form.Item>
      <Form.Item name="designationId" label="Designation" rules={[{required: true,},]}>
      <Select placeholder='Please Select' className='designationId' style={{ minWidth: '200px' }} >
        
          {props.DesignationsData.map(DesignationsDto => {
            return <Option key={ DesignationsDto.designationId } value={DesignationsDto.designationId}
            >{DesignationsDto.designation}</Option>;
          })}
      </Select>
      </Form.Item>
      {/* {visibleSubcontractor &&  */}
      
      {/* } */}
      
      
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit"
       
        >
          Submit
        </Button>
        <Button htmlType="button" onClick={onReset}>
          Reset
        </Button>
       
      </Form.Item>
    </Form>
  );
};