import { EmployeeTeamDto } from "@gtpl/shared-models/hrms";
import { EmployeeTeamService } from "@gtpl/shared-services/hrms";
import { AlertMessages } from "@gtpl/shared-utils/alert-messages";
import { Button, Card, Col, DatePicker, Form, Input, Row, Select } from "antd";
import moment from "moment";
import React from "react";
import { Link, useHistory } from "react-router-dom";

export interface EmployeeTeamFormProps{
  employeeTeamData:EmployeeTeamDto;
  updateEmployeeTeam:(employeeTeam:EmployeeTeamDto)=>void;
  isUpdate:boolean;
  closeForm:() => void;
}
export function EmployeeTeamForm(props:EmployeeTeamFormProps){
  
  const [form] = Form.useForm();
  let history = useHistory();
  const employeeTeamService =  new EmployeeTeamService;

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

  const createEmployeeTeam = (employeeTeam: EmployeeTeamDto) => {
    employeeTeamService.createEmployeeTeam(employeeTeam).then(res => {
      if (res.status) {
        history.push("/employeeteam_view");
        onReset();
        AlertMessages.getSuccessMessage('Employee Team Created Successfully');
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }

  
  const onReset = () => {
    console.log('')
    form.resetFields();
  }
  const onSearch = (val) => {
    console.log('search:', val);
  }

  const saveData = (values: EmployeeTeamDto)=> {
    if (props.isUpdate) {
      console.log(values);
      props.updateEmployeeTeam(values);
    } else {
      console.log(values);
      createEmployeeTeam(values);
    }
  }
  const onFocus = () => {
    console.log('focus');
  }
  const onBlur = () => {
    console.log('blur');
  }

  return(
    <Card title={<span style={{ color: 'white' }}>Employee Team</span>}
    style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }} extra={props.isUpdate == true ? "" : <Link to='/contractor-view' ><span style={{ color: 'white' }} ><Button className='panel_button' >View </Button> </span></Link>} >


    <Form form={form} name="control-hooks" layout="vertical" onFinish={saveData} initialValues={props.employeeTeamData}>

      <Form.Item name="id" 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="employeeCode"
            label="Employee Code"
            rules={[
              {
                required: true,
                message: "Employee Code is required"
              },

            ]}>
          <Input />
          </Form.Item>
        </Col>
        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
          <Form.Item
            name="employeeName"
            label="Employee Name"
            rules={[
              {
                required: true,
                message: "Employee Name is required"
              },
            ]}>
           <Input />
          </Form.Item>
        </Col>
        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
          <Form.Item
            name="shiftCode"
            label="Shift Code"
          >
            <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 EmployeeTeamForm;