import React,{useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { CostCentersDto,CostCenterDtoDefault} from '@gtpl/shared-models/gtpl';
 import './costcenters-form.css';
import { Form, Input, Button, Select } 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 ICostcenterFormProps {
  // form:any;
  costcenterData: CostCentersDto;
  saveCostcenter: (CostcenterData: CostCentersDto) => void;
  updateCostcenter: (CostcenterData: CostCentersDto) => void;
  closeForm: () => void;
  viewOnly: boolean;
}
export const CostcenterForm = (props:ICostcenterFormProps) => {
  // console.log(props);
  const [form] = Form.useForm();
  const getCopiedData = (): CostCentersDto => {
    return JSON.parse(JSON.stringify(props.costcenterData));
  };
  const [costcenterData, setCostcenterData] = useState<CostCentersDto>(getCopiedData);

  const saveData = (values) => {
     console.log(values);
    if(values.costCenterId!=''){
      props.updateCostcenter(values);
    }else{
      props.saveCostcenter(values);
    }
    
  };
  
  const onReset = () => {
    form.resetFields();
  };

  React.useEffect(() => {
      form.setFieldsValue({
      costCenterId:costcenterData.costCenterId,
      createdUser:costcenterData.createdUser, 
      costCenterCode:costcenterData.costCenterCode,
      costCenterName:costcenterData.costCenterName,
      
    });
  }, []);

  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={saveData}>
      <Form.Item name="costCenterId" style={{display:"none"}} >
        <Input hidden/>
      </Form.Item>
      <Form.Item style={{display:"none"}} name="createdUser" >
        <Input hidden/>
      </Form.Item>
      <Form.Item
        name="costCenterCode"
        label="Costcenter Code"
        rules={[
          {
            required: true,
            message: "Cost center Code is required"
          },
        ]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        name="costCenterName"
        label="Cost center 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>
  );
};