import { Link, useHistory } from "react-router-dom";
import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Select, Card, Row, Col } from 'antd';
import {DevicesDto} from '@gtpl/shared-models/canteen-management';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import {DevicesServices} from '@gtpl/shared-services/canteen-management';

import './device-form.css';

/* eslint-disable-next-line */
export interface DeviceFormProps {
  isUpdate: boolean;
  closeForm: () => void;
  updateData: (Data: DevicesDto) => void;
  Data : DevicesDto;
}

export function DeviceForm(
  props: DeviceFormProps
) {
  const [form] = Form.useForm();
  const [disable, setDisable] = useState<boolean>(false)
  const service = new DevicesServices();
  let history = useHistory()
  let createdUser = "";
  if (!props.isUpdate) {
    createdUser = localStorage.getItem("createdUser");
  }
  const onReset = () => {
    form.resetFields();
  };
  const savedevices = (values: DevicesDto) => {
    setDisable(true)
    service.createDevices(values).then((res) => {
      setDisable(false)
        if (res.status) {
          AlertMessages.getSuccessMessage('Device Created Successfully');
          history.push("/device-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: DevicesDto) => {
    setDisable(false)
    if (props.isUpdate) {
      props.updateData(values);
    } else {
      setDisable(false)
      savedevices(values);
    }
  };
  return (
    <div>
      <Card title={<span style={{ color: 'white' }}>Devices</span>}
        style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }} extra={props.isUpdate == true ? "" : <Link to='/device-view' ><span style={{ color: 'white' }} ><Button className='panel_button' >View </Button> </span></Link>} >
        <Form layout={'vertical'} form={form} initialValues={props.Data} name="control-hooks"  onFinish={saveData}
        >
          <Form.Item name="deviceId" 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="deviceCode"
                label="Device Code"
                rules={[
                  {
                    required: true,
                    message: " Device Code is missing"
                  }
                ]}>
                <Input />
              </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
              <Form.Item
                name="deviceName"
                label="Device Name"
                rules={[
                  {
                    required: true,
                    message: " Device Name is missing"
                  }
                ]}>
                <Input />
              </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
              <Form.Item
                name="description"
                label="Description"
                rules={[
                  {
                    required: true,
                    message: " Description is missing"
                  }
                ]}>
                <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>
    </div>
  );
}

export default DeviceForm;