import React, { useState } from 'react';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import './shipping-terms-form.css';
import {  Link, useHistory } from "react-router-dom";
import {ShippingTermsDto} from '@gtpl/shared-models/masters';
import {ShippingTermsService} from '@gtpl/shared-services/masters';


import { Form, Input, Button, Select,Card, Row, Col } from 'antd';

/* eslint-disable-next-line */
const { Option } = Select;
const layout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 8,
  },
};


const tailLayout = {
  wrapperCol: {
    offset: 10,
    span: 10,
  },
};

export interface ShippingTermsFormProps {

  shippingtermsData: ShippingTermsDto;
  updateDetails:(shippingdto:ShippingTermsDto)=>void;
 isUpdate:boolean;
closeForm: () => void;

}

export function ShippingTermsForm(
  props: ShippingTermsFormProps
) {
  const [form] = Form.useForm();
  const service = new ShippingTermsService;
  const [disable, setDisable] = useState<boolean>(false)
 let history= useHistory();

  const save = (Data: ShippingTermsDto) => {
    setDisable(true)
    Data.createdUser='ADMIN';
       service.create(Data).then(res => {
        setDisable(false)
      if (res.status) {
        AlertMessages.getSuccessMessage(res.internalMessage);
        history.push("/shipping-terms-view")
        
        onReset();
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      setDisable(false)
      AlertMessages.getErrorMessage(err.message);
    })
  }


  
  const saveData = (values: ShippingTermsDto) => {
    setDisable(false)
    // console.log(values);
    if(props.isUpdate){
      props.updateDetails(values);
    }else{
      setDisable(false)
      save(values);
    }
  
  };
  const onReset = () => {
    form.resetFields();
  };

  return (
    <Card size="small" title={<span style={{color:'white'}}>Shipping Terms</span>} style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }} extra={props.isUpdate==true?"":<Link to = "/shipping-terms-view"  ><span style={{color:'white'}} ><Button className='panel_button' >View </Button> </span></Link>} >
    <Form layout="vertical" form={form} onFinish={saveData} initialValues={props.shippingtermsData} >
    <Row>
    <Form.Item name="shippingTermsId" style={{ display: 'none' }}>
        <Input hidden />
      </Form.Item>
  
      <Form.Item style={{ display: 'none' }} name="createdUser">
        <Input hidden />
      </Form.Item>
        <Col xs={{span:24}} sm={{span:24}} md={{span:5}} lg={{span:6}} xl={{span:6}}>
        <Form.Item
          name="shippingTermsName"
          label="Shipment Term Name"
          rules={[
            {
              required: true,
              message: 'Enter the Shipping Term Name'
            },
            // {
          
            //   pattern: /^[^-\s\\0-9\[\]()*!@#$^&_\-+/%=`~{}:";'<>,.?|][a-zA-Z ]*$/,
            //   message: `Should contain only alphabets.`
            // }
          ]}
        >
          <Input/>
        </Form.Item>
        </Col>
        </Row>
      
        <Row>
            <Col span={24} style={{ textAlign: 'right' }}>
     
            <Button type="primary" disabled={disable} htmlType="submit" >
            Submit
          </Button>
          {(props.isUpdate===false) && 
           <Button htmlType="button" style={{ margin: '0 8px' }} onClick={onReset}>
            Reset
          </Button>}
         
          </Col>
          </Row>
    </Form>
          </Card>

   
  );
}

export default ShippingTermsForm;