import React,{useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { HolidaysDto , HolidaysDtoDefault} from '@gtpl/shared-models/gtpl';
import './holidays-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 IHolidaysFormProps {
   // form:any;
   holidaysData: HolidaysDto;
   saveHoliday: (holidayData: HolidaysDto) => void;
   updateHoliday: (holidayData: HolidaysDto) => void;
   closeForm: () => void;
   viewOnly: boolean;
}

export const HolidaysForm =(props: IHolidaysFormProps)=> {
  const [form] = Form.useForm();
  const getCopiedData = (): HolidaysDto => {
    return JSON.parse(JSON.stringify(props.holidaysData));
  };
  const [holidayData, setHolidayData] = useState<HolidaysDto>(getCopiedData);
  const saveData = (values) => {
    // console.log(values);
    if(values.holidayId!=0){
      props.updateHoliday(values);
    }else{
      props.saveHoliday(values);
    }
    
  };
  const onReset = () => {
    form.resetFields();
  };
  React.useEffect(() => {
    form.setFieldsValue({
       createdUser:holidayData.createdUser, 
      //  holidayDate:holidayData.holidayDate,
       holidayName:holidayData.holidayName,
       holidayId:holidayData.holidayId,
     });
   }, []);
   return (
    <Form {...layout} form={form} name="control-hooks" onFinish={saveData}>
      <Form.Item name="holidayId" style={{display:"none"}} >
        <Input hidden/>
      </Form.Item>
      <Form.Item style={{display:"none"}} name="createdUser" >
        <Input hidden/>
      </Form.Item>
      <Form.Item
        name="holidayDate"
        label="Holiday Date"
        rules={[
          {
            required: true,
            message: "Holiday Date is required"
          },
        ]}        
      >
      <DatePicker picker="date"/>

      </Form.Item>
      <Form.Item
        name="holidayName"
        label="Holiday Name"
        rules={[
          {
            required: true,
            pattern: /^[a-zA-Z ]*$/,
            message: 'Name 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>
  );
}

// export default PagesAttendanceManagementAttendanceManagementComponentsHolidaysForm;