import React,{useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { DesignationsDto , DesignationsDtoDefault} from '@gtpl/shared-models/gtpl';
import './designation-form.css';
import { Form, Input, Button, Select,DatePicker } 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,
  },
};

/* eslint-disable-next-line */
export interface IDesignationFormProps {
  designationData: DesignationsDto;
  savedesignation: (dsgnData: DesignationsDto) => void;
  updatedesignation: (dsgnData: DesignationsDto) => void;
  closeForm: () => void;
  viewOnly: boolean;
}

export const DesignationForm =(props: IDesignationFormProps)=> {
  const [form] = Form.useForm();
  const getCopiedData = (): DesignationsDto => {
    return JSON.parse(JSON.stringify(props.designationData));
  };
  const [dsgnData, setDesignationData] = useState<DesignationsDto>(getCopiedData);
  const saveData = (values) => {
    // console.log(values);
    if(values. designationId!=0){
      props.updatedesignation(values);
    }else{
      props. savedesignation(values);
    }
    
  };
  const onReset = () => {
    form.resetFields();
  };
   React.useEffect(() => {
    form.setFieldsValue({
       createdUser:dsgnData.createdUser, 
       designation:dsgnData. designation,
       designationId:dsgnData. designationId,
     });
   }, []);
  
  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={saveData}>
      <Form.Item name="designationId" style={{display:"none"}} >
        <Input hidden/>
      </Form.Item>
      <Form.Item style={{display:"none"}} name="createdUser" >
        <Input hidden/>
      </Form.Item>

      <Form.Item
        name="designation"
        label="Designation"
        rules={[
          {
            required: true,
            pattern: /^[a-zA-Z ]*$/,
            message: 'Should be in Alphabet only',
          },
        ]}
      >
        <Input/>
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit"
       
        >
          Submit
        </Button>
        <Button htmlType="button" onClick={onReset}>
          Reset
        </Button>
       
      </Form.Item>
    </Form>
   );
}