import React,{useState, useEffect} from 'react';
import {Form, Input, Button, Card, Row, Col, DatePicker} from 'antd';
import {AlertMessages} from '@gtpl/shared-utils/alert-messages';
import {Link, useHistory} from 'react-router-dom';
import moment from 'moment';
import {PickUpDto} from '@gtpl/shared-models/hrms';
import { PickUpService } from '@gtpl/shared-services/hrms';

import './pickup-form.css';

/* eslint-disable-next-line */
export interface PickUpProps {
  pickUpData: PickUpDto;
  updatePickUp: (pickUpDto: PickUpDto) => void;
  isUpdate: boolean;
  closeForm: () => void;
}

export function PickUp(
  props: PickUpProps
) {
  const [form] = Form.useForm();
  let history = useHistory();
  const pickUpService = new PickUpService()
  const [disable, setDisable] = useState<boolean>(false)
  let createdUser = "";

  if(!props.isUpdate){
    createdUser = localStorage.getItem("createdUser");
  }

  const createPickUp = (Data: PickUpDto) => {
    setDisable(true)
    pickUpService.createPickUp(Data).then(res => {
      setDisable(false)
      if(res.status) {
        AlertMessages.getSuccessMessage('PickUp created successfully');
        history.push('/pickUp-grid');
        onReset();
      } else {
        if(res.intlCode){
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      setDisable(false)
      AlertMessages.getErrorMessage(err.message);
    })
  }

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

  const saveData = (values: PickUpDto) => {
    setDisable(false)
    if(props.isUpdate){
      console.log(values);
      props.updatePickUp(values);
    }else {
      setDisable(false)
      console.log(values);
      createPickUp(values);
    }
  };
  return (
    <Card title={<span style={{color:'white'}}>PickUp</span>} style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }} extra={props.isUpdate==true?"":<Link to='/pickUp-grid' ><Button className='panel_button' >View </Button></Link>}
    >
    <Form layout = "vertical" form={form} onFinish={saveData} initialValues={props.pickUpData} >
        <Form.Item 
        name ="pickUpId" style={{display:"none"}} >
          <Input hidden/>
        </Form.Item>
        <Form.Item style={{display:"none"}} name="createdUser"  initialValue={createdUser}>
          <Input hidden/>
        </Form.Item>
      <Row gutter={24}>
        <Col xs={{span:24}} sm={{span:24}} md={{span:6}} lg={{span:6}} xl={{span:6}}>
          <Form.Item
                name="pickUp"
                label="PickUp"
                rules={[
                  {
                    required: true,
                    message:"Enter valid PickUp",max:16
                  },
                  {
          
                    pattern: /^[^-\s\\0-9\[\]()*!@#$^&_\-+/%=`~{}:";'<>,.?|][a-zA-Z ]*$/,
                    message: `Should contain only alphabets.`
                  }
                ]}>
                <Input/>
          </Form.Item>
        </Col>
       
      </Row>
   
      
        <Col span={24} style={{ textAlign: 'right' }}>
          <Button type="primary"disabled={disable} htmlType="submit" >
            Submit
          </Button>
          {(props.isUpdate!==true) &&
          <Button htmlType="button" style={{ margin: '0 14px' }} onClick={onReset}>
            Reset
          </Button>
          }
        </Col>

    </Form>
  </Card>
  );
}

export default PickUp;