import React from 'react';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import './sales-person-form.css';
import {  Link } from "react-router-dom";
import {SalesPersonDto} from '@gtpl/shared-models/masters';
import {SalesPersonService} 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 SalesPersonFormProps {

  salespersonData: SalesPersonDto;
  updateDetails:(salesdto:SalesPersonDto)=>void;
 isUpdate:boolean;
closeForm: () => void;

}

export function SalesPersonForm(
  props: SalesPersonFormProps
) {


  const [form] = Form.useForm();
  const service = new SalesPersonService;


  const save = (Data: SalesPersonDto) => {
       service.create(Data).then(res => {
      if (res.status) {
        AlertMessages.getSuccessMessage('Created Successfully');
        onReset();
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }


  
  const saveData = (values: SalesPersonDto) => {
    // console.log(values);
    if(props.isUpdate){
      props.updateDetails(values);
    }else{
      save(values);
    }
  
  };
  const onReset = () => {
    form.resetFields();
  };
  return (
    <Card title={<span style={{color:'white'}}>Sales Person Form </span>} style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }} extra={<Link to = "/Salesperson-view"  ><span style={{color:'white'}} ><Button className='panel_button' >View </Button> </span></Link>} >
    <Form {...layout}onFinish={saveData} initialValues={props.salespersonData} >
      <Row>
        <Col span={8}>
       
        <Form.Item
          name="personName"
          label="Person Name"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input/>
        </Form.Item>
        </Col>
        <Col span={8}>
        <Form.Item
          name="personMobileNumber"
          label="Mobile No."
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input/>
        </Form.Item>
        </Col>
        </Row>
      
        <Row>
            <Col span={24} style={{ textAlign: 'right' }}>
     
            <Button type="primary" htmlType="submit" >
            Submit
          </Button>
      {props.isUpdate?<Link to='/Salesperson-view' >  <Button htmlType="button" style={{ margin: '0 8px' }}>
            Cancel
          </Button></Link>: <Button htmlType="button" style={{ margin: '0 8px' }} onClick={onReset}>
            Reset
          </Button>}
         
          </Col>
          </Row>
    </Form>
          </Card>
  );
}

export default SalesPersonForm;