import React,{useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { StatesDto,StateDtoDefault} from '@gtpl/shared-models/gtpl';
 import './states-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 IStateFormProps {
  // form:any;
  stateData: StatesDto;
  saveState: (stateData: StatesDto) => void;
  updateState: (stateData: StatesDto) => void;
  closeForm: () => void;
  viewOnly: boolean;
}
export const StatesForm = (props:IStateFormProps) => {
  // console.log(props);
  const [form] = Form.useForm();
  const getCopiedData = (): StatesDto => {
    return JSON.parse(JSON.stringify(props.stateData));
  };
  const [stateData, setStateData] = useState<StatesDto>(getCopiedData);

  const saveData = (values) => {
    // console.log(values);
    if(values.stateId!=0){
      props.updateState(values);
    }else{
      props.saveState(values);
    }
    
  };
  
  const onReset = () => {
    form.resetFields();
  };

  React.useEffect(() => {
   form.setFieldsValue({
      createdUser:stateData.createdUser, 
      stateCode:stateData.stateCode,
      stateName:stateData.stateName,
      stateId:stateData.stateId,
    });
  }, []);

  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={saveData}>
      <Form.Item name="stateId" style={{display:"none"}} >
        <Input hidden/>
      </Form.Item>
      <Form.Item style={{display:"none"}} name="createdUser" >
        <Input hidden/>
      </Form.Item>
      <Form.Item
        name="stateCode"
        label="State Code"
        rules={[
          {
            required: true,
            pattern: /^[a-zA-Z ]*$/,
            message: 'Should be in Alphabet only',
          },
        ]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        name="stateName"
        label="State 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>
  );
};