import React,{useState,useEffect} from 'react';
import { Form, Input, Button, Select,Card, Row, Col  } from 'antd';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import {  Link, useHistory } from "react-router-dom";
import {LanguagesDto} from '@gtpl/shared-models/hrms';
import {LanguagesService} from '@gtpl/shared-services/hrms'
import './languages.css';
const { TextArea } = Input;

export interface LanguagesFormProps {
  Data: LanguagesDto;
  updateData: (Data: LanguagesDto) => void;
  isUpdate:boolean;
  closeForm: () => void;
}

export function LanguagesForm(props: LanguagesFormProps) {
  const [form] = Form.useForm();
  const service = new LanguagesService;
  const history = useHistory();
  let createdUser="";
  if(!props.isUpdate){
    createdUser= localStorage.getItem("createdUser");
  }
  
  const create = (data: LanguagesDto) =>{
    service.create(data).then(res => {
      if(res.status){
        AlertMessages.getSuccessMessage('Languages Created Successfully');
        history.push('/languages')
        onReset();
      }else{
        if(res.intlCode){
          AlertMessages.getErrorMessage(res.internalMessage);
        }else{
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }

  const onReset=()=>{
    form.resetFields();
  };

  const saveData = (values: LanguagesDto) => {
    if(props.isUpdate){
      props.updateData(values);
    }else{
      create(values);
    }
  };
    return (
  

    <Card title={<span style={{color:'white'}}>Languages</span>}
        style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }} extra={props.isUpdate==true?"":<Link to='/languages' ><span style={{color:'white'}} ><Button className='panel_button' >View </Button> </span></Link>} >
    
    
          <Form form={form}
         
           name="control-hooks"
          layout="vertical"
          onFinish={saveData}
          >
    
          <Form.Item name="LanguagesId" style={{display:"none"}} >
            <Input hidden/>
          </Form.Item>
          <Form.Item style={{display:"none"}} name="createdUser"  initialValue={createdUser}>
          <Input hidden/>
        </Form.Item>
        <Row>
            <Col xs={{span:24}} sm={{span:24}} md={{span:5,offset:1}} lg={{span:5,offset:1}} xl={{span:5,offset:1}} style={{margin:'1%'}}>
                  <Form.Item
                      name="Languages "
                      label="Languages"
                      rules={[
                        {
                          required: true,
                          message:"It should not be blank",
                          pattern:  /^[^-\s][a-zA-Z0-9_\s-]*$/,                          
                        }
                      ]}>                                              
                      <Input/>
                    </Form.Item>
            </Col>         
          </Row>
          <Row>
          <Col span={24} style={{ textAlign: 'right' }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
            {(props.isUpdate !== true ) && 
           <Button htmlType="button" style = {{margin: '0 14px'}} onClick={onReset}>
             Reset
           </Button>
            }            
          </Col>
        </Row>

          </Form>
          </Card>
      );
}

export default LanguagesForm ;