import React, { useEffect, useState } from 'react';
import { Button, Card, Col, Form, Input, Row } from 'antd';
import {Link, useHistory} from 'react-router-dom';

import './pages-asset-management-asset-management-components-asset-po-form.css';
import {AssetCatagoryService} from '../../../../../../shared-services/asset-management/src/lib/asset-category';
import {AssetsCatagoryDto} from '../../../../../../shared-models/asset-management/src/lib/assets-catagory/assets-catagory-dto';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';

/* eslint-disable-next-line */

export interface AssetCategoryFormProps {
  assetCategoryData: any;
  updateCategory: (assetsData: any) => void;
  isUpdate: boolean;
  closeForm: () => void;
  setDrawerVisible: any;
  getAllAssetsCatagory?: () => void;
}
// export interface AssetCategoryFormProps {
//   isUpdate: boolean;
// }

const AssetCategoryForm=( props: AssetCategoryFormProps)=> {
  
  const service = new AssetCatagoryService();
  const [form] = Form.useForm();
  const navigate = useHistory()
  const [initialValues, setInitialValues] = useState();

  useEffect(() => {
      if (props.assetCategoryData) {
        const valuesToSet = { ...props.assetCategoryData };
  
        if (props.assetCategoryData) {
          form.setFieldsValue({
            assetsCatagoryId: props.assetCategoryData.assetsCatagoryId,
            assetsCatagoryName: props.assetCategoryData.assetsCatagoryName,
           
                  });
        } else {
          form.setFieldsValue({
            assetsCatagoryId: props.assetCategoryData.assetsCatagoryId,
            assetsCatagoryName: props.assetCategoryData.assetsCatagoryName,
           
          });
        }
  
        setInitialValues(valuesToSet);
      }
  
    }, [props.assetCategoryData]);

  const onFinish = (values:AssetsCatagoryDto) => {
    if (props.isUpdate) {
      props.updateCategory(values)
    }  else
    {service.createAssetsCatagory(values).then(
      res => {
        if(res.status) {
          AlertMessages.getSuccessMessage('Created Successfully');
          navigate.push("/asset-category")
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    )}
  }

  const clearData = () => {
    form.resetFields()
  }

  let createdUser = "";

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

  return (
    <Card
      title={<span style={{ color: "white" }}>Asset Category</span>}
      style={{ textAlign: "center" }}
      headStyle={{ backgroundColor: "#69c0ff", border: 0 }}
      extra={
        props.isUpdate == true ? (
          ""
        ) : (
           <Link to="/asset-category">
          <span style={{ color: "white" }}>
            <Button>View </Button>{" "}
          </span>
           </Link>
        )
      }
    >
      <Form onFinish={onFinish} form={form} initialValues={initialValues}>
        <Row gutter={20}>
          <Col >
            <Form.Item name="assetsCatagoryId" >
              <Input hidden />
            </Form.Item>
            <Form.Item name="createdUser" initialValue={createdUser}>
              <Input hidden />
            </Form.Item>
            </Col>
            <Col>
            <Form.Item
              name="assetsCatagoryName"
              label="Category Name"
              rules={[
                {
                  required: true
                }
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
        </Row>

        <Row>
          <Col span={24} style={{ textAlign: "right" }}>
            <Button htmlType='submit' type="primary">Submit</Button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            {[] && <Button onClick={clearData}>Reset</Button>}
          </Col>
        </Row>
      </Form>
    </Card>
  );
}

export default AssetCategoryForm;